现在的iOS刷新控件层出不穷,但是想找到一个样式完全符合自己基本没有,所以利用空余时间自己实现了一个刷新的控件,通过一个demo来搞明白其中的原理。
先来个效果图
大概说一下设计思路,在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