ImageView模仿系统相册缩放

2018-06-10

系统相册缩放效果

Google遍中英文网络大抵就两种方案

借助ScrollView,调整ContentSize
使用Pinch手势进行Transform运算达到缩放效果

方案1 更加简洁易用，可以参考GitHub仓库代码GOBScaleImageView

核心代码

func resizeContent() {
    let heightGap = max((self.frame.size.height - self.contentSize.height)/2, 0)
    let widthGap = max((self.frame.size.width - self.contentSize.width)/2, 0)
    UIView.animate(withDuration: 0.1) { [weak self] in
        self?.contentInset = UIEdgeInsets(top: heightGap, left: widthGap, bottom: heightGap, right: widthGap)
    }
}

方案1核心思路

使用ScrollView作为Container
通过代理在Zoom的生命周期中resizeContent()
通过resizeContent()保证ScrollView的contentSize始终居中并且等于ImageView大小
调整的方式是通过设置ScrollView的contentInset

参考文章

国内采用方案1的Blog，但是大多数都没考虑到图片如果大于屏幕和小于屏幕的情况，不能完全模拟系统相册

国外提出了方案1的方案，但是也都缺少细节的描述

关于如果在图片所小时调整Center的方案，大多数采用了设置center属性，而没有使用ContentInset

使用方案2的参考代码, 计算十分复杂需要一定的数学分析

TimOliver/UIScrollView+ZoomToPoint.m