【iOS】仿知乎日报，RxSwift-Part1-首页搭建

2020-03-30 17:03:04 浏览数 (1)

前言

之前的几篇博客算是入门篇，那么这篇就是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、导航栏的设置

先来看看效果图：

首页导航栏效果演示.gif

刚开始导航栏的颜色是透明的，随着tableView向上滚动时，导航栏主键显示颜色。

设置代码如下：

  • 获取导航栏的背景图，用于滚动时修改颜色和透明图
  • 设置barTintColor为蓝色
  • 设置barTintColor为白色
代码语言：javascript复制
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

样式设置完后，开始监听tableview的滚动

代码语言：javascript复制
tableView.rx
        .contentOffset
            .map { $0.y }
            .subscribe(onNext: { y in
                self.barImg.alpha = y / 200
            })
        .addDisposableTo(disposeBag)

2、轮播图

2.1、轮播图的实现原理

首先头部的轮播图是使用UICollectView和pageControl实现的，只要对数组的首尾做处理，即可实现无线轮播的效果。

例如，图片有1，2，3三张图，但是实际上，模型是有3，1，2，3，1五张图片。那么只要显示第一张或最后一张时，马上修改collectView的contentOffset即可瞒天过海，具体实现参考项目代码吧~

2.2、向下拖拽时，图片会放大

其实也是监听tableView的滚动，改变轮播图中图片的高度即可。

1、监听滚动，将offsetY绑定给轮播图的Variable属性

代码语言：javascript复制
tableView.rx.contentOffset
            .filter { $0.y < 0 }
            .map { $0.y }
            .asDriver(onErrorJustReturn: 0)
            .drive(bannerView.offY)
            .addDisposableTo(disposeBag)

2、监听Variable属性的变化，修改图片的高度和y坐标

代码语言：javascript复制
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)

3、自动加载更多

我在tableView的willDisplay方法中，监听section的变化，刷新条件是：当滚动到最后一个section的第一个元素时，加载更多数据

代码语言：javascript复制
 func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
        // 滚动到最后一个section的第一个元素时，加载更多数据
        if indexPath.section == modelArr.value.count - 1 && indexPath.row == 0 {
            loadMoreData()
        }

这里，顺便说一下我的网络加载封装。使用Moya，可以优雅的封装Alamofire，而Moya/Rxswift可以将返回的结果转为Observable属性，进行监听。那么针对上拉刷新，我是这样封装的，在我的MPApiService服务层中，定义了如下方法：

代码语言：javascript复制
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)
        }
    }

使用时，在HomeVC是这样调用的

代码语言：javascript复制
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)
    }

使用了Driver，之前也提过Driver是转为UI层设计的，所有的操作都会在主线程操作。如果使用subscribe监听的话，需要设置在哪个线程操作。是不是代码有点繁琐？其实我也这么觉得，初入RxSwift，不打算封装太多层，怕把自己绕进去了，所以就先这样写了~

4、设置导航栏的titile日期

效果说明：随着列表的滚动，sectionHeader的日期会显示在导航栏上，滚动到最新日期时，导航栏又显示回今日要闻。

同样地，需要在tableView的willDisplay方法做监听，监听方法如下：

1、获得当前列表显示的最小section

代码语言：javascript复制
       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
            }
        }
    }

2、对titleNum做监听

代码语言：javascript复制
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)

为了防止多次响应，调用distinctUntilChanged，正如字面的意思，就是数值不一样时才响应。

总结

这一篇就只介绍首页吧，基本上涵盖了所有首页的要点了，另一篇点击详情页可阅。其他的，可以看项目代码，源码地址：https://github.com/maple1994/RxZhiHuDaily

android swift ios

0 人点赞