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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,743评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,296评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,285评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,485评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,581评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,821评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,960评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,719评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,186评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,516评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,650评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,329评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,936评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,757评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,991评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,370评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,527评论 2 349

推荐阅读更多精彩内容