打造开源第一 iOS 图片浏览器 (支持视频)

 iOS图片浏览器 (支持视频)

本文主要讲述 YBImageBrowser 的一些功能技术细节，代码架构思路，设计模式选择等，希望对组件原理感兴趣的朋友有所帮助，也可以作为如何高效构建图片浏览器的参考资料。

概览

• 一、组件的视图层次

• 二、面向协议的设计模式

• 三、迪米特设计原则

• 四、当多线程遇上复用机制

• 五、异步任务的重复请求

• 六、巧用观察者设计模式

• 七、屏幕旋转的处理

• 八、三方图片处理框架的选择

• 九、异步解压的思考

• 十、意外释放的危机处理

• 十一、何时将变量放入全局区

• 十二、巧用局部 Block

• 十三、手势交互动效的技术细节

• 十四：分页间距的优化

闲谈

图片浏览器在移动端信息流业务中有着重要的地位，它的功能设计和交互体验都在不断演化。知名 APP 里的图片浏览器往往能引领潮流，比如“微信”、“微博”、“今日头条”、“知乎”、“QQ”等，它们的实现有很多相似之处，也有些设计上的瑕疵，其中交互和功能做得比较好的是“微信”和“微博”。

这里不得不吐槽“掘金” iOS APP 蹩脚的图片浏览器了，稀土掘金作为一个新兴的技术分享平台在这一点上确实让人失望，挺久之前笔者还提过建议，但迭代了 n 次版本都未进行优化，交互体验极差，BUG 满天飞，让笔者有多次想要卸载的冲动。

话说回来，开源社区有不少的图片浏览器，不过不管是从功能上，还是代码质量上都不能让笔者满意，所以几个月前笔者自己做了一个，开源社区的反馈还行，收获了不少 star，不过也发现了一些问题，比如臃肿的代码设计难以维护，严重的耦合难以自定义和拓展。

所以，笔者花了挺多时间重做图片浏览器，从功能、技术细节、代码架构都做了大量改进和优化，尽可能保证代码质量、提高可维护性和拓展性。

YBImageBrowser 2.x 版本已更新，如果项目中的图片浏览器过于蹩脚，替换掉它吧。笔者会抽时间维护和升级，打造开源第一是追求也是激励。

一、组件的视图层次

考虑到屏幕旋转的适配，笔者使用 UIViewController 作为图片浏览器的主体类，同时也方便做自定义的转场效果。内容的载体是 UICollectionView ，可以避免手动实现复用机制，并且可以优雅的管理布局。UICollectionViewCell 作为主要显示内容的载体，组件实现了两个，一个支持图像，一个支持视频。

除此之外，组件有两个概念，一个是工具栏 (ToolBar) ，一个是弹出视图 (SheetView)。”TooBar” 视图层级是在内容载体 UICollectionView 之上的，组件中默认实现了一个显示页码的 “TooBar”；”SheetView” 是需要的时候添加到 UIViewController 上，它的层级可以理解为组件内部最高。至于它们如何架构和自定义后文会阐述。

二、面向协议的设计模式

显示内容的载体目前有图像和视频，笔者先是考虑过写一个 UICollectionViewCell 的基类，利用多态来做子类的自定义，然而这样会带来问题：一是若组件使用者想要拓展内容载体但却不便于继承这个基类；二是继承本身带来的问题，虽然子类之间不直接接触，但是它们有同一个父类，若想组件和这些子类之间不直接耦合，必然要频繁的对这个基类做更改，牵一发而动全身，并且对于方法重载来说，不好准确的限定是否必须重载，是否需要调用父类方法。

继承往往是灾难的开端，所以，多态的解决方案被淘汰。

换个思路来思考，组件主体对内容载体也就是 UICollectionViewCell 的关系应该是无耦合的，就像上面多态的思路，组件只关心这个基类，而不直接和子类交互。我们无非是想遵守依赖倒置原则，既然想到这个设计原则，很容易想到面向协议的设计模式。

所以，笔者在组件中创建了数个协议：

YBImageBrowserCellDataProtocol.hYBImageBrowserCellProtocol.hYBImageBrowserToolBarProtocol.hYBImageBrowserSheetViewProtocol.h

正如你所见，对于 “ToolBar” 和 “SheetView” 都有独自的协议。组件主体和这些视图都与协议耦合而不依赖对方，笔者可以优雅的移除或者添加视图元素，使用者也可以轻松的实现这些协议来自定义界面。

“我不关心你是不是鸭子，只要你会‘嘎嘎’叫并且有两只脚我把你当做鸭子”。

三、迪米特设计原则

在组件设计中，应该尽量遵循迪米特原则，在 OC 编程中会存在一个问题，属性和方法没有 protect，写在 .h 中的是公开的，写在 .m 中是私有的，所以对于某个对象来说，其子类和其它类的访问权限可以说是一样的。

解决这个问题的方案有几种，最简单的是将两个类的实现写在同一个文件，但是很多时候不希望这么做；笔者之前的版本中使用过objc_msgSend直接发送消息，也使用过 KVC 直接访问实例变量，虽然从效率的角度来看无伤大雅，使用 Runtime 甚至更快，但是代码却有些晦涩。

最终笔者选择了一种比较优雅的方式，使用独立文件的延展 (Extensi