Question

我正在尝试使用一些不错的动画和过渡来创建一个图像库，就像新的Facebook应用程序提供的那样。我一直在寻找教程，但似乎很难找到一些东西，或者我只是在寻找错误的东西。

我对自己制作这个版本的步骤比对提供此功能的库更感兴趣，因为这将是一个非常好的学习体验，并且库不具有足够的可定制性。

我特别感兴趣的元素是：

显示所有图像的uicollectionview，裁剪为正方形，居中并按比例缩放（消除锯齿）。请注意，图像不会挤压在一起使其成为正方形。
无缝动画到全屏视图，从裁剪后的图像到具有漂亮黑色背景的原始尺寸。动画流畅，并提供“反弹”效果。
能够以全屏模式浏览图像，允许在缩放图像中进行缩放缩放和平移，也非常像照片应用。为此，有几个库可用，但它们都为您提供顶部和底部的标准条，这不符合我的设计;我希望全屏视图更加干净和可定制。

非常感谢这些元素的任何步骤！

Answer 1

我自己现在正在我的应用程序中使用此功能一天。我无法使用UICollectionView，因为它仅在＆gt; = 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];

你会看到我正在使用UIButton而不是UIImage，这是为了目的，这样如果用户点击图像，我可以添加get和事件处理程序来显示全屏图像，在此行：

[btnImage addTarget:self action:@selector(showFullImage:) forControlEvents:UIControlEventTouchUpInside];

此代码将生成这样的布局。

enter image description here

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

只需下载它就可以轻松制作像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;
}

点击第三张图片将显示全屏，左/右箭头或向左/向右滑动功能。还可以使用捏合缩放和平移缩放照片。

希望这会对你有所帮助。

enter image description here

图片库和Facebook等动画

1 个答案: