相信大家有很多人在做项目的时候都在使用MJRefresh 控件来实现下拉刷新的功能;
MJRefresh经过不断的重构与更新迭代,现在不管是功能上还是代码结构上都是相当不错的,都是很值我们去学习的.

下面就是MJRefresh开源框架中中主要的一些类文件

MJRefresh主要的类文件
MJRefresh 的使用相信都难不倒大家

今天我主要想和大家分享一下MJRefresh的想法,因为我觉得这才是最重要的,献丑了,有理解的不对和不深入的地方,请大家多多点评哈!


试想,如果没有MJRefresh开源框架,公司让你来写这样一个框架?
  • 你应该怎么写?
  • 应该从哪几个方面考虑?
  • 应该怎么下手?
  • 应该注意一些什么?

下面我分了六个步骤给大家说一下

  • 第 1 步: 主要说了一下大体思路和注意事项
  • 第 2 步:为什么使用UIScrollView ?
  • 第 3 步:如何给UIScrollView增加新的属性header ?
  • 第 4 步:Header类里主要写一些什么 ?
  • 第 5 步:如何利用KVO的方式来监听偏移量的变化(设置刷新状态)?
  • 第 6 步:实例化Header类的对象 去给 UIScrollView的属性header赋值 ?

step1: 

如果想给UITableView 和UICollectionView 增加下拉刷新 上提加载的功能

其实不要想的太复杂,其实就是给他们:


1.先增加一个头视图(header) 和 尾视图(footer)
2.然后就是考虑状态的变化(正在刷新啊,刷新完成啊),通过偏移量来判断
3.最后给这些状态设置一些监听事件(下拉刷新的时候调用什么方法,没有数据了调用什么方法等)

如果能实现上面几点的话,一个简单粗糙的下拉刷新的控件就可以实现了

但是具体操作的时候我们还是要考虑几点问题:
  • 1.首先要满足以后能够很方便给TableView和CollectionView的去增加这个特性,
  • 2.能够很好的去适配最新的SDK
  • 3.增加特性后要减少甚至避免此特性(下拉刷新)不与其它UI控件和其他特性发生冲突

根据上面的几点问题我们有以下两种选择:
  • 1.自己重写一套UIScrollView并且加上下拉刷新的特性(但是很有难度,不建议这样);

  • 2.最好的方式是使用IOS的特性Category来增加下拉刷新的功能(选择这种方式来实现);


step2:

接下来我们要考虑的就是给TableView加还是给UICollectionView?(其实很简单,大神们可以忽略这个问题)我们选择的是UIScrollView


为什么使用ScrollView?而不使用TableView 和 CollectionView增加Category ?
大家应该都知道 UITableView 和 UICollectionView 都是继承于 ScrollView
如果我们使用UIScrollView的话,以后不管是tableView 和 CollectionView都可以直接使用下拉刷新的特性
但我们如果使用UITableView的话,我们肯定还必须为UICollectionView 写一套新的下拉刷新的方法;使用UIScrollView 会很大程度上提高我们这个下拉组件的延展性和兼容性


step3:

接下来就是需要来考虑我们如何使用UIScrollView和Catgory的特性来增加下拉刷新和上提加载的功能 ? ? ?

满足下面两点:
1.下拉刷新?上提加载?
2.为了方便以后容易使用?


最好的方式是 给UIScrollView 添加两个属性 一个是header 一个是Footer ,这样以后就可以直接利用这两个属性做事情了;

这个时候我们就需要考虑给UIScrollView添加属性了,如何给UIScrollView添加属性?

有点IOS基础的应该都知道,我们不能直接给Category添加属性;
但是可用通过采用动态添加属性的方法objc_setAssociatedObject()和objc_getAssociatedObject()函数给UIScrollView动态添加属性
这是一种关联对象的技巧(AssociatedObject)

给UIScrollView增加header属性

当然添加Footer的方法也是这样,添加Footer的时候只需要修改一下Key 就好,就先不讲Footer的实现了



step4:

