用RxSwift仿写知乎日报
loglay
8年前
<p>用过无数的三方库,却仍旧写不好代码。以前总会有人问:你用过最好的三方库是什么?那个时候总是会犹豫半天,到底是哪一个呢?好像都还可以耶,直到后来遇到[ RxSwift ],哇,简直打开了新世界的大门。现在我会毫不犹豫推荐它,虽然学习曲线有点陡峭,但是一旦你习惯上它,必深陷于其中无法自拔。</p> <p><strong>初入RxSwift</strong></p> <p>在公司项目进入版本迭代的时期,总觉得应该学点什么,不然让拍在沙滩上怎么办?在学习swift3一段时间后,邂逅了响应式编程方式,看了一下相关文章,毫不犹豫跳入RxSwift的坑中,其中险些放弃,还好坚持下来了,现在也算入了个门。当然只看看理论知识点,光纸上谈兵是不行的,所以选择仿写知日报的方式来深化一下知识。</p> <p>- 如果你不熟悉RxSwift相关的知识,可以先看看官方文档 [ <a href="/misc/goto?guid=4958968587190330028" rel="nofollow,noindex">RxSwift</a> ]</p> <p>- 如果你不知道为什么要使用RxSwift,可以看看 [ <a href="/misc/goto?guid=4959671786291028853" rel="nofollow,noindex">why use rx?</a> ]</p> <p><strong>项目实战</strong></p> <p>整个项目持续的大概两周,遇到不少问题,毕竟不管对于Swift还是RxSwift来说,我大概都只是个新手。</p> <p><strong>网络请求 Moya + RxSwift</strong></p> <ul> <li> <p>[ API ]:项目的开始当然是看看有没有API呀,这里要感谢这位通过非正常手段获取API的同学,为我们总结了完整的[知乎日报-API-分析](https://github.com/izzyleung/ZhihuDailyPurify/wiki/知乎日报-API-分析),我也无私地奉献了star,略表感谢!</p> </li> <li> <p>[ Alamofire ]:Swift版的AFNetworking。</p> </li> <li> <p>[ Moya ]: 是 Artsy 团队的 Ash Furrow 主导开发的一个网络抽象层库。它在 Alamofire 基础上提供了一系列简单的抽象接口,让客户端代码不用去直接调用 Alamofire,也不用去关心 NSURLSession。同时提供了很多实用的功能,包括对RxSwift的良好扩展。</p> </li> <li> <p>[ HandyJSON ]:是一个用于Swift语言中的JSON序列化/反序列化库。与其他流行的Swift JSON库相比,HandyJSON的特点是,它支持纯swift类,使用也简单。它反序列化时(把JSON转换为Model)不要求Model从NSObject继承(因为它不是基于KVC机制),也不要求你为Model定义一个Mapping函数。只要你定义好Model类,声明它服从HandyJSON协议,HandyJSON就能自行以各个属性的属性名为Key,从JSON串中解析值。HandyJSON目前依赖于从Swift Runtime源码中推断的内存规则,任何变动我们将随时跟进。</p> </li> <li> <p>[ RxSwift ]: 响应式编程三方库。这里主要处理网络请求时的各种回调和异步线程。</p> </li> </ul> <p>最终实现效果:</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/83d8c6b32714b58d6aeb0373e1c95ddb.png"></p> <p>API枚举:</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/30db974c1fca069b94cb8836e26bc12b.png"></p> <p>由于Moya没有支持HandyJSON扩展,这里我自己实现了此扩展:</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/be90c94e24fc2c214b7d474e7ed7bbe9.png"></p> <p>只要Model遵循HandyJSON协议,就能很优雅的快速实现JSON->Model,包括嵌套解析:</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/6650a625d83eb93af78c023773134c2b.png"></p> <p>可以说,这是迄今为止我最满意的网络请求封装,以后都可以愉快处理请求啦????</p> <p><strong>数据呈现</strong></p> <p>数据请求处理好了,就该绑定视图显示出来了,这里就是RxSwift的拿手好戏了。下面我们先看最简单的展现:</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/1986914ded6ddfc2325dbe9931c1c018.png"></p> <p>这样简单的几行代码就完成网络请求数据展现以及用户响应一系列流程,什么代理,扩展都不用写了,减少了一半以上的代码,是不是看着就觉得爽炸了!我们再看看复杂一点的,分组tableview:</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/77aebe805b542da607e7f1b016bf2b4d.png"></p> <p>其实也很简单,就是需要绑定SectionModel,当然你也可以自定义SectionModel来分组展示,上面的代码都在项目筛选出来的,具体实现可以看文末项目链接。</p> <p><strong>项目难点</strong></p> <ul> <li> <p>菜单栏与主页面的切换</p> </li> </ul> <p style="text-align:center"><img src="https://simg.open-open.com/show/44b377487811250b14d2e0d02d000463.gif"></p> <p>由于导航栏一开始用的原生的(其实应该自定义,因为后面涉及到很多导航栏问题),所以左右平移的时候要把导航栏一起移动,所以遇到了一点问题,后来查找相关资料后解决了此问题:</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/b21baa734cdb114ebd789ada1c87dab7.png"></p> <p>菜单栏的显示和隐藏需要配合手势,研究官方知乎日报App后,发现存在轻扫和拖拽滑动两个手势,相对应UIPanGestureRecognizer和UISwipeGestureRecognizer,当把这两个视图分别加在视图上的时候,只会响应一个手势,后来设置UIGestureRecognizerDelegate后避免了这个问题:</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/533a867ba4f37b01907928a78e1de0c2.png"></p> <p>本以为就此解决了问题,但是实际操作起来,手机很难区分这个两个手势,经常会搞错,本来想拖拽滑动结果系统识别为了轻扫手势,体验效果很差,那怎么办呢?后来终于找到一种可行方案:**只在视图上添加UIPanGestureRecognizer,以手指操作时间来区分是轻扫还是拖拽滑动**</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/00114842b0ef0d4edbe0a30a9a0c6004.png"></p> <p>菜单栏与主页面的切换中还有一个不好处理的点,当选中菜单栏某个主题后,要推出一个主题日报列表,与首页不同属于一个UINavigationController,那怎么从一个UINavigationController到另一个UINavigationController呢?试了好几种方式来切换,始终达不到官方效果,忙碌了一天,最后灵光一现(也可能是我太蠢????)平常不是都用UITabBarController来切换UINavigationController?!真的好简单,隐藏掉tabbar就好,几句代码就完美解决了这个场景切换问题:</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/837baaf807713b51b0189f502080a24c.png"></p> <p>如果你有更好的切换方法请联系我,愿意请你喝咖啡。</p> <p>2. 文章的快速切换</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/5e926debc3299e35da582efa0c707c15.gif"></p> <p>文章详情是用UIWebView加载html数据来展现的,这里我自定义class DetailWebView: UIWebView,以便于两个文章详情的切换,用于显示文章详情的DetailViewController包含两个DetailWebView,一个webview用于展示当前页面,另一个previousWeb放在屏幕外准备随时切换文章,当发生切换文章时,动画呈现previousWeb,并在后续移除在屏幕外webview,把previousWeb作为新的webview,同时生成新的previousWeb</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/a33bec46374b48d95bb1f87f55eb8ec6.png"></p> <p>3.首页刷新</p> <p>Swift版的刷新控件三方还没找比较好的,一度打算自己封装一个,但是一直拖着,以后应该会写。</p> <p>知乎日报的刷新控件与一般放在tableview上不同,它应该是放在导航栏上面,配合tableview来实现刷新,这也是前面为什么说导航栏要自定义的原因之一,因为已经用了原生的导航栏,只好巧妙(偷懒)加在了view上,其实这个刷新就是一个画圆圈的过程。</p> <p><strong>注意事项</strong></p> <ul> <li> <p>项目中关于时间的处理用的是 [ SwiftDate ]</p> </li> <li> <p>.then 语法用的是 [ Then ],小而妙,很喜欢</p> </li> </ul> <p> </p> <p> </p>