图片库和Facebook等动画 [英] Image gallery and animations like Facebook

问题描述

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

I'm trying to make an image gallery with some nice animations and transitions, much like the new Facebook app provides. I've been searching for tutorials but it seems difficult to find something, or maybe I'm just searching for the wrong things.

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

I'm more interested in steps towards making this myself, than libraries that provide this functionality, since it would be a very good learning experience, and libraries don't tend to have enough customisability.

我特别感兴趣的元素是：

The elements I'm specifically interested in are:

• 显示一个uicollectionview所有图像，裁剪为正方形，居中和缩放（抗锯齿）很好。请注意，图像不会挤压在一起使其成为正方形。


• 无缝动画到全屏视图，从裁剪后的图像到具有漂亮黑色背景的原始尺寸。动画流畅，并提供反弹效果。


• 能够在全屏模式下浏览图像，允许在缩放图像中进行缩放缩放和平移，也非常像照片应用。为此，有几个库可用，但它们都为您提供顶部和底部的标准条，这不符合我的设计;我希望全屏视图更加干净和可定制。

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

Any steps for these elements would be much appreciated!

推荐答案

我自己现在正在我的应用程序中使用此功能一天。我不能使用 UICollectionView ，因为它仅在> = iOS6中可用。我手动创建了一个网格布局，实际上很容易实现。

I myself is making this feature in my app now a days. I cannot use UICollectionView, as it is only available in >=iOS6. I have created a grid layout manually, and actually it is very easy to implement.

在.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;

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

You can change above values according to your need. Then populate with images and creating grid layout dynamically like this:

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和事件处理程序到显示全屏图像，在这一行：

You would see that i am using UIButton instead of UIImage, this is for purpose so that if user taps the image, i could add get and event handler to Show full screen image, at this line:

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

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

This code will make an layout like this.

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

Now second part of your question. How to show full screen image, with pinch zoom functionality and swipe left/right to display next previous images. This is actually very easy to implement. I am using 3rd party library MWPhotoBrowser

只需下载它就可以很容易地制作像UI这样的照片库。以下是我在 showFullImage 函数中所做的事情。

Just download it and it is very easy to make Photo Library like UI. Here is what i am doing in showFullImage function.

- (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;
}

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

Tapping on third image will show that in full screen, with left/right arrow or swipe left/right functionality. Also with pinch zoom, and panning zoomed photo.

希望这可以帮助你。

这篇关于图片库和Facebook等动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！