0

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

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

我特别感兴趣的元素是：

  • 显示所有图像的 uicollectionview，裁剪为正方形，很好地居中和缩放（抗锯齿）。请注意，图像不会被挤压在一起以使其成为正方形。
  • 无缝动画到全屏视图，从裁剪的图像到带有漂亮黑色背景的原始尺寸。动画很流畅，并提供“反弹”效果。
  • 能够以全屏浏览图像，允许缩放图像中的缩放和平移，也很像照片应用程序。为此，有几个库可用，但它们都为您提供顶部和底部的标准栏，这并不适合我的设计；我希望全屏视图更加干净和可定制。

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

4

1 回答 1

1

我自己现在正在我的应用程序中制作这个功能。我不能使用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];

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

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

此代码将制作这样的布局。

在此处输入图像描述

现在是你问题的第二部分。如何显示全屏图像，具有捏缩放功能和向左/向右滑动以显示下一个以前的图像。这实际上很容易实现。我正在使用 3rd 方库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;
}

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

希望这对您有所帮助。

在此处输入图像描述

于 2013-05-28T04:17:25.200 回答