iOS一句代码搞定下拉刷新和上拉加载更多

现在的iOS刷新控件层出不穷,但是想找到一个样式完全符合自己基本没有,所以利用空余时间自己实现了一个刷新的控件,通过一个demo来搞明白其中的原理。
先来个效果图
iOS一句代码搞定下拉刷新和上拉加载更多

大概说一下设计思路,在scrollView的顶部和底部分别添加headerView和footView。通过KVO来监听scrollView的contentOffset、contentSize、bounds这个三个属性,根据contentOffset的改变来显示headerView和footView,监听contentSize的目的是让footView一直保持在最底部,监听bounds的作用是刷新headerView和footView的frame。
headerView和footView呈现的内容则是通过refreshState这个状态的改变分别显示不同的内容。代码如下

    override var refreshState: RefreshState? {
        willSet {
            tipsLabel?.isHidden = false
            loadingView?.isHidden = true
            if newValue == .Ready  {
                tipsLabel?.text = "下拉刷新"
            }else if newValue == .WillRefresh  {
                tipsLabel?.text = "松开立即刷新"
            }else if newValue == .Refreshing {
                tipsLabel?.isHidden = true
                loadingView?.isHidden = false
            }else {
                tipsLabel?.text = "刷新完成"
            }
        }
    }

核心代码,通过KVO监听属性的改变

    /// KVO监听contentOffset的变化
    override func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?) {
        if keyPath == RefreshView.contentOffsetKeyPath {
            if canRefresh == true && self.scrollView!.isDragging == false {
                if self.refreshState == .WillRefresh {
                    //松手进入刷新状态
                    self.refreshState = .Refreshing
                    if self.refresh != nil {
                        self.refresh!()
                    }
                    UIView.animate(withDuration: 0.5) {
                        self.scrollView?.contentInset.top = self.frame.size.height
                    }
                }
            }
            
            if self.scrollView!.isDragging == true {
                if self.refreshState != .Refreshing && self.refreshState != .Refreshed {
                    //非刷新状态下拖拽scrollView
                    if self.scrollView!.contentOffset.y <= -(self.frame.size.height  + 5) {
                        self.refreshState = .WillRefresh
                        self.canRefresh = true
                    }else {
                        self.refreshState = .Ready
                        self.canRefresh = false
                    }
                }
                
            }
        }else if keyPath == RefreshView.boundsKeyPath {
            //scrollView的bound发生改变
            let newValue: CGRect = change?[NSKeyValueChangeKey.newKey] as? CGRect ?? .zero
            let oleValue: CGRect = change?[NSKeyValueChangeKey.oldKey] as? CGRect ?? .zero
            if newValue.size.width != oleValue.size.width {
                self.frame.size.width = newValue.size.width
            }
        }
    }

使用,一句代码搞定

  • 刷新操作
        self.tableView.refreshHeaderView {
            //这里进行刷新操作
        }
        //结束刷新,如果处于没有更多数据状态下将自动重置
        self.tableView.refreshHeaderView?.endRefresh()
  • 加载更多操作
        self.tableView.refreshFootView {
            //这里进行加载更多操作
        }
        //结束加载更多
        self.tableView.refreshFootView?.endRefresh()
        
        //如果服务器没有更多数据返回,可以使用这个方法
        self.tableView.refreshFootView?.noMoreData()

最后附上demo

上一篇:C++ 将filesystem::path转换为const BYTE*


下一篇:Vue初始化子组件的方法