iOS 自定义图片选择器 2 - UIScrollView缩放

【 写在前面：笔者按照Instagram的图片选取器写了个小Demo，
该系列文章为笔者实现Demo的步骤，若有不正确的地方还望指出来，共同学习。
地址：https://github.com/BigBigPo/RJPhotoPicker】

前一篇简单的介绍了PhotoKit的使用，图片资源我们已经拿到了，接下来就该写选择器了。我们先看看Instagram的图片选择器是什么样子——

Insshow.gif

可以看出，界面上分为两大块，“展示区”与“列表区”，两个区域具有联动属性。我们先看上方的展示区，这个区域最主要的功能是展示用户当前选中的图片，并且具有缩放，拖动改变图片填充方式等功能。

看到“缩放”，“拉伸”这些字眼时，笔者第一反应就想到了UIScrollView，其完全具备上述功能，在使用中也有需要注意的事项，下面我们就以UIScrollView来实现展示区的功能。

---

0.思考

要实现缩放功能很简单，Instagram的展示区还有很多细节：
1、 默认情况下，图片将会按比例填充整个展示区（类似.ScaleAspectFill的填充效果）
2、展示区默认中心定位在图片中央
3、图片的四周均具有弹簧效果。

最主要的是这三个特性，当然还有其他次要的效果，如线框、更改填充样式等等，这些都是锦上添花的功能，上述三个效果是其基本功能（展示，缩放）所必须具有的，权重也是最高的。

对于细节1，笔者一开始直接想到的是UIImageView的ContentMode，这个是UIImageView自身的展示方式，仅仅只是展示图片是没有问题的，但现在需要将其加入到ScrollView中还需要达到细节2，但有点多余。

为什么？

细节2的实现上，因为我们的展示区域的大小是固定的，所以需要将图片视图进行适配，需要获取图片视图的大小，再根据contentView的大小重设UIImageView的大小来进行适配，以此为依据来确定ScrollView的区域位置。若我们使用了UIImageView的ContentMode,我们还是要获取图片的大小。
这样看来，UIImageView的contentMode显得多余了，我们会重设UIImageView的尺寸，而根据需求来看，这个重设UIImageView的尺寸就包含了我们需要的“ .ScaleAspectFill”效果。

若被绕晕了没有关系，我们一步一步来，文章最后有Demo以供参考。

接下来

1.准备工作

新建一个项目，在场景中加入一个UIScrollView,并在该ScrollView中加入一个UIImageView，设置好约束（笔者用的XIB，代码也可以，后面统一以XIB来讲）。

因为我们要实时的重置展示区的约束，所以我们需要拿到UIImageView的“宽”、“高”、“左距”、“右距”。以方便后续操作。

views.png

如上图，界面十分简单，Next按钮只是Demo为了切换不同尺寸的图片。XIB中的效果如下：

viewsShow.png

2.缩放功能

单独的缩放功能十分简单，只需要设置好UIScrollView的缩放系数，以及在代理中返回需要缩放的视图即可。

    [_scrollView setDelegate:self];         //不要忘记添加代理
    [_scrollView setMinimumZoomScale:1];    //最小缩放系数
    [_scrollView setMaximumZoomScale:2];    //最大缩放系数

//该代理方法需要返回一个需要缩放的view，若返回nil，将没有任何效果。
//注：在TableView、UICollectionView中使用UIScrollView来完成缩放效果时，直接返回imageView可能不能达到效果，需要给imageView套一层View，在此代理中返回该view即可解决。
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {
    return _imageView;
}

单纯的缩放功能就实现了,但图片的大小，位置特别的奇怪，我们需要优化一下。顺便提一下，UIScrollView还提供了关于缩放更多代理，可以据此实现许多功能。

- (void)scrollViewWillBeginZooming:(UIScrollView *)scrollView withView:(UIView *)view;
- (void)scrollViewDidZoom:(UIScrollView *)scrollView;
- (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(CGFloat)scale

3.适配图片的大小与位置

首先要确定图片视图的大小，才能更好的确定展示区具体的位置。图片的大小适配，其实就是根据图片的大小按照填充的类型（铺满，填充），保持比例缩放至容器（UIScrollView）的大小。也就是一个计算尺寸的过程。

/**
 根据图片的大小来获得合适的容器大小
 */
- (CGSize)getImageVeiwSizeWithImage:(UIImage *)image {
    //获取scrollView的尺寸（在Demo中，我们把scrollView的长宽都设置成了屏宽，是相等的）
    CGFloat scrollViewSize = [UIScreen mainScreen].bounds.size.width;
    
    //注：下方的 +1 只是为了方便实现ScrollView的边界弹簧效果，并无其他用处
    CGFloat width = scrollViewSize + 1;
    CGFloat height = width / image.size.width * image.size.height;
    if (height < scrollViewSize) {
        height = scrollViewSize + 1;
        width = height / image.size.height * image.size.width;
    }
    return CGSizeMake(width, height);
}

图片的位置也就是UIScrollView的contentOffset,来实现。现在已经计算出了图片的展示尺寸，就可以知道图片的位置（UIScrollView的contentOffset）

/**
 根据图片视图大小来确定图片位置
 */
- (void)setScrollViewCenterWithImageSize:(CGSize)size {
    //获取scrollView的尺寸（在Demo中，我们把scrollView的长宽都设置成了屏宽，是相等的）
    CGFloat scrollViewSize = [UIScreen mainScreen].bounds.size.width;
    
    //获取图片中心以此为依据计算scrollView的contentOffset
    CGPoint imageCenter = CGPointMake(size.width / 2, size.height / 2);
    CGPoint point = CGPointMake(imageCenter.x - scrollViewSize / 2, imageCenter.y - scrollViewSize / 2);
    [_scrollView setContentOffset:point];
}

---

展示区的主要功能到此就全部实现了，UIScrollView来实现缩放是比较简单的，代码中我也举出了自己遇到的一个问题，以及解决办法：
在UIScrollView在另一个ScrollView中时，可能出现缩放无效的问题，例如，UITabelView 或 UICollectionVewi的Cell中。笔者的解决办法是在imageView外套一层View，这样可以解决问题，但还未知道其中的原理，也许是两个ScrollView嵌套的问题，或者是列表控件的内部机制？

本节的Demo：https://github.com/BigBigPo/UIScrollViewScaleDemo