Iphone 像Facebook这样的图片库和动画

我正在尝试制作一个带有一些漂亮动画和过渡的图像库，就像新的Facebook应用程序提供的那样。我一直在寻找教程，但似乎很难找到什么，或者我只是在寻找错误的东西

与提供此功能的库相比，我对自己实现此功能的步骤更感兴趣，因为这将是一个非常好的学习体验，而库往往没有足够的可定制性

我特别感兴趣的元素有：

• 显示带有所有图像的uicollectionview，裁剪成正方形，居中并精确缩放（抗锯齿）。请注意，图像不会压缩在一起以使其成为正方形
• 从裁剪后的图像到具有漂亮黑色背景的原始尺寸，无缝地制作成全屏视图的动画。动画平滑，并提供“反弹”效果
• 能够在全屏中浏览图像，允许在缩放的图像中进行缩放和平移，这与照片应用程序非常相似。为此，有几个库可用，但它们都在顶部和底部为您提供了标准条，这并不真正符合我的设计；我希望全屏视图更清晰、更可定制

---

对于这些元素的任何步骤都将不胜感激

我自己正在我的应用程序中制作这项功能，现在已经有一天了。我无法使用

UICollectionView

，因为它仅在>=iOS6中可用。我已经手动创建了一个网格布局，实际上它很容易实现

在.h文件中放入此

{
    int thumbWidth;
    int thumbHeight;
    int photosInRow;
    int xPos;
    int yPos;
    int padding;
    int photosCount;
}

@property (strong, nonatomic) UIScrollView *photoScroll;
@property(nonatomic, strong) NSArray *photosArray;

在.m文件中

thumbHeight = 73; // 2px is reduced for border
thumbWidth = 73; // 2px is reduced for border
photosInRow = 4;
padding = 4;
xPos = 0;
yPos = 0;

您可以根据需要更改上述值。然后使用图像填充并动态创建网格布局，如下所示：

photoScroll = [[UIScrollView alloc] initWithFrame:CGRectMake(padding, padding, self.view.frame.size.width, self.view.frame.size.height)];
photoScroll.showsVerticalScrollIndicator = NO;
photoScroll.showsHorizontalScrollIndicator = NO;
[photoScroll setAutoresizingMask:UIViewAutoresizingFlexibleHeight];


photosCount = [photosArray count];
SDWebImageManager *manager = [SDWebImageManager sharedManager];

for (int counter = 0; counter < photosCount; counter++) {
    // Set x, y positions
    if (counter % photosInRow == 0 && counter !=0) {
        yPos = yPos+thumbHeight+padding;
        xPos = 0;

    } else {
        if (counter != 0) {
            xPos = xPos+thumbWidth+padding;
        }
    }

    UIButton *btnImage = [UIButton buttonWithType:UIButtonTypeCustom];
    [[btnImage layer] setBorderWidth:1.0f];
    [[btnImage layer] setBorderColor:[UIColor whiteColor].CGColor];

    DBPhotos *photo = (DBPhotos *)[photosArray objectAtIndex:counter];

    NSURL *url = [NSURL URLWithString: photo.thumb];
    [manager downloadWithURL:url delegate:self options:0
                     success:^(UIImage *image){
                         [btnImage setBackgroundImage:image forState:UIControlStateNormal];
                     }
                     failure:^(NSError *error) {
                         NSLog(@"Error Download image %@", [error localizedDescription]);
                     }];
    [btnImage setFrame:CGRectMake(xPos, yPos, thumbWidth, thumbHeight)];
    [btnImage setTag:counter];
    [btnImage addTarget:self action:@selector(showFullImage:) forControlEvents:UIControlEventTouchUpInside];
    [photoScroll addSubview:btnImage];
}

[photoScroll setContentSize:CGSizeMake(self.view.frame.size.width, (ceil(photosCount/photosInRow)*(thumbHeight+padding))+thumbHeight+64)];
[self.view addSubview:photoScroll];

此代码将生成如下布局

现在是问题的第二部分。如何显示全屏图像，具有收缩缩放功能，并向左/向右滑动以显示下一张图像。 这实际上很容易实现。我正在使用第三方图书馆

只需下载它，就可以很容易地创建像UI一样的照片库。下面是我在

showFullImage

函数中所做的操作

- (void)showFullImage:(UIButton*)sender{
    [self.browser setInitialPageIndex:sender.tag];
    UINavigationController *nc = [[UINavigationController alloc] initWithRootViewController:self.browser];
    nc.modalTransitionStyle = UIModalTransitionStyleCrossDissolve;
    [self presentViewController:nc animated:YES completion:nil];
}

- (NSUInteger)numberOfPhotosInPhotoBrowser:(MWPhotoBrowser *)photoBrowser {
    return self.photosArray.count;
}

- (MWPhoto *)photoBrowser:(MWPhotoBrowser *)photoBrowser photoAtIndex:(NSUInteger)index {
    if (index < self.photosArray.count) {
        DBPhotos *photo = (DBPhotos *) [self.photosArray objectAtIndex:index];
        return [MWPhoto photoWithURL:[NSURL URLWithString:photo.image]];
    }
    return nil;
}

-（无效）showFullImage:（UIButton*）发送方{
[self.browser setInitialPageIndex:sender.tag]；
UINavigationController*nc=[[UINavigationController alloc]initWithRootViewController:self.browser]；
nc.ModAltTransitionStyle=UIModAltTransitionStyleCrossDissolve；
[自呈现视图控制器：nc动画：是完成：无]；
}
-（NSInteger）numberOfPhotosInPhotoBrowser:（MWPhotoBrowser*）photoBrowser{
返回self.photosaray.count；
}
-（MWPhoto*）照片浏览器：（MWPhotoBrowser*）照片浏览器照片索引：（NSUInteger）索引{
if（索引

点击第三个图像将显示全屏，带有左/右箭头或左/右滑动功能。还具有收缩缩放和平移缩放的照片

希望这对你有帮助

---

谢谢你的详细回答，但我更感兴趣的是细节。例如，当选择相册中的图像时，它会很好地动画化为全屏图像，同时从方形图像逐渐变为原始纵横比。小（正方形）图像被裁剪，这样图片就不会被压缩在一起，并且它被插值，这样你就不会在图像中看到锯齿状的边缘。此图像平滑过渡为全屏图像。我将编辑我的问题，使之更具体

- (void)showFullImage:(UIButton*)sender{
    [self.browser setInitialPageIndex:sender.tag];
    UINavigationController *nc = [[UINavigationController alloc] initWithRootViewController:self.browser];
    nc.modalTransitionStyle = UIModalTransitionStyleCrossDissolve;
    [self presentViewController:nc animated:YES completion:nil];
}

- (NSUInteger)numberOfPhotosInPhotoBrowser:(MWPhotoBrowser *)photoBrowser {
    return self.photosArray.count;
}

- (MWPhoto *)photoBrowser:(MWPhotoBrowser *)photoBrowser photoAtIndex:(NSUInteger)index {
    if (index < self.photosArray.count) {
        DBPhotos *photo = (DBPhotos *) [self.photosArray objectAtIndex:index];
        return [MWPhoto photoWithURL:[NSURL URLWithString:photo.image]];
    }
    return nil;
}