如何写出一个丝滑的图片浏览器
k8a49kk1w7
8年前
<h2>缘起</h2> <p>那时，我想要一个这样的图片浏览器：</p> <ul> <li>从小图进入大图浏览时，使用转场动画</li> <li>可加载网络图片，且过渡自然，不阻塞操作</li> <li>可各种姿势玩弄图片，且过渡自然，不阻塞操作</li> <li>可以在往下拉时，给我缩小，背景变半透明，我要看见底下的东西</li> <li>总之就是语言无法描述的狂拽炫酷x炸天的效果...(那是啥效果...)</li> </ul> <p style="text-align:center"><img src="https://simg.open-open.com/show/616e8bc0a614206574b58250d4699bd1.png"></p> <p style="text-align:center">PhotoBrowser.png</p> <p>很遗憾，久寻无果，于是我决定自己造一个。</p> <h2>如何调起图片浏览器</h2> <p>由于我们打算使用转场动画，所以在容器的选择上，只能使用UIViewController，那就让我们的类继承它吧：</p> <pre> <code class="language-objectivec">public class PhotoBrowser: UIViewController</code></pre> <p>这样的话，有个方法是躲不开的，必须用它调起我们的图片浏览器：</p> <pre> <code class="language-objectivec">open func present(_ viewControllerToPresent: UIViewController, animated flag: Bool, completion: (() -> Swift.Void)? = nil)</code></pre> <p>写一个库，提供给别人用时，我们总希望对外接口设计得越简单明了越好，当然最好能做到傻瓜式操作。</p> <p>禀承这一原则，我们把 present 方法的调用，以及各种属性赋值都对外隐藏起来，让用户少操心。</p> <p>所以，提供个方法给用户 show 一下吧：</p> <pre> <code class="language-objectivec">public func show() { self.transitioningDelegate = self self.modalPresentationStyle = .custom presentingVC.present(self, animated: true, completion: nil) }</code></pre> <p>但是，想要在我们的 PhotoBrowser 类内部 present 出自己的实例，需要一个 ViewController 作为动作执行者，它就是上面 show 方法里面的 presentingVC 。</p> <p>考虑到这位执行者是不会变化的，只需要告诉我们一次，是谁，就可以了，所以这里可以设计成在 init 创建实例时，就进行绑定：</p> <pre> <code class="language-objectivec">public init(showByViewController presentingVC: UIViewController) { self.presentingVC = presentingVC }</code></pre> <h2>如何向图片浏览器传递数据</h2> <p>作为一个图片浏览器，它需要知道哪些关键信息？</p> <ul> <li>一共有多少张图片</li> <li>第n张图片它的缩略图，或者说占位图，是什么</li> <li>第n张图片它的大图，或者URL是什么</li> <li>打开图片浏览器时，显示哪一张图片</li> </ul> <p>我们大概有这么些办法，可以让图片浏览器拿到需要展示的图片信息：</p> <ul> <li>在调起浏览器之前，向浏览器正向传入它需要的所有数据</li> <li>预先设置回调block，或者代理，在浏览器需要用到某个数据时，回调block或者向代理反向取数据</li> </ul> <p>对于图片浏览器来说，并不需要保存一份从用户传过来的数据，而是希望在用到的时候再取，这里我们就为它设计代理协议吧。</p> <pre> <code class="language-objectivec">public protocol PhotoBrowserDelegate { /// 实现本方法以返回图片数量 func numberOfPhotos(in photoBrowser: PhotoBrowser) -> Int /// 实现本方法以返回默认图片，缩略图或占位图 func photoBrowser(_ photoBrowser: PhotoBrowser, thumbnailImageForIndex index: Int) -> UIImage /// 实现本方法以返回高质量图片。可选 func photoBrowser(_ photoBrowser: PhotoBrowser, highQualityImageForIndex index: Int) -> UIImage? /// 实现本方法以返回高质量图片的url。可选 func photoBrowser(_ photoBrowser: PhotoBrowser, highQualityUrlStringForIndex index: Int) -> URL? }</code></pre> <p>然后在 init 方法绑定代理对象，变成这样：</p> <pre> <code class="language-objectivec">public init(showByViewController presentingVC: UIViewController, delegate: PhotoBrowserDelegate) { self.presentingVC = presentingVC self.photoBrowserDelegate = delegate super.init(nibName: nil, bundle: nil) }</code></pre> <p>但是有一项关键信息例外，它就是"打开图片浏览器时，显示哪一张图片"。</p> <p>这一项数据与用户的 show 动作关联性更大，从用户的角度来说，适合在show的同时正向传递给图片浏览器。</p> <p>从图片浏览器来说，它内部也需要维护一个变量，用来记录当前正在显示哪一张图片，所以这一项数据适合让图片浏览器保存下来。</p> <p>我们把 show 方法改一下，接收一个参数，并保存在属性 currentIndex 中。</p> <pre> <code class="language-objectivec">/// 展示，传入图片序号，从0开始 public func show(index: Int) { currentIndex = index self.transitioningDelegate = self self.modalPresentationStyle = .custom self.modalPresentationCapturesStatusBarAppearance = true presentingVC.present(self, animated: true, completion: nil) }</code></pre> <h2>让用户傻瓜式操作！</h2> <p>现在我们调起图片浏览器的姿势是这样的：</p> <pre> <code class="language-objectivec">let browser = PhotoBrowser(showByViewController: self, , delegate: self) browser.show(index: index)</code></pre> <p>还需要写两行代码，不爽，弄成一行：</p> <pre> <code class="language-objectivec">/// 便利的展示方法，合并init和show两个步骤 public class func show(byViewController presentingVC: UIViewController, delegate: PhotoBrowserDelegate, index: Int) { let browser = PhotoBrowser(showByViewController: presentingVC, delegate: delegate) browser.show(index: index) }</code></pre> <p>现在，我们调起图片浏览器的姿势是这样的：</p> <pre> <code class="language-objectivec">PhotoBrowser.show(byViewController: self, delegate: self, index: indexPath.item)</code></pre> <h2>隐藏状态栏</h2> <p>图片浏览过程中并不需要状态栏StatusBar，应当隐藏。</p> <p>iOS7后，能控制状态栏的类有两个， UIApplication 和 UIViewController ，两者只能取其一，默认情况下，由各 UIViewController 独立控制自己的状态栏。</p> <p>于是，隐藏状态栏就有两种办法：</p> <ul> <li>重写UIViewController的 prefersStatusBarHidden 属性/方法，并返回 true 来隐藏状态栏</li> <li>在 info.plist 中取消 UIViewController 的控制权，即设置 View controller-based status bar appearance 为 NO ，然后再设置 UIApplication.shared.isStatusBarHidden = false</li> </ul> <p>作为一个框架，不应该设置全局属性，不应该操作UIApplication，而且从解耦角度来说就更不应该了。所以我们只负责自己Controller视图的状态栏：</p> <pre> <code class="language-objectivec">public override var prefersStatusBarHidden: Bool { return true }</code></pre> <h2>横向滑动布局</h2> <p>嗯，这是个横向的 TableView ，我们用 UICollectionView 来做吧。</p> <pre> <code class="language-objectivec">/// 容器 fileprivate let collectionView: UICollectionView override public func viewDidLoad() { super.viewDidLoad() collectionView.frame = view.bounds collectionView.backgroundColor = UIColor.clear collectionView.showsVerticalScrollIndicator = false collectionView.showsHorizontalScrollIndicator = false collectionView.dataSource = self collectionView.delegate = self collectionView.register(PhotoBrowserCell.self, forCellWithReuseIdentifier: NSStringFromClass(PhotoBrowserCell.self)) view.addSubview(collectionView) }</code></pre> <p>布局类继承自UICollectionViewFlowLayout，设置为横向滑动：</p> <pre> <code class="language-objectivec">/// 容器layout private let flowLayout: PhotoBrowserLayout public class PhotoBrowserLayout: UICollectionViewFlowLayout { override init() { super.init() scrollDirection = .horizontal } }</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/e6c357181247b59a294a99a1cf08fc00.gif"></p> <p style="text-align:center">CollectionView布局.gif</p> <h2>图间空隙与边缘吸附</h2> <p>注意左右两张图片之间是有空隙的，这是个难点。</p> <p>先让空隙数值可配置：</p> <pre> <code class="language-objectivec">public class PhotoBrowser: UIViewController { /// 左右两张图之间的间隙 public var photoSpacing: CGFloat = 30 }</code></pre> <p>现在考虑一个问题：图片是一页一页左右滑的，那么究竟要怎样实现一页？</p> <p>已经确定不变的，是每张图片的宽度必须占满屏幕，每页的宽度必须是屏宽+间隙</p> <p>就有这些可能性：</p> <p>每个CollectionViewCell的宽度是一个屏宽呢？还是屏宽+间隙？间隙是做为cell的一部分嵌进cell里呢？还是作为layout类的属性？</p> <p>考虑到手指滑动，离开屏幕后，需要让图片对齐边缘，即吸附，很自然就想到使用collectionView.isPagingEnabled = true。</p> <p>如果使用这个属性，意味着页宽x页数要刚刚好等于collectionView的contentSize.width，只有这样，collectionView.isPagingEnabled才能正常工作。</p> <ol> <li>假如给layout类设置spacing作为图间隙，则collectionView的contentSize.width值为图片数量x屏宽+(图片数量-1)x间隙，并非页宽的整倍数。</li> <li>假如把空隙嵌入cell里作为cell的一部分，则需要增大cell的宽度，使其超出屏宽，再控制图片视图小于cell宽。这种办法属于技巧性解决问题的办法，非大道也。因为让cell的职责超出了它的本分，尝试去处理它外部的事情，违反解耦，违反面向对象，导致cell内部增加许多本不属于它的奇怪复杂逻辑。</li> </ol> <p>所以希望使用collectionView.isPagingEnabled = true来实现边缘吸附效果的想法，被否决，我们来另寻办法。</p> <p>首先，让cell单纯地只做展示图片的行为，让cell的size满屏。两cell之间的空隙由layout控制，当然cell的size也由layout控制：</p> <pre> <code class="language-objectivec">override public func viewDidLoad() { super.viewDidLoad() flowLayout.minimumLineSpacing = photoSpacing flowLayout.itemSize = view.bounds.size }</code></pre> <p>UICollectionViewLayout有一个方法覆盖点，通过重写这个方法，可以重新指定scroll停止的位置，它就是：</p> <pre> <code class="language-objectivec">public func targetContentOffset(forProposedContentOffset proposedContentOffset: CGPoint, withScrollingVelocity velocity: CGPoint) -> CGPoint</code></pre> <p>苹果对它的说明，就是告诉我们可以用来实现边缘吸附的：</p> <p>If you want the scrolling behavior to snap to specific boundaries, you can override this method and use it to change the point at which to stop.</p> <p>这个方法接收一个CGPoint，返回一个CGPoint，接收的是若不做任何处理，就在那里停下来的Point，我们要在方法内做的就是返回一个让它在正确位置停下来的Point。</p> <pre> <code class="language-objectivec">public class PhotoBrowserLayout: UICollectionViewFlowLayout { /// 一页宽度，算上空隙 private lazy var pageWidth: CGFloat = { return self.itemSize.width + self.minimumLineSpacing }() /// 上次页码 private lazy var lastPage: CGFloat = { guard let offsetX = self.collectionView?.contentOffset.x else { return 0 } return round(offsetX / self.pageWidth) }() /// 最小页码 private let minPage: CGFloat = 0 /// 最大页码 private lazy var maxPage: CGFloat = { guard var contentWidth = self.collectionView?.contentSize.width else { return 0 } contentWidth += self.minimumLineSpacing return contentWidth / self.pageWidth - 1 }() /// 调整scroll停下来的位置 override public func targetContentOffset(forProposedContentOffset proposedContentOffset: CGPoint, withScrollingVelocity velocity: CGPoint) -> CGPoint { // 页码 var page = round(proposedContentOffset.x / pageWidth) // 处理轻微滑动 if velocity.x > 0.2 { page += 1 } else if velocity.x < -0.2 { page -= 1 } // 一次滑动不允许超过一页 if page > lastPage + 1 { page = lastPage + 1 } else if page < lastPage - 1 { page = lastPage - 1 } if page > maxPage { page = maxPage } else if page < minPage { page = minPage } lastPage = page return CGPoint(x: page * pageWidth, y: 0) } }</code></pre> <p>可以看到，在targetContentOffset方法里，为了实现pagingEnabled属性的效果，我们需要处理好几个细节：</p> <ul> <li>轻微滑动时，设定一个阈值，达到则翻页</li> <li>一次滑动时不允许超过一页</li> <li>因为有轻微滑动就翻页的设定，故可能在首尾两页出现超过最小最大页码的情况，此时要进行最后的边界检查</li> </ul> <p>另外，若不启用pagingEnabled，在手势滑动离开屏幕后，默认情况下collectionView会继续滑动很久才会停下来，这时我们需要给它设置一个减速速率，让它快速停下来：</p> <pre> <code class="language-objectivec">collectionView.decelerationRate = UIScrollViewDecelerationRateFast</code></pre> <p>结果我们手动实现了一个与打开pagingEnabled属性一模一样的效果。</p> <h2>大图浏览</h2> <p>负责展示图片的类，是UICollectionViewCell。</p> <p>为了方便让图片进行缩放，可以使用UIScrollView的能力zooming，我们把它作为imageView的容器。</p> <pre> <code class="language-objectivec">public class PhotoBrowserCell: UICollectionViewCell { /// 图像加载视图 public let imageView = UIImageView() /// 内嵌容器。本类不能继承UIScrollView。 /// 因为实测UIScrollView遵循了UIGestureRecognizerDelegate协议，而本类也需要遵循此协议， /// 若继承UIScrollView则会覆盖UIScrollView的协议实现，故只内嵌而不继承。 fileprivate let scrollView = UIScrollView() override init(frame: CGRect) { super.init(frame: frame) contentView.addSubview(scrollView) scrollView.delegate = self scrollView.maximumZoomScale = 2.0 scrollView.showsVerticalScrollIndicator = false scrollView.showsHorizontalScrollIndicator = false scrollView.addSubview(imageView) imageView.clipsToBounds = true } }</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/cc18efd80dd3007ef6e466ef6f64d0b6.gif"></p> <p style="text-align:center">大图浏览.gif</p> <p>什么时候进行cell布局？设置图片后就应该进行。</p> <p>为什么这么迫切要立即刷新呢？其中有一个原因是下面讲到的转场动画所需的，转场动画需要提前取到即将用于展示的cell。至于另外的原因，于情于理，数据确定后，UI跟着刷新也是没毛病的。</p> <pre> <code class="language-objectivec">public class PhotoBrowserCell: UICollectionViewCell { /// 取图片适屏size private var fitSize: CGSize { guard let image = imageView.image else { return CGSize.zero } let width = scrollView.bounds.width let scale = image.size.height / image.size.width return CGSize(width: width, height: scale * width) } /// 取图片适屏frame private var fitFrame: CGRect { let size = fitSize let y = (scrollView.bounds.height - size.height) > 0 ? (scrollView.bounds.height - size.height) * 0.5 : 0 return CGRect(x: 0, y: y, width: size.width, height: size.height) } /// 布局 private func doLayout() { scrollView.frame = contentView.bounds scrollView.setZoomScale(1.0, animated: false) imageView.frame = fitFrame progressView.center = CGPoint(x: contentView.bounds.midX, y: contentView.bounds.midY) } /// 设置图片。image为placeholder图片，url为网络图片 public func setImage(_ image: UIImage, url: URL?) { guard url != nil else { imageView.image = image doLayout() return } self.progressView.isHidden = false weak var weakSelf = self imageView.kf.setImage(with: url, placeholder: image, options: nil, progressBlock: { (receivedSize, totalSize) in // TODO }, completionHandler: { (image, error, cacheType, url) in weakSelf?.doLayout() }) self.doLayout() } }</code></pre> <p>现在我们让图片放大。</p> <p>设计支持两种缩放操作：</p> <ul> <li>捏合手势</li> <li>双击缩放</li> </ul> <p>捏合手势：</p> <p>CollectionView是UIScorllView的子类，UIScorllView天生支持pinch捏合手势，只需要实现它的代理方法即可：</p> <pre> <code class="language-objectivec">extension PhotoBrowserCell: UIScrollViewDelegate { public func viewForZooming(in scrollView: UIScrollView) -> UIView? { return imageView } public func scrollViewDidZoom(_ scrollView: UIScrollView) { imageView.center = centerOfContentSize } }</code></pre> <p>viewForZooming方法可以告诉ScrollView在发生zooming时，对哪个视图进行缩放；</p> <p>然后我们需要在scrollViewDidZoom的时候，重新把图片放在中间，这样调整可以让视觉更美观、体验更良好。</p> <p>双击缩放：</p> <p>有些用户更乐意单手操作手机，而捏合手势需要两根手指，很难一只手完成操作。虽然通过捏合可以控制缩放比率，但有时候用户要的仅仅是“把图片放大一些，看看细节”这样的需求，于是我们可以折衷一下，通过双击手势把图片固定放大到2倍size：</p> <pre> <code class="language-objectivec">public class PhotoBrowserCell: UICollectionViewCell { override init(frame: CGRect) { ... // 双击手势 let doubleTap = UITapGestureRecognizer(target: self, action: #selector(onDoubleTap)) doubleTap.numberOfTapsRequired = 2 imageView.addGestureRecognizer(doubleTap) } func onDoubleTap() { var scale = scrollView.maximumZoomScale if scrollView.zoomScale == scrollView.maximumZoomScale { scale = 1.0 } scrollView.setZoomScale(scale, animated: true) } }</code></pre> <h2>转场动画</h2> <p>为了呈现合理的打开/关闭图片浏览器效果，我们决定使用转场动画。</p> <p>这里使用modal转场，并且使用custom方式，方便灵活定制我们想要的效果。</p> <p>我们想要怎样的效果？</p> <ul> <li>打开图片浏览器时，要从小图逐渐放大进入大图浏览模式</li> <li>关闭图片浏览时，要从大图模式逐渐缩小回原来小图的位置</li> </ul> <p style="text-align:center"><img src="https://simg.open-open.com/show/bb3083ff5dfe6f306c2426d28bb1fe27.gif"></p> <p style="text-align:center">Transition-Animation.gif</p> <p>在转场过程中，我们要妥善处理好的细节包括：</p> <ul> <li>小图和大图在转场容器里的坐标位置</li> <li>小图和大图的暗中切换</li> <li>背景蒙板</li> </ul> <p>考虑到无论是presention转场还是dismissal转场，都是缩放式动画，所以我们可以只写一个动画类：</p> <pre> <code class="language-objectivec">public class ScaleAnimator: NSObject, UIViewControllerAnimatedTransitioning { /// 动画开始位置的视图 public var startView: UIView? /// 动画结束位置的视图 public var endView: UIView? /// 用于转场时的缩放视图 public var scaleView: UIView? /// 初始化 init(startView: UIView?, endView: UIView?, scaleView: UIView?) { self.startView = startView self.endView = endView self.scaleView = scaleView } }</code></pre> <p>我们设计它只管动画，同时适配presention和dismissal转场，所以不在类中取presentingView和presentedView，而是由外界调用者传进来，保持动画类功能单纯，只做最需要的事情。</p> <pre> <code class="language-objectivec">public func animateTransition(using transitionContext: UIViewControllerContextTransitioning) { // 判断是presentataion动画还是dismissal动画 guard let fromVC = transitionContext.viewController(forKey: .from), let toVC = transitionContext.viewController(forKey: .to) else { return } let presentation = (toVC.presentingViewController == fromVC) // dismissal转场，需要把presentedView隐藏，只显示scaleView if !presentation, let presentedView = transitionContext.view(forKey: .from) { presentedView.isHidden = true } // 取转场中介容器 let containerView = transitionContext.containerView // 求缩放视图的起始和结束frame guard let startView = self.startView, let endView = self.endView, let scaleView = self.scaleView else { return } guard let startFrame = startView.superview?.convert(startView.frame, to: containerView) else { print("无法获取startFrame") return } guard let endFrame = endView.superview?.convert(endView.frame, to: containerView) else { print("无法获取endFrame") return } scaleView.frame = startFrame containerView.addSubview(scaleView) UIView.animate(withDuration: transitionDuration(using: transitionContext), animations: { scaleView.frame = endFrame }) { _ in // presentation转场，需要把目标视图添加到视图栈 if presentation, let presentedView = transitionContext.view(forKey: .to) { containerView.addSubview(presentedView) } scaleView.removeFromSuperview() transitionContext.completeTransition(!transitionContext.transitionWasCancelled) } }</code></pre> <p>这里有个关键的方法，坐标转换方法：</p> <pre> <code class="language-objectivec">let startFrame = startView.superview?.convert(startView.frame, to: containerView) let endFrame = endView.superview?.convert(endView.frame, to: containerView)</code></pre> <p>在调用convert之前，需要确保fromView和toView处于同一个window视图栈内，坐标转换才能成功。</p> <p>这里把startView和endView的坐标统统转成了容器视图的坐标系坐标，只有在同一个坐标系内，缩放变换、动画执行才是正确无误的。</p> <p>现在可以为PhotoBrowser提供转场动画类了。</p> <p>注意这里有至关重要的细节需要处理，即对于转场过程中的startView、endView和scaleView如何取的问题。</p> <p>presention转场</p> <pre> <code class="language-objectivec">extension PhotoBrowser: UIViewControllerTransitioningDelegate { public func animationController(forPresented presented: UIViewController, presenting: UIViewController, source: UIViewController) -> UIViewControllerAnimatedTransitioning? { // 在本方法被调用时，endView和scaleView还未确定。需于viewDidLoad方法中给animator赋值endView let animator = ScaleAnimator(startView: relatedView, endView: nil, scaleView: nil) presentationAnimator = animator return animator } }</code></pre> <p>在presention转场时，startView毫无疑问就是缩略图，小图，即代码中的 relatedView ，这个视图需要图片浏览器通过代理向用户获取，即：</p> <pre> <code class="language-objectivec">public protocol PhotoBrowserDelegate { /// 实现本方法以返回默认图所在view，在转场动画完成后将会修改这个view的hidden属性 /// 比如你可返回ImageView，或整个Cell func photoBrowser(_ photoBrowser: PhotoBrowser, thumbnailViewForIndex index: Int) -> UIView } public class PhotoBrowser: UIViewController { /// 当前正在显示视图的前一个页面关联视图 fileprivate var relatedView: UIView { return photoBrowserDelegate.photoBrowser(self, thumbnailViewForIndex: currentIndex) } }</code></pre> <p>对于endView，是图片浏览器打开时的大图所在imageView，而这个imageView是某个collectionViewCell的内部子视图，显然按正常逻辑来说，转场动画发生时，collectionView还没完成它的视图渲染，此时是无法取到那一个需要显示的cell的。</p> <p>而对于scaleView，这是一个只在转场过程中创建，转场结束即销毁的视图，它应是一个ImageView，它的创建需要一张图片，这张图片即为缩放过程中呈现的图片，同时也是大图浏览打开完毕后应展示的图片，endView所用的那一张。所以scaleView也无法在此时创建。</p> <p>那么在什么时候可以取到浏览器打开时所展示的cell?</p> <p>实测可以发现，几个关键的生命周期方法有如下执行顺序：</p> <pre> <code class="language-objectivec">// 1. 取presentation转场动画 public func animationController(forPresented presented: UIViewController, presenting: UIViewController, source: UIViewController) -> UIViewControllerAnimatedTransitioning? // 2. 控制器的viewDidLoad public func viewDidLoad() // 3. 动画类的转场方法 public func animateTransition(using transitionContext: UIViewControllerContextTransitioning) // 4. 控制器的viewDidAppear public override func viewDidAppear(_ animated: Bool)</code></pre> <p>我们必须要在animateTransition方法执行之前，把endView和scaleView都取到，通过上面的顺序分析，我们可以在viewDidLoad方法里强制刷新collectionView完成这件事：</p> <pre> <code class="language-objectivec">override public func viewDidLoad() { ... // 立即加载collectionView let indexPath = IndexPath(item: currentIndex, section: 0) collectionView.reloadData() collectionView.scrollToItem(at: indexPath, at: .left, animated: false) collectionView.layoutIfNeeded() // 取当前应显示的cell，完善转场动画器的设置 if let cell = collectionView.cellForItem(at: indexPath) as? PhotoBrowserCell { presentationAnimator?.endView = cell.imageView let imageView = UIImageView(image: cell.imageView.image) imageView.contentMode = imageScaleMode imageView.clipsToBounds = true presentationAnimator?.scaleView = imageView } }</code></pre> <p>dismissal转场</p> <p>dismissal转场就方便得多了，在关闭图片浏览器时，转场动画的startView即为正在展示中的大图视图，endView即为外界的缩略图视图，scaleView也可以通过取大图图片来马上创建得到：</p> <pre> <code class="language-objectivec">extension PhotoBrowser: UIViewControllerTransitioningDelegate { public func animationController(forDismissed dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning? { guard let cell = collectionView.visibleCells.first as? PhotoBrowserCell else { return nil } let imageView = UIImageView(image: cell.imageView.image) imageView.contentMode = imageScaleMode imageView.clipsToBounds = true return ScaleAnimator(startView: cell.imageView, endView: relatedView, scaleView: imageView) } }</code></pre> <h2>转场动画协处理类</h2> <p>在iOS8以后，苹果为转场动画加入了新成员 UIPresentationController ，它随着转场动画出现而出现，随着转场动画消失而消失，可以进行动画以外的辅助性操作。</p> <p>回想我们动画是负责视图的缩放的，但是在这过程中还有一点没有解决，它就是背景蒙板。</p> <p>我们需要一个纯黑色视图来遮住原页面，且它应在转场过程中不断变更透明度alpha值。</p> <p>谁来做蒙板比较好呢？</p> <p>如果由图片浏览控制器的view来充当，假如改变viewController.view，那在其上的所有视图都会透明化，显然不合适。</p> <p>如果由图片浏览控制器创建并持有一个纯黑view，放入视图栈，这样确实可以实现效果。</p> <p>只是，并不优雅。为何这么说？如果要给蒙板指定一个归属者，它应该属于图片浏览控制器呢还是更应该属于转场动画呢？</p> <p>我们更希望浏览控制器只做图片浏览的事情，而蒙板的作用是隔离浏览器与原页面，已经超出图片浏览的职责，故不应该由PhotoBrowser来持有。</p> <p>从另外一个角度来想，因为有转场动画，才会有蒙板出现的必要性，故蒙板与转场动画的相性更高，它应属性转场动画的一部分。</p> <p>然而我们希望动画类保持单纯，只做缩放动画，蒙板这种动画副产品就与我们的动画协处理类非常之配，一拍即合。</p> <p>在iOS8下，通过实现UIViewControllerTransitioningDelegate协议，返回一个UIPresentationController，在转场动画过程中，UIPresentationController的 presentationTransitionWillBegin 方法和 dismissalTransitionWillBegin 方法将会被调用。</p> <p>顾名思义，这两个方法一个在presentation动画执行前调用，一个在dismissal动画执行前调用，我们在这两个方法里面可以通过transitionCoordinator方法取到与动画同步进行的block，就可以让蒙板的透明度变化与转场动画同步起来。</p> <pre> <code class="language-objectivec">public class PhotoBrowser: UIViewController { /// 转场协调器 fileprivate weak var animatorCoordinator: ScaleAnimatorCoordinator? } extension PhotoBrowser: UIViewControllerTransitioningDelegate { public func presentationController(forPresented presented: UIViewController, presenting: UIViewController?, source: UIViewController) -> UIPresentationController? { let coordinator = ScaleAnimatorCoordinator(presentedViewController: presented, presenting: presenting) coordinator.currentHiddenView = relatedView animatorCoordinator = coordinator return coordinator } } public class ScaleAnimatorCoordinator: UIPresentationController { /// 动画结束后需要隐藏的view public var currentHiddenView: UIView? /// 蒙板 public var maskView: UIView = { let view = UIView() view.backgroundColor = UIColor.black return view }() override public func presentationTransitionWillBegin() { super.presentationTransitionWillBegin() guard let containerView = self.containerView else { return } containerView.addSubview(maskView) maskView.frame = containerView.bounds maskView.alpha = 0 currentHiddenView?.isHidden = true presentedViewController.transitionCoordinator?.animate(alongsideTransition: { _ in self.maskView.alpha = 1 }, completion:nil) } override public func dismissalTransitionWillBegin() { super.dismissalTransitionWillBegin() currentHiddenView?.isHidden = true presentedViewController.transitionCoordinator?.animate(alongsideTransition: { _ in self.maskView.alpha = 0 }, completion: { _ in self.currentHiddenView?.isHidden = false }) } }</code></pre> <p>另外，协处理类还需要干一件事情，就是要在动画完成后，悄悄把原页面中的小图隐藏掉，至于为什么这样做，请看下节 Dismiss方式 。</p> <h2>Dismiss方式</h2> <p>关于怎样关闭图片浏览器，参考微信，有如下两种操作方式：</p> <ul> <li>单击图片就关闭</li> <li>按住图片往下拽，松手即关闭</li> </ul> <p style="text-align:center"><img src="https://simg.open-open.com/show/77a5ee3675a9204852a9675b9e561729.gif"></p> <p style="text-align:center">Dismissal.gif</p> <p>单击图片就关闭：</p> <p>“单击一下缩略图，放大进行浏览；单击一下大图，缩小回去原图”这是很自然的操作，我们来实现它：</p> <pre> <code class="language-objectivec">public class PhotoBrowserCell: UICollectionViewCell { override init(frame: CGRect) { ... // 单击手势 imageView.isUserInteractionEnabled = true let singleTap = UITapGestureRecognizer(target: self, action: #selector(onSingleTap)) imageView.addGestureRecognizer(singleTap) singleTap.require(toFail: doubleTap) func onSingleTap() { if let dlg = photoBrowserCellDelegate { dlg.photoBrowserCellDidSingleTap(self) } } } extension PhotoBrowser: PhotoBrowserCellDelegate { public func photoBrowserCellDidSingleTap(_ view: PhotoBrowserCell) { dismiss(animated: true, completion: nil) } }</code></pre> <p>这里的注意点是单击手势和双击手势会有冲突，此时我们需要设置一个相当于优先级的东西，优先响应双击手势：</p> <pre> <code class="language-objectivec">singleTap.require(toFail: doubleTap)</code></pre> <p>假如不写这一行，即便用户如何快速双击，都无法进入双击手势响应方法，因为单击手势会立即满足条件，立即执行。</p> <p>写了这一行后，单击手势会变得相对迟钝一些，在确认没有双击手势发生时，单击手势才会生效。</p> <p>还有一点细节要提的是，执行dismiss应该由controller类内部代码执行，所以不应该把controller传值给cell，让cell去调用controller的dismiss方法，这样做cell就越权了。</p> <p>所以这里我们通过代理，把单击事件传递到cell外面去，让controller自己进行dismiss。</p> <p>按住图片往下拽，松手即关闭：</p> <p>这是个很有意思的效果，下拽图片，让图片随着下拽程度渐渐缩小，同时背景黑色蒙板渐变透明，可以看到之前的缩略图界面，而且正在拖拽的图片位置是空的，一松手图片就归位，给人的感受就是我们确实把这张小图放大来看了。</p> <pre> <code class="language-objectivec">public class PhotoBrowserCell: UICollectionViewCell { /// 记录pan手势开始时imageView的位置 private var beganFrame = CGRect.zero /// 记录pan手势开始时，手势位置 private var beganTouch = CGPoint.zero override init(frame: CGRect) { // 拖动手势 let pan = UIPanGestureRecognizer(target: self, action: #selector(onPan(_:))) pan.delegate = self imageView.addGestureRecognizer(pan) } func onPan(_ pan: UIPanGestureRecognizer) { switch pan.state { case .began: beganFrame = imageView.frame beganTouch = pan.location(in: pan.view?.superview) case .changed: // 拖动偏移量 let translation = pan.translation(in: self) let currentTouch = pan.location(in: pan.view?.superview) // 由下拉的偏移值决定缩放比例，越往下偏移，缩得越小。scale值区间[0.3, 1.0] let scale = min(1.0, max(0.3, 1 - translation.y / bounds.height)) let theFitSize = fitSize let width = theFitSize.width * scale let height = theFitSize.height * scale // 计算x和y。保持手指在图片上的相对位置不变。 // 即如果手势开始时，手指在图片X轴三分之一处，那么在移动图片时，保持手指始终位于图片X轴的三分之一处 let xRate = (beganTouch.x - beganFrame.origin.x) / beganFrame.size.width let currentTouchDeltaX = xRate * width let x = currentTouch.x - currentTouchDeltaX let yRate = (beganTouch.y - beganFrame.origin.y) / beganFrame.size.height let currentTouchDeltaY = yRate * height let y = currentTouch.y - currentTouchDeltaY imageView.frame = CGRect(x: x, y: y, width: width, height: height) // 通知代理，发生了缩放。代理可依scale值改变背景蒙板alpha值 if let dlg = photoBrowserCellDelegate { dlg.photoBrowserCell(self, didPanScale: scale) } case .ended, .cancelled: if pan.velocity(in: self).y > 0 { onSingleTap() } else { endPan() } default: endPan() } } private func endPan() { if let dlg = photoBrowserCellDelegate { dlg.photoBrowserCell(self, didPanScale: 1.0) } // 如果图片当前显示的size小于原size，则重置为原size let size = fitSize let needResetSize = imageView.bounds.size.width < size.width || imageView.bounds.size.height < size.height UIView.animate(withDuration: 0.25) { self.imageView.center = self.centerOfContentSize if needResetSize { self.imageView.bounds.size = size } } } }</code></pre> <p>控制缩放比例：</p> <pre> <code class="language-objectivec">// 由下拉的偏移值决定缩放比例，越往下偏移，缩得越小。scale值区间[0.3, 1.0] let scale = min(1.0, max(0.3, 1 - translation.y / bounds.height))</code></pre> <p>当往下拽的时候，是线性同时缩小宽度和高度，但是，有一个极限值，不允许缩小到原来的0.3倍以下。至于为什么是0.3，这是N多次实践测试后的结果，这个数值可以有比较良好的视觉体验...</p> <p>跟随手势移动</p> <p>当手指按住图片往下拖时，如果不改变图片大小，可以非常简单直接让图片下移translation.y的偏移量。但我们的情况略有麻烦，在改变图片位置的同时，也改变着图片的大小，这样会导致手指在拖动时，图片会缩着缩着跑出了手指的触摸区。</p> <p>我们得完善这个细节，一轮计算，算出相对的位移量，让图片不会跑偏，永远处于手指之下：</p> <pre> <code class="language-objectivec">// 计算x和y。保持手指在图片上的相对位置不变。 // 即如果手势开始时，手指在图片X轴三分之一处，那么在移动图片时，保持手指始终位于图片X轴的三分之一处 let xRate = (beganTouch.x - beganFrame.origin.x) / beganFrame.size.width let currentTouchDeltaX = xRate * width let x = currentTouch.x - currentTouchDeltaX let yRate = (beganTouch.y - beganFrame.origin.y) / beganFrame.size.height let currentTouchDeltaY = yRate * height let y = currentTouch.y - currentTouchDeltaY imageView.frame = CGRect(x: x, y: y, width: width, height: height)</code></pre> <p>dismissal的发生与取消：</p> <p>当松开手时，pan手势是带有速度向量属性的，我们定义的发生dismiss的条件是”用户往下拽的过程中松手“，而我们也允许用户有后悔的机会，给他一个能取消的操作，就是重新往上拽回去时，可以取消dismiss：</p> <pre> <code class="language-objectivec">case .ended, .cancelled: if pan.velocity(in: self).y > 0 { // dismiss onSingleTap() } else { // 取消dismiss endPan() }</code></pre> <p>背景蒙板：</p> <p>另外，在图片缩放的过程中，背景蒙板也应该随着缩放比例而变化，我们把比例值通过代理传递到外界去，让控制器使用：</p> <pre> <code class="language-objectivec">// 通知代理，发生了缩放。代理可依scale值改变背景蒙板alpha值 if let dlg = photoBrowserCellDelegate { dlg.photoBrowserCell(self, didPanScale: scale) } extension PhotoBrowser: PhotoBrowserCellDelegate { public func photoBrowserCell(_ view: PhotoBrowserCell, didPanScale scale: CGFloat) { // 实测用scale的平方，效果比线性好些 animatorCoordinator?.maskView.alpha = scale * scale } }</code></pre> <p>隐藏/显示关联的缩略图：</p> <p>还有一个细节要处理，当蒙板渐渐变得透明时，就看到底下的原页面了，这时原页面中有一个小图视图应该要去掉/隐藏，这个小图应当对应于我们正在浏览的那个大图。</p> <p>对于隐藏小图的处理，在上节中的转场动画协处理类持有并控制着当前浏览大图所关联的小图。</p> <p>至于为什么这么费力地让协处理类控制关联小图，而不是图片浏览控制器，还是那个道理，各司其职，让浏览器尽量只做浏览图片的工作，况且小图的隐藏/显示与转场动画的相性更合。</p> <p>在打开图片浏览器时，所关联的小图就是用户进入浏览器时所点的那一张，然后在浏览过程中，随着collectionView左右滑动，关联小图就应该相应地立即更新：</p> <pre> <code class="language-objectivec">public class ScaleAnimatorCoordinator: UIPresentationController { /// 更新动画结束后需要隐藏的view public func updateCurrentHiddenView(_ view: UIView) { currentHiddenView?.isHidden = false currentHiddenView = view view.isHidden = true } } public class PhotoBrowser: UIViewController { /// 当前显示的图片序号，从0开始 fileprivate var currentIndex = 0 { didSet { animatorCoordinator?.updateCurrentHiddenView(relatedView) if isShowPageControl { pageControl.currentPage = currentIndex } } } /// 当前正在显示视图的前一个页面关联视图 fileprivate var relatedView: UIView { return photoBrowserDelegate.photoBrowser(self, thumbnailViewForIndex: currentIndex) } } extension PhotoBrowser: UICollectionViewDelegate { /// 减速完成后，计算当前页 public func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) { let offsetX = scrollView.contentOffset.x let width = scrollView.bounds.width + photoSpacing currentIndex = Int(offsetX / width) } }</code></pre> <p>PhotoBrowser维护着一个变量currentIndex，而relatedView即为所关联的小图，当currentIndex变化时，协处理类应立即同步新的relatedView为隐藏，旧的relatedView恢复显示，保持状态完整性。</p> <h2>加载网络图片</h2> <p>现在我们的图片浏览器还剩下最后一个关键能力：支持加载网络图片。</p> <p>这里使用著名的Swift网络图片加载框架 Kingfisher ，也是本库唯一依赖框架。</p> <pre> <code class="language-objectivec">public class PhotoBrowserCell: UICollectionViewCell { /// 设置图片。image为placeholder图片，url为网络图片 public func setImage(_ image: UIImage, url: URL?) { guard url != nil else { imageView.image = image doLayout() return } self.progressView.isHidden = false weak var weakSelf = self imageView.kf.setImage(with: url, placeholder: image, options: nil, progressBlock: { (receivedSize, totalSize) in if totalSize > 0 { weakSelf?.progressView.progress = CGFloat(receivedSize) / CGFloat(totalSize) } }, completionHandler: { (image, error, cacheType, url) in weakSelf?.progressView.isHidden = true weakSelf?.doLayout() }) self.doLayout() } }</code></pre> <p>在加载过程中，我们需要一个友好的加载进度指示，即progressView，写一个：</p> <pre> <code class="language-objectivec">public class PhotoBrowserProgressView: UIView { /// 进度 public var progress: CGFloat = 0 { didSet { fanshapedLayer.path = makeProgressPath(progress).cgPath } } /// 外边界 private var circleLayer: CAShapeLayer! /// 扇形区 private var fanshapedLayer: CAShapeLayer! private func setupUI() { backgroundColor = UIColor.clear let strokeColor = UIColor(white: 1, alpha: 0.8).cgColor circleLayer = CAShapeLayer() circleLayer.strokeColor = strokeColor circleLayer.fillColor = UIColor.clear.cgColor circleLayer.path = makeCirclePath().cgPath layer.addSublayer(circleLayer) fanshapedLayer = CAShapeLayer() fanshapedLayer.fillColor = strokeColor layer.addSublayer(fanshapedLayer) } ... }</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/adab309e676a5450333606905a4c31f5.gif"></p> <p style="text-align:center">加载图络图片.gif</p> <h2>其它</h2> <p>PageControl</p> <p>默认开启了页码指示器pageControl，在PhotoBrowser完全渲染出现于屏幕时，pageControl才会出现，并正确指示当前页。</p> <pre> <code class="language-objectivec">public override func viewDidLoad() { ... if isShowPageControl { pageControl.sizeToFit() view.addSubview(pageControl) } } public override func viewDidAppear(_ animated: Bool) { if isShowPageControl { pageControl.center = CGPoint(x: view.bounds.midX, y: view.bounds.maxY - 20) } }</code></pre> <p>之所以让它在这个时机出现，是为了不影响转场动画的视觉效果。</p> <p>如果不需要pageControl，可以设置public属性 isShowPageControl ：</p> <pre> <code class="language-objectivec">browser.isShowPageControl = false</code></pre> <h2>CocoaPods</h2> <p>库已上传CocoaPods，现可直接导入：</p> <pre> <code class="language-objectivec">pod 'JXPhotoBrowser'</code></pre> <h2> </h2> <p> </p> <p>来自：http://www.jianshu.com/p/eacb5ec75542</p> <p> </p>