专栏首页MapleYe【iOS】仿知乎日报,RxSwift-Part1-首页搭建

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

前言

之前的几篇博客算是入门篇,那么这篇就是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为白色
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的滚动

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属性

tableView.rx.contentOffset
            .filter { $0.y < 0 }
            .map { $0.y }
            .asDriver(onErrorJustReturn: 0)
            .drive(bannerView.offY)
            .addDisposableTo(disposeBag)

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)

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()
        }

这里,顺便说一下我的网络加载封装。使用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)
        }
    }

使用时,在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)
    }

使用了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
            }
        }
    }

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)

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

总结

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【iOS】只允许中英文数字输入,字符限制【整理】

    1、只允许用户输入中英文数字 2、最多只能输入6个中文 3、最多只能输入12个英文或数字 4、中英混排总长度不超过12(中文长度2,英文或数字长度1)

    MapleYe
  • 【iOS】今日头条的转场动画设置+手势控制

    最近公司有个需求,做一个今日头条的用户动态的进入和退出的动画效果,并且退场时,可以自己点击退出,也可以手势下滑退出。头条的效果如下:

    MapleYe
  • 【iOS】基于Realm数据库的记账软件--记账模块(二)

    从记账的需求出发,该界面需要用户输入以下账单信息: (1)账单金额 (2)账单类型 (3)相关账户 (4)账单产生的日期 (5)备注 那么,结合一下...

    MapleYe
  • 人群计数--Cross-scene Crowd Counting via Deep Convolutional Neural Networks

    Cross-scene Crowd Counting via Deep Convolutional Neural Networks CVPR2015 本文主...

    用户1148525
  • Kaggle Jigsaw文本分类比赛方案总结

    这个比赛是一个文本分类的比赛,这个比赛目标是在给定文本中判断是否为恶意评论即01分类。训练数据还给了其他多列特征,包括一些敏感词特征还有一些其他指标评价的得分特...

    致Great
  • Volley请求

    1. Volley简介 我们平时在开发Android应用的时候不可避免地都需要用到网络技术,而多数情况下应用程序都会使用HTTP协议来发送和接收网络数据。A...

    xiangzhihong
  • MJRefresh 源码阅读

    用户2215591
  • PyQt5--QCalendar

    py3study
  • supervisor源码解析

    上篇文章介绍了supervisor的使用, 今天介绍一下supervisor的源码。 supervisor是python写的。如果你不懂python,我也介绍一...

    若与
  • 在 PyQt4 中的菜单和工具栏¶

    http://www.cppblog.com/mirguest/archive/2012/02/05/164982.html

    bear_fish

扫码关注云+社区

领取腾讯云代金券