既然添加完属性,那此时我们就需要想着如何给属性赋值?

所以接下来我们的工作就是写一个header的类

然后用Header类的对象给我们新增加的scrollView的header属性赋值

#当然现在MJRefresh这个框架已经进行了代码重构,现在框架的结构比较清晰,但是对一些刚开始接触IOS的同学看起来就会有些费劲了_
#现在咱们只讲一些主要的代码,先不考虑MJRefresh的代码结构
#因为它现在的代码是重构之后的,而咱们现在讲的是实现的思路
#先按照我们正常的思路来分析一下
首先创建一个类Header去继承UIView 但header类里面要写什么呢?
  • 1.首先肯定少不了一些主要的布局 如 下拉的ImageView,以及UIActivityIndicatorView等
  • 2.其次是 下拉刷新那一块会有很多的状态的变化,比如 正在刷新中,刷新完成,刚开始刷新等状态的判断,(这些状态我们需要通过 UIScrollView 的偏移量来计算这些状态。这一块主要就是一些逻辑判断,如何计算这次暂时不讲了
  • 3.最后就是看需求了,如果需要时间的加时间,需要GIF的加GIF动画;

普通的Header

带GIF的header

step5:

如何计算刷新状态呢 ?
所以此时我们不得不需要另一个知识点:事件监听(监听 UIScrollView的偏移量变化情况);
说到监听的话,IOS有几种经典的方式用来监听(以后有时间会给大家讲一下它们的优缺点和用法):
  • 1.KVO
  • 2.NSNotificationCenter
  • 3.Delegate等
MJRefresh中使用的是KVO的方式监听偏移量:

下面的willMoveToSuperView 方法中传过来的newSuperView 是你实现此功能的UITableView 和 UICollectionView的对象,此方法只在设置tableView的下拉和上提的时候执行一次(或者说只在当前页面初始化的时候执行一次);
此时我们通过 addObserver forKeyPath 的方式监听了ContentOffset的变化

设置偏移量监听
由于我们在上面设置了偏移量的监听,那么当UIScrollView的偏移量变化时,都会执行 observerValueForKeyPath方法
在这里面我们可以做一系列的逻辑判断,比如 刷新状态的变化,一些动画效果什么的(具体的判断就不说了,不然就就偏离了这篇文章的主题)

监听事件的执行
具体的偏移量变化判断暂不讲解;

偏移量逻辑判断方法

step6:

至此,我们基本上就把MJRefresh的下拉刷新的实现的大体流程给过了一遍,以后如果想丰富一下MJRefresh的话,比如增加时间的变化,或者增加GIF图片的效果,我觉得都不是太难的问题了,因为框架已经搭起来了以后想往里面塞什么东西,那就看需求了


最后我们要做的就是 写一个方法去实例化一个header的对象,然后将这个对象赋值给我们的UIScrollView的header属性

实例化一个header的对象
这样就可以实现一个简单的下拉刷新控件

 

这边文章主要讲了一下我们写MJRefresh的思路,没有讲一些具体实现方法

个人认为 编程重要的是思路,是想法,把想法理解透了,以后不管是OC 还是Android 还是Java PHP都是可以用的上的

以上只是个人对MJRefresh的理解,有一些理解不到的地方希望大家多多指教,多多批评


demo下载地址:http://www.code4app.com/thread-10770-1-1.html

转自:http://www.jianshu.com/p/9d5a3c543768

如何写一套下拉刷新的控件?《MJRefresh原理浅析》(附Demo下载地址)的更多相关文章

  1. vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件

    vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...

  2. cocos2d-html5 简易 下拉表单 控件

    刚才在CH5的群里问了问  有没有大侠写过 下拉表单控件啊!  没人鸟窝 ,DZ老师表示非常伤心啊  ,于是乎  自己写一个把 共享给大家. 效果图上一个  仅仅实现了一个最最主要的控件  非常eas ...

  3. Atitit.ui控件---下拉菜单选择控件的实现select html

    Atitit.ui控件---下拉菜单选择控件的实现select   html 1. 调用& model的实现 1 2. -----select.jsp------ 1 1. 调用& m ...

  4. [RN] React Native 仿美团下拉筛选菜单控件

    React Native 仿美团下拉筛选菜单控件 演示效果如下: 使用方法如下: 1.安装 npm install react-native-dropdownmenus --save react-na ...

  5. EasyUI的下拉选择框控件方法被屏蔽处理方式

    1.html标签如下 <div id="selectMap" style="top: 1px;left: 80px;position: absolute;" ...

  6. 扩展自easyui的combo组件的下拉多选控件

    首先上效果图 代码片段: 有需要的朋友微信联系我. 如果这篇文章对您有帮助,您可以打赏我 技术交流QQ群:15129679    

  7. android124 zhihuibeijing 新闻中心-新闻 -北京页签 下拉刷新

    缓存工具类:以url为key,json数据为value, package com.itheima.zhbj52.utils; import com.itheima.zhbj52.global.Glob ...

  8. 指令汇B新闻客户端开发(三) 下拉刷新

    现在我们继续这个新闻客户端的开发,今天分享的是下拉刷新的实现,我们都知道下拉刷新是一个应用很常见也很实用的功能.我这个应用是通过拉ListView来实现刷新的,先看一张刷新的原理图 从图中可知,手指移 ...

  9. android开发(3):列表listview的实现 | 下拉刷新

    APP里面的列表太常用了,系统提供的listview或grideview可以做到.另外,我希望这个列表能够下拉时触发刷新,于是考虑使用封装了这个功能的开源项目,这里介绍这个: https://gith ...

随机推荐

  1. [转载]在VB.Net中获取COM对象的特定实例(Getting a specific instance of COM object in VB.Net)

    转载:http://www.it1352.com/534235.html 问题: I am writing a Windows Form application in .Net to list all ...

  2. SAP CRM WebClient UI和Fiori UI混搭并存

    SAP CRM里有个功能可以创建HANA live report,消费HANA Studio里创建的模型. 最后创建好的report长这个样子: 具体创建步骤可以参考我的博客Step by Step ...

  3. 少年开始学习c#编程,过路的大神请担待!

    这应该真正算开始学习编程, 安装好了 linux, 开通了博客员的博客, 同时今天也需要把sublime安好, 安装MonoDevelop Codeblocks mysql-workbench 配置好 ...

  4. 【BZOJ4555】[TJOI2016&HEOI2016] 求和(NTT)

    点此看题面 大致题意: 计算\(\sum_{i=0}^n\sum_{j=0}^iS(i,j)*2^j*(j!)\),其中\(S\)为第二类斯特林数. 推式子 首先让我们来推一波式子: 因为当\(i&l ...

  5. 第36章 SDIO—SD卡读写测试—零死角玩转STM32-F429系列

    第36章     SDIO—SD卡读写测试 全套200集视频教程和1000页PDF教程请到秉火论坛下载:www.firebbs.cn 野火视频教程优酷观看网址:http://i.youku.com/f ...

  6. ipython notebook超级好用

    这个东西超级好用,以后要以c++和python为主要沟通语言了.

  7. 前端HTML基础

    1.0开发工具介绍 sublime的使用技巧链接 HTML特殊符号表 1.1 html概念 超文本标记语言(Hypertext Markup Language),属于一种描述性的标记语言(markup ...

  8. 5分钟带你入门Redis

    转载请标明出处: http://blog.csdn.net/forezp/article/details/61471712 本文出自方志朋的博客 1.redis概述 redis是一个开源的,先进的 k ...

  9. 【学时总结】◆学时·VI◆ SPLAY伸展树

    ◆学时·VI◆ SPLAY伸展树 平衡树之多,学之不尽也…… ◇算法概述 二叉排序树的一种,自动平衡,由 Tarjan 提出并实现.得名于特有的 Splay 操作. Splay操作:将节点u通过单旋. ...

  10. 高封装的property方法

    class Person(): def __init__(self): self.__age = 0 def set_age(self, age): if age < 0 or age > ...