【iOS】仿知乎日报,RxSwift-Part1-首页搭建
2017年10月21日 09:42:42
阅读数:738
前言
之前的几篇博客算是入门篇,那么这篇就是RxSwift的实战篇。由于对RxSwift的认识还不够深刻,所以项目中没有使用MVVM模型,以及编程思想也还没转变过来。该项目是参考https://github.com/kLike/ZhiHu-RxSwift实现的,最大的实现区别就是,我用的是纯代码实现,还有对网络请求的封装。此外,原项目中存在大量强解包,很容易crash。因此,我是在原来基础上,做了一些优化,虽然在转模型上没有那么优雅,但是比原来的安全。最后,还是非常感谢该作者源码的贡献~
框架介绍
框架 | 说明 |
---|---|
Moya | 对Alamofire的封装 |
Moya/RxSwift | 针对RxSwift的Moya扩展 |
Kingfisher | 喵神的网络图片加载库 |
HandyJSON | 阿里巴巴出的Json转模型库 |
RxSwift | 这次主角 |
RxCocoa | 这次主角 |
RxDataSources | 对原生的UITableviewDataSource的Rx包装 |
SwiftDate | 处理Date的库 |
SnapKit | Mansory的swift版 |
SlideMenuControllerSwift | 侧栏显示 |
整体架构搭建
SlideMenuControllerSwift作为根控制器,侧栏为left VC,tabbarVC为center VC。然后tabbarVC添加两个控制器,一个为首页,一个为其他话题,然后隐藏tabbar,通过侧栏点击切换。如下图所示:
首页搭建
1、导航栏的设置
先来看看效果图:
刚开始导航栏的颜色是透明的,随着tableView向上滚动时,导航栏主键显示颜色。
设置代码如下:
- 获取导航栏的背景图,用于滚动时修改颜色和透明图
- 设置barTintColor为蓝色
- 设置barTintColor为白色
barImg = (navigationController?.navigationBar.subviews.first)!
barImg.alpha = 0
navigationItem.title = "今日要闻"
navigationController?.navigationBar.tintColor = UIColor.white
navigationController?.navigationBar.titleTextAttributes = [NSAttributedStringKey.foregroundColor: UIColor.white]
navigationController?.navigationBar.shadowImage = UIImage()
navigationController?.navigationBar.barTintColor = UIColor.rgb(63, 141, 208)
navigationController?.navigationBar.isTranslucent = false
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
样式设置完后,开始监听tableview的滚动
tableView.rx
.contentOffset
.map { $0.y }
.subscribe(onNext: { y in
self.barImg.alpha = y / 200
})
.addDisposableTo(disposeBag)
- 1
- 2
- 3
- 4
- 5
- 6
- 7
2、轮播图
2.1、轮播图的实现原理
首先头部的轮播图是使用UICollectView和pageControl实现的,只要对数组的首尾做处理,即可实现无线轮播的效果。
例如,图片有1,2,3三张图,但是实际上,模型是有3,1,2,3,1五张图片。那么只要显示第一张或最后一张时,马上修改collectView的contentOffset即可瞒天过海,具体实现参考项目代码吧~
2.2、向下拖拽时,图片会放大
其实也是监听tableView的滚动,改变轮播图中图片的高度即可。
1、监听滚动,将offsetY绑定给轮播图的Variable属性
tableView.rx.contentOffset
.filter { $0.y < 0 }
.map { $0.y }
.asDriver(onErrorJustReturn: 0)
.drive(bannerView.offY)
.addDisposableTo(disposeBag)
- 1
- 2
- 3
- 4
- 5
- 6
2、监听Variable属性的变化,修改图片的高度和y坐标
offY
.asObservable()
.subscribe(onNext: {
offY in
self.collectionView.visibleCells.forEach({ (cell) in
let myCell = cell as! BannerCell
myCell.imgView.frame.origin.y = offY
myCell.imgView.frame.size.height = 200 - offY
})
}).addDisposableTo(dispose)
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
3、自动加载更多
我在tableView的willDisplay方法中,监听section的变化,刷新条件是:当滚动到最后一个section的第一个元素时,加载更多数据
func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
// 滚动到最后一个section的第一个元素时,加载更多数据
if indexPath.section == modelArr.value.count - 1 && indexPath.row == 0 {
loadMoreData()
}
- 1
- 2
- 3
- 4
- 5
这里,顺便说一下我的网络加载封装。使用Moya,可以优雅的封装Alamofire,而Moya/Rxswift可以将返回的结果转为Observable属性,进行监听。那么针对上拉刷新,我是这样封装的,在我的MPApiService服务层中,定义了如下方法:
func loadMoreHomeNewsList(date: String) -> Observable<MPStoryListModel> {
return provider.request(.getMoreHomeList(date))
.flatMapLatest { (reponse) -> Observable<MPStoryListModel> in
guard let dic = try? reponse.mapJSON() as? NSDictionary else {
return Observable.error(MPError.parseJsonError)
}
guard let list = MPStoryListModel.deserialize(from: dic) else {
return Observable.error(MPError.parseJsonError)
}
return Observable.just(list)
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
使用时,在HomeVC是这样调用的
fileprivate func loadMoreData() {
MPApiService.shareAPI.loadMoreHomeNewsList(date: newsDate)
.asDriver(onErrorJustReturn: MPStoryListModel())
.drive(onNext: { (model) in
if let stories = model.stories, let date = model.date {
self.modelArr.value.append(SectionModel(model: date, items: stories))
self.newsDate = date
}
})
.addDisposableTo(disposeBag)
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
使用了Driver,之前也提过Driver是转为UI层设计的,所有的操作都会在主线程操作。如果使用subscribe监听的话,需要设置在哪个线程操作。是不是代码有点繁琐?其实我也这么觉得,初入RxSwift,不打算封装太多层,怕把自己绕进去了,所以就先这样写了~
4、设置导航栏的titile日期
效果说明:随着列表的滚动,sectionHeader的日期会显示在导航栏上,滚动到最新日期时,导航栏又显示回今日要闻。
同样地,需要在tableView的willDisplay方法做监听,监听方法如下:
1、获得当前列表显示的最小section
func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
// 获得当前列表显示的最小section
DispatchQueue.global().async {
if let value = (tableView.indexPathsForVisibleRows?.reduce(Int.max) { (result, ind) -> Int in return min(result, ind.section) }) {
self.titleNum.value = value
}
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
2、对titleNum做监听
titleNum.asDriver()
.distinctUntilChanged()
.drive(onNext: { num in
if num == 0 {
self.navigationItem.title = "今日要闻"
}else {
let date = DateInRegion.init(string: self.dataSource[num].model, format: DateFormat.custom("yyyyMMdd"))!
self.navigationItem.title = "\(date.month)月\(date.day)日 \(date.weekday.toWeekday())"
}
})
.addDisposableTo(disposeBag)
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
为了防止多次响应,调用distinctUntilChanged,正如字面的意思,就是数值不一样时才响应。
总结
这一篇就只介绍首页吧,基本上涵盖了所有首页的要点了,另一篇点击详情页可阅。其他的,可以看项目代码,源码地址:https://github.com/maple1994/RxZhiHuDaily