- 在做列表的下拉刷新的时候,系统自带的UIRefreshControl功能不能满足需求:示例如下
系统自带UIRefreshControl.gif
- 所以自己研究了一下自定义刷新控件,当然GitHub上面有更好用的,我只是抛砖引玉,欢迎讨论
正题
- 我的需求是这样的:
normal.png
pullDown.png
refresh.png
- 状态枚举
正常->下拉->刷新->刷新结束->正常
enum controlType: String {
case normal = "正常状态"
case pullingDown = "下拉刷新"
case refreshing = "正在刷新"
}
布局
UIActivityIndicatorView只有进行动画的时候才会显示出来,所以可以和箭头重叠布局
使用系统自带的layout进行布局,SnapKit虽然好用,但是使用的时候还要导入,所以pass.这里以箭头控件举例:
messageLabel.translatesAutoresizingMaskIntoConstraints = false
这个方法,官方文档说明如下
When you elect to position the view using auto layout by adding your own constraints, you must set this property to NO
addConstraint(NSLayoutConstraint(item: messageLabel, attribute: .centerX, relatedBy: .equal, toItem: self, attribute: .centerX, multiplier: 1, constant: 0))
addConstraint(NSLayoutConstraint(item: messageLabel, attribute: .centerY, relatedBy: .equal, toItem: self, attribute: .centerY, multiplier: 1, constant: 0))
获得refreshControl的superView,添加观察者.
判断控件的superView是否是UIScrollView类,如果不是的话,即使添加上了也不会实现刷新方法.
override func willMove(toSuperview newSuperview: UIView?) {
//筛选superView,需要添加到scrollView上面
guard let view = newSuperview as? UIScrollView else {
return
}
scrollView = view
//KVO监听父view的contentOffset的属性的变化
/*
NSKeyValueObservingOptionNew：提供更改前的值
NSKeyValueObservingOptionOld：提供更改后的值
NSKeyValueObservingOptionInitial：观察最初的值（在注册观察服务时会调用一次触发方法）
NSKeyValueObservingOptionPrior：分别在值修改前后触发方法（即一次修改有两次触发）
*/
scrollView?.addObserver(self, forKeyPath: "contentOffset", options: .new, context: nil)
}
Tip:这里也对KVO的option这个枚举做了解释
实现KVO方法
- 通过判断superView的contentOffset来确定控件的状态,为控件添加controlType属性,并在KVO监听方法中修改对应的状态
//比较contentOffset.y和临界值MaxY
let contentOffsetMaxY = -(scrollView!.contentInset.top + CONTROLHEIGHT)
let contenOffsetY = scrollView!.contentOffset.y
- 如果处于用户拖拽状态,只会显示正常和下拉两种状态,并且防止赋值频繁调用,增加了判断当前状态的逻辑:
- 如果在正常状态下,超过临界值,controlType为下拉;
- 如果在下拉状态下,超过临界值,controlType为正常.
if contenOffsetY >= contentOffsetMaxY && controlType == .pullingDown {
controlType = .normal
} else if contenOffsetY < contentOffsetMaxY && controlType == .normal {
controlType = .pullingDown
}
- 用户在下拉状态松开手,进入刷新状态
if controlType == .pullingDown {
controlType = .refreshing
}
在controlType的didSet方法中实现修改对应的文字/执行/停止动画/发送action供其他类监听等逻辑
- 根据枚举获得对应的值
messageLabel.text = controlType.rawValue
- 刷新状态下更改为正常状态,让控件从刷新展示状态回到原位
if oldValue == .refreshing {
UIView.animate(withDuration: 0.25, animations: {
self.scrollView?.contentInset.top -= CONTROLHEIGHT
self.indicatorView.stopAnimating()
}, completion: { (_) in
self.arrowImageView.isHidden = false
})
}
- 下拉旋转箭头方向
UIView.animate(withDuration: 0.25, animations: {
self.arrowImageView.transform = CGAffineTransform(rotationAngle: CGFloat(-3 * M_PI))
})
- 刷新状态展示动画,发送消息让外界监听
UIView.animate(withDuration: 0.25, animations: {
self.scrollView?.contentInset.top += CONTROLHEIGHT
self.indicatorView.startAnimating()
self.arrowImageView.isHidden = true
}, completion: { (_) in
self.sendActions(for: .valueChanged)
})
最后,附上完成图
下拉刷新控件.gif
�GitHub下载地址:https://github.com/Corgi14/RefreshControl
