RxSwift实现下拉和上拉的刷新

6f742fc36fafa406a10567e5e08d47fb.jpg

最近在研究RxSwift，希望从中收获一些有用的东西，在后期的编程中能进行更好的构架和编码。

这篇文章使用RxSwift和MJRefresh相结合来实现简单下拉和上拉的刷新。
为了利用更少的代码量展示更多的东西，我使用了RxDataSources，一个基于RxSwift的第三方库。RxDataSources是一个对tableview，collectionview中的datasource进行封装的库，使datasource能够进行和RxSwift一样的响应式编程，与RxSwift能够完美的结合。

不多说了，直接上代码：
首先，我使用RxDataSources实现了一个简单的列表：

import UIKit
import RxSwift
import RxCocoa
import RxDataSources

class NewsViewModel: BaseViewModel, UITableViewDelegate {

    /** 释放资源属性 */
    let disposeBag = DisposeBag()
    /** 资源类属性 */
    let dataSource = RxTableViewSectionedReloadDataSource<SectionModel<String,NewsModel>>()
    /** 新闻数据 */
    var news = [NewsModel]()
    var tableView: UITableView!

    //MARK: - 配置基础设置

    func prepare(tableView: UITableView) {
        self.tableView = tableView
        //设置tableView的delegate
        tableView.rx_setDelegate(self).addDisposableTo(disposeBag)

        dataSource.configureCell = {dataSource,tableView,indexPath,new in
            let cell = tableView.dequeueReusableCellWithIdentifier("NewsCell", forIndexPath: indexPath) as! NewsCell
            cell.config(new.dec, date: new.date)
            return cell
        }

        //创建数据
        for _ in 0..<9 {
            let new = NewsModel(pic: "", dec: "LOL测试服：狼人皮肤调整 酒桶被动增强", date: "2016-07-01")
            news.append(new)
        }
        let sections = [
            SectionModel(model: "", items: news)
        ]
        //订阅被观察者
        let items = Observable.just(sections)
        items.bindTo(tableView.rx_itemsWithDataSource(dataSource)).addDisposableTo(disposeBag)
    }

    //MARK: - UITableViewDelegate

    func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
        return 94
    }
}

效果图：

rxswiftrefresh1.gif

接下来，我们将使用MJRefresh进行下拉和上拉的刷新，因为考虑后期的维护，我将MJRefresh进行了近一步的封装，代码如下：

import UIKit
import MJRefresh

//MARK; - 自定义下拉刷新控件
class CustomRefreshHeader: MJRefreshNormalHeader {

    override func prepare() {
        super.prepare()
        self.stateLabel?.font = UIFont.systemFontOfSize(14.0)
        self.stateLabel?.textColor = color_999999
        self.lastUpdatedTimeLabel.font = UIFont.systemFontOfSize(14.0)
        self.lastUpdatedTimeLabel?.textColor = color_999999
    }
}

//MARK; - 自定义上拉刷新控件
class CustomRefreshFooter: MJRefreshAutoNormalFooter {

    override func prepare() {
        super.prepare()
        self.setTitle("正在获取数据中...", forState: MJRefreshState.Refreshing)
        self.setTitle("加载更多", forState: MJRefreshState.Idle)
        self.setTitle("没有更多", forState: MJRefreshState.NoMoreData)
        self.stateLabel?.font = UIFont.systemFontOfSize(14.0)
        self.stateLabel?.textColor = color_999999
    }

    //MARK: - 隐藏footer
    func hideFooter() {
        self.stateLabel?.hidden = true
    }

    //MARK: - 显示footer
    func showFooter() {
        self.stateLabel?.hidden = false
    }

    override func placeSubviews() {
        super.placeSubviews()
        let loadingView = self.subviews[1] as! UIActivityIndicatorView
        //圈圈
        var arrowCenterX = self.mj_w * 0.5
        if !self.refreshingTitleHidden {
            arrowCenterX -= 80
        }
        let arrowCenterY = self.mj_h * 0.5
        loadingView.center = CGPoint(x: arrowCenterX, y: arrowCenterY)
    }
}

在RxSwiftRefreshDemo中我们能找到RefreshManager这个类，也就是我对MJRefresh近一步封装的类。

接着将MJRefresh添加到tableview上，代码如下：

class BaseTableView: UIView {

    var tableView: UITableView!
    var header: CustomRefreshHeader! //下拉刷新视图
    var footer: CustomRefreshFooter! //上拉刷新视图
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        self.placeSubViews()
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    //MARK: - 放置子视图

    private func placeSubViews() {
        tableView = UITableView()
        tableView.separatorStyle = .None
        tableView.backgroundColor = color_Clear
        tableView.tableFooterView = UIView()
        self.addSubview(tableView)
        tableView.mm_CenterEqual(self).mm_SizeEqual(self)
        //注册默认cell信息
        tableView.registerClass(BaseCell.self, forCellReuseIdentifier: "BaseCell")
        
        header = CustomRefreshHeader()
        tableView.mj_header = header
        
        footer = CustomRefreshFooter()
        tableView.mj_footer = footer
    }
}

考虑到这里是view层，我并没有设置header和footer的Action。接下来我在NewsViewModel进行MJRefresh的设置。代码如下：

class NewsViewModel: BaseViewModel, UITableViewDelegate {
    
    /** 释放资源属性 */
    let disposeBag = DisposeBag()
    /** 资源类属性 */
    let dataSource = RxTableViewSectionedReloadDataSource<SectionModel<String,NewsModel>>()
    /** 新闻数据 */
    var news = [NewsModel]()
    var tableView: UITableView!

    //MARK: - 配置基础设置

    func prepare(tableView: UITableView) {
        self.tableView = tableView
        //设置tableView的delegate
        tableView.rx_setDelegate(self).addDisposableTo(disposeBag)
        tableView.mj_header.setRefreshingTarget(self, refreshingAction: #selector(refreshPageOneData))
        tableView.mj_footer.setRefreshingTarget(self, refreshingAction: #selector(refreshNextPageData))
        
        dataSource.configureCell = {dataSource,tableView,indexPath,new in
            let cell = tableView.dequeueReusableCellWithIdentifier("NewsCell", forIndexPath: indexPath) as! NewsCell
            cell.config(new.dec, date: new.date)
            return cell
        }
    }
    
    //MARK: - UITableViewDelegate

    func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
        return 94
    }
    
    //MARK: - 刷新第一页数据

    func refreshPageOneData() {
        self.news.removeAll()
        for _ in 0..<9 {
            let new = NewsModel(pic: "", dec: "LOL测试服：狼人皮肤调整 酒桶被动增强", date: "2016-07-01")
            news.append(new)
        }
        let sections = [
            SectionModel(model: "", items: news)
        ]
        let items = Observable.just(sections)
        items.bindTo(tableView.rx_itemsWithDataSource(dataSource)).addDisposableTo(disposeBag)
        tableView.mj_header.endRefreshing()
    }
    
    //MARK: - 刷新下一页数据
    
    func refreshNextPageData() {
        for _ in 0..<9 {
            let new = NewsModel(pic: "", dec: "LPL老将Clearlove退役 信任“七号”上线", date: "2016-07-02")
            news.append(new)
        }
        let sections = [
            SectionModel(model: "", items: news)
        ]
        let items = Observable.just(sections)
        tableView.mj_footer.endRefreshing()
        items.bindTo(tableView.rx_itemsWithDataSource(dataSource)).addDisposableTo(disposeBag)
    }
}

但是在上拉到下一页的时候出现了奔溃，提示错误：ssertion failed: This is a feature to warn you that there is already a delegate (or data source) set somewhere previously. The action you are trying to perform will clear that delegate (data source) and that means that some of your features that depend on that delegate (data source) being set will likely stop working.
意思是我们在下拉的时候设置了datasource的代理，不能在对tableview进行设置，如果要这样操作，需将原来的datasource设置为nil。所以我在refreshPageOneData()和refreshNextPageData()中加入了tableView.dataSource = nil。

效果图如下：

rxswiftrefresh2.gif

demo地址：RxSwiftRefreshDemo
此文章仅供参考。