iOS开源照片浏览器框架SGPhotoBrowser的设计与实现

简介

近日在制作一个开源加密相册时附带着设计了一个照片浏览器，在进一步优化后发布到了GitHub供大家使用，该框架虽然没有MWPhotoBrowser那么强大，但是使用起来更为方便，操作更符合常规相册习惯，自定义和修改源码也十分简单。
本文主要介绍这个照片浏览器框架的技术要点，如果要深入研究和使用，可以在下面的链接中下载源码。

如果你对这个框架有兴趣，可以点击这里前去GitHub下载源码，欢迎Star与指出不足。

效果图

缩略图预览，点击缩略图进入原图浏览，点击底部工具栏可以进入编辑模式。

批量导出与删除，通过底部工具栏操作。

查看原图，单击可以隐藏导航栏和工具栏，支持双击切换缩放状态、捏和手势以及左右滑动切图。

功能与特点

• block数据源
  照片浏览器的数据源是通过block回调的，通过实现相应的block并且提供数据模型即可完成图片显示。

• 内存优化
  高分辨率的图片在读入到内存后的内存占用是十分可观的，因此在点击缩略图进入原图浏览后，由于要左右滑动来查看其它图片的原图，因此至少加载三张原图（不考虑边缘情况），分别是当前查看的图片和与之相邻的图片，而其他图片则先加载缩略图，在滚动到那些图片时才去加载原图以及与之相邻的原图，并且替换远处的原图为缩略图。

• 滚动优化
  在滚动完全结束后才去加载原图并替换缩略图，以防止滚动时卡顿。

• 同时支持本地与网络图片
  通过URL的类型来判断图片是否来自网络，如果来自网络则异步下载并显示进度，同时进行缓存。

• 原图浏览时支持常见的手势
  原图浏览器时支持单击隐藏和显示导航栏和工具条，双击在适应屏幕和原始尺寸之间切换，捏和手势可以缩放图片，左右滑动可以切换图片。

• 支持批量导出与删除照片
  可以通过工具栏进入编辑模式来批量处理图片的导出与删除。

技术要点

概述

照片浏览器框架依赖了SDWebImage和MBProgressHUD，前者用于处理图片的异步下载与缓存，后者用于显示图片下载的进度。用于缩略图显示的是collectionView，查看原图时每一张图片都被均匀排列在scrollView上，每一张图片也被包裹了一个scrollView用于处理缩放。

block数据源

使用代理模式回调数据源会使得代码较为分散，因此本框架使用了block来回调，在SGPhotoBrowser中有四个数据源block，通过实现他们并且提供相应的数据即可完成图片显示，这四个block如下面代码所示。

@property (nonatomic, copy, readonly) SGPhotoBrowserDataSourceNumberBlock numberOfPhotosHandler;
@property (nonatomic, copy, readonly) SGPhotoBrowserDataSourcePhotoBlock photoAtIndexHandler;
@property (nonatomic, copy, readonly) SGPhotoBrowserReloadRequestBlock reloadHandler;
@property (nonatomic, copy, readonly) SGPhotoBrowserDeletePhotoAtIndexBlock deleteHandler;

每个照片通过一个SGPhotoModel数据模型类要描述，其中包含了photoURL与thumbURL，分别代表原图和缩略图的URL，通过URL是否是fileURL来决定是否要异步下载缓存。
block数据源在缩略图浏览时被collectionView的dataSource所调用，在原图浏览时被调用以获取特定位置的图片URL或进行删除照片后的数据刷新。

内存优化

在查看原图时，加载当前位置和与其相邻位置的原图，其他位置均加载缩略图，在滑动过程中，动态的切换原图的加载位置并将原来位置的原图替换为缩略图，以保证内存中最多有三张原图被加载以节省内存，具体实现代码如下。

// 点击index处的缩略图时调用，来显示原图
- (void)loadImageAtIndex:(NSInteger)index {
    // 通过browser的数据源方法获取模型数量
    NSInteger