Swift-自定义下拉刷新控件(KVO监听)

• 在做列表的下拉刷新的时候,系统自带的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