IOS中实现图片点击全屏预览

发布时间：2023-05-14 10:17:15

在iOS开发中，经常需要在应用程序中显示图片，而对于用户来说，希望能够点击图片进行全屏预览，然后再进行操作，这篇文章介绍一下在iOS中实现图片点击全屏预览的方法。

一、使用UIImageView+WebCache

UIImageView+WebCache是一个很常见的第三方库，可以用来根据URL异步加载网络图片。通过这个库，我们可以轻松实现图片的全屏预览。

首先，需要引入UIImageView+WebCache库，并在需要显示图片的地方添加如下代码：

#import <SDWebImage/UIImageView+WebCache.h>

UIImageView *imageView = [[UIImageView alloc] init];
[imageView sd_setImageWithURL:[NSURL URLWithString:urlString]];

以上代码将图片从URL异步加载，并赋值给imageView。

接下来，我们需要创建一个UITapGestureRecognizer手势，当手势被识别时，进入一个全屏预览模式。在手势被识别时，我们需要将imageView添加到一个全屏的UIView上并居中显示，同时将背景设置为黑色。代码如下：

- (void)imageViewTapped:(UITapGestureRecognizer *)sender {
    UIView *backgroundView = [[UIView alloc] initWithFrame:[UIScreen mainScreen].bounds];
    backgroundView.backgroundColor = [UIColor blackColor];
    backgroundView.alpha = 0.0;

    UIImageView *imageView = (UIImageView *) sender.view;

    UIImageView *imageViewCopy = [[UIImageView alloc] initWithFrame:[backgroundView bounds]];
    imageViewCopy.contentMode = UIViewContentModeScaleAspectFit;
    imageViewCopy.image = imageView.image;
    imageViewCopy.userInteractionEnabled = YES;
    [imageViewCopy addGestureRecognizer:[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(closeImage:)]];

    [backgroundView addSubview:imageViewCopy];
    [[UIApplication sharedApplication].keyWindow addSubview:backgroundView];

    [UIView animateWithDuration:.5 animations:^{
        imageViewCopy.frame = [self centerFrameFromImage:imageView.image];
        backgroundView.alpha = 1.0;
    }];
}

在以上代码中，我们首先创建了一个UIView，该UIView将会包裹我们的UIImageView，在这里我们将其背景设置为黑色并将alpha设置为0.0来达到透明效果。接下来，我们创建了一个UIImageView的拷贝imageViewCopy，并将其缩放到屏幕的中央。最后，我们将imageViewCopy添加到backgroundView中，然后将backgroundView添加到UIApplication的keyWindow中。在动画中，我们将imageViewCopy从当前位置缩放到屏幕中央，并将backgroundView的alpha值设为1.0，这样就完成了图片的全屏预览。

最后，为了关闭全屏预览，我们需要添加一个手势识别器来监测imageViewCopy是否被点击，如果被点击就关闭全屏预览。代码如下：

- (void)closeImage:(UITapGestureRecognizer *)sender {
    UIView *backgroundView = sender.view.superview;
    [UIView animateWithDuration:.5 animations:^{
        sender.view.frame = [self centerFrameFromImage:((UIImageView *)sender.view).image];
        backgroundView.alpha = 0.0;
    } completion:^(BOOL finished) {
        [backgroundView removeFromSuperview];
    }];
}

以上代码将会使UIImageView的拷贝imageViewCopy从屏幕中心缩放回当前位置，并将backgroundView从视图中移除，这样就关闭了全屏预览。

二、使用UICollectionView

在某些情况下，可能需要在应用程序中显示多张图片，并且需要支持图片的全屏预览。为了实现这个需求，我们可能需要使用UICollectionView来展示这些图片。

首先，我们需要创建一个UICollectionView来展示图片，该UICollectionView的cell将会包含一个UIImageView，代码如下：

UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
layout.minimumInteritemSpacing = 0.f;
layout.minimumLineSpacing = 4.f;
layout.itemSize = CGSizeMake((ScreenWidth-4)/3.0f, (ScreenWidth-4)/3.0f);

UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:layout];
collectionView.backgroundColor = [UIColor clearColor];
collectionView.showsVerticalScrollIndicator = NO;
collectionView.showsHorizontalScrollIndicator = NO;
[collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"UICollectionViewCellReuseIdentifier"];

以上代码将会创建一个UICollectionViewFlowLayout布局，并将其itemSize设置为屏幕宽度减去两个间隔，然后创建一个UICollectionView。

接下来，我们需要实现UICollectionViewDataSource和UICollectionViewDelegate协议方法，准备数据源，然后在UICollectionViewDelegate中添加点击手势，显示全屏预览功能。

#pragma mark - UICollectionViewDataSource

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return self.imageURLs.count;
}

- (__kindof UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"UICollectionViewCellReuseIdentifier" forIndexPath:indexPath];
    UIImageView *imageView = [[UIImageView alloc] initWithFrame:cell.contentView.bounds];
    imageView.contentMode = UIViewContentModeScaleAspectFill;
    imageView.clipsToBounds = YES;
    [imageView sd_setImageWithURL:[NSURL URLWithString:self.imageURLs[indexPath.row]]];
    [cell.contentView addSubview:imageView];
    return cell;
}

#pragma mark - UICollectionViewDelegate

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
    UICollectionViewCell *cell = [collectionView cellForItemAtIndexPath:indexPath];
    UIImageView *imageView = cell.contentView.subviews.firstObject;

    UIView *backgroundView = [[UIView alloc] initWithFrame:[UIScreen mainScreen].bounds];
    backgroundView.backgroundColor = [UIColor blackColor];
    backgroundView.alpha = 0.0;

    UIImageView *imageViewCopy = [[UIImageView alloc] initWithFrame:[backgroundView bounds]];
    imageViewCopy.contentMode = UIViewContentModeScaleAspectFit;
    imageViewCopy.image = imageView.image;
    imageViewCopy.userInteractionEnabled = YES;
    [imageViewCopy addGestureRecognizer:[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(closeImage:)]];

    [backgroundView addSubview:imageViewCopy];
    [[UIApplication sharedApplication].keyWindow addSubview:backgroundView];

    [UIView animateWithDuration:.5 animations:^{
        imageViewCopy.frame = [self centerFrameFromImage:imageView.image];
        backgroundView.alpha = 1.0;
    }];
}

- (BOOL)collectionView:(UICollectionView *)collectionView shouldSelectItemAtIndexPath:(NSIndexPath *)indexPath {
    return YES;
}

以上代码中，我们实现了UICollectionViewDataSource和UICollectionViewDelegate中的方法，其中UICollectionViewDataSource协议中实现了numberOfItemsInSection和cellForItemAtIndexPath方法，分别返回cell的数量和UICollectionViewCell对象。其中，我们在UIImageView中异步加载URL的图片。在UICollectionViewDelegate协议中实现了didSelectItemAtIndexPath方法，使用UIImageView的拷贝imageViewCopy实现图片的全屏预览。

最后，我们同样需要为imageViewCopy添加一个手势检测，关闭图片的全屏预览功能。

总结

在iOS开发中实现图片全屏预览比较简单，分别使用UIImageView+WebCache和UICollectionView来实现。其中，UIImageView+WebCache适合单个图片的加载和全屏预览；而使用UICollectionView可以适用于多个图片的加载和全屏预览。在实际应用中，可以根据具体需求来选择实现方法。