您的位置：首页 > 其它

下拉刷新

2016-02-21 15:34 267 查看


在移动应用开发中，无论是Android还是IOS应用，经常可以看到下拉列表松开后自动刷行数据，在IOS中，使用下拉刷新UITableView中的数据用的非常多，最典型的就是新浪微博的客户端，使用下拉的形式来更新最新的微博信息。



首先请点击下载源码，下载完成后里面有个Demo是可以直接运行的Xcode工程，然后就是这个开源项目的源码，如何使用可以参照Demo，这个EGOTableViewPullRefresh我修改了一部分，并添加了一些注释，主要是支持了中英文版本，原生的只支持英文，我添加了中英文支持，然后就是刷新时间的格式，修改后的格式更直观，原生的是使用SDK自带的时间格式。



这时我第一次写博客，写的不好请见谅哈！



开始进入正题。。。。。

这次主要讲解EGOTableViewPullRefresh下拉的实现原理，并对EGOTableViewPullRefresh源代码进行讲解，至于如何使用EGOTableViewPullRefresh，可以参考我上传的Demo。


UITableView继承之UIScrollView，所以利用UIScrollView滚动的位置属性contentOffset，获取用户下拉的位置contentOffset.y，通过计算用户下拉了多少，来实现下拉刷新的功能。

首先看看下拉列表的组成部分，下拉列表就是UITableView了，在UITableView中添加一个子View，用来显示下拉刷新的状态，我把它叫做HeaderView，HeaderView初始化frame的位置是{0，-60，0，60}，所以正常情况下我们看不到HeaderView，当用户下拉列表时HeaderView就会显示出来。第二张图的数值表示的是初始化的时候，不是下拉时的数值，为了方便看到HeaderView，便于理解，所以把列表下拉后标注数值。





UITableView在顶部时UIScrollView的contentoffset.y=0，在用户下拉滑动列表时，

contentoffset.y为负数增大，

当contentoffset.y <= -65时表示HeaderView已经完全显示出来了，此时HeaderView便显示“松开刷新”

，并把下拉的箭头图标向上。



此时若用户松开手，停止下拉，HeaderView的状态就改为等待数据的状态，如下图所示（下图的contentoffset.y=0标错了，是=-60）



以上就是顶部下拉刷新数据的原理了，根据这个原理也就不难写出底部上拉刷新数据的实现了。

下面我们来分析下EGOTableViewPullRefresh的代码。

EGOTableViewPullRefresh的代码结构



EGORefreshTableHeaderView.h的代码

<a target=_blank id="L1" href="http://blog.csdn.net/kqjob/article/details/9891065#L1" rel="#L1" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;">  1</a>
<a target=_blank id="L2" href="http://blog.csdn.net/kqjob/article/details/9891065#L2" rel="#L2" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;">  2</a>
<a target=_blank id="L3" href="http://blog.csdn.net/kqjob/article/details/9891065#L3" rel="#L3" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;">  3</a>
<a target=_blank id="L4" href="http://blog.csdn.net/kqjob/article/details/9891065#L4" rel="#L4" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;">  4</a>
<a target=_blank id="L5" href="http://blog.csdn.net/kqjob/article/details/9891065#L5" rel="#L5" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;">  5</a>
<a target=_blank id="L6" href="http://blog.csdn.net/kqjob/article/details/9891065#L6" rel="#L6" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;">  6</a>
<a target=_blank id="L7" href="http://blog.csdn.net/kqjob/article/details/9891065#L7" rel="#L7" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;">  7</a>
<a target=_blank id="L8" href="http://blog.csdn.net/kqjob/article/details/9891065#L8" rel="#L8" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;">  8</a>
<a target=_blank id="L9" href="http://blog.csdn.net/kqjob/article/details/9891065#L9" rel="#L9" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;">  9</a>
<a target=_blank id="L10" href="http://blog.csdn.net/kqjob/article/details/9891065#L10" rel="#L10" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;"> 10</a>
<a target=_blank id="L11" href="http://blog.csdn.net/kqjob/article/details/9891065#L11" rel="#L11" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;"> 11</a>
<a target=_blank id="L12" href="http://blog.csdn.net/kqjob/article/details/9891065#L12" rel="#L12" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;"> 12</a>
<a target=_blank id="L13" href="http://blog.csdn.net/kqjob/article/details/9891065#L13" rel="#L13" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;"> 13</a>
<a target=_blank id="L14" href="http://blog.csdn.net/kqjob/article/details/9891065#L14" rel="#L14" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;"> 14</a>
<a target=_blank id="L15" href="http://blog.csdn.net/kqjob/article/details/9891065#L15" rel="#L15" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;"> 15</a>
<a target=_blank id="L16" href="http://blog.csdn.net/kqjob/article/details/9891065#L16" rel="#L16" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;"> 16</a>
<a target=_blank id="L17" href="http://blog.csdn.net/kqjob/article/details/9891065#L17" rel="#L17" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;"> 17</a>
<a target=_blank id="L18" href="http://blog.csdn.net/kqjob/article/details/9891065#L18" rel="#L18" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;"> 18</a>
<a target=_blank id="L19" href="http://blog.csdn.net/kqjob/article/details/9891065#L19" rel="#L19" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;"> 19</a>
<a target=_blank id="L20" href="http://blog.csdn.net/kqjob/article/details/9891065#L20" rel="#L20" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;"> 20</a>
<a target=_blank id="L21" href="http://blog.csdn.net/kqjob/article/details/9891065#L21" rel="#L21" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;"> 21</a>
<a target=_blank id="L22" href="http://blog.csdn.net/kqjob/article/details/9891065#L22" rel="#L22" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;"> 22</a>
<a target=_blank id="L23" href="http://blog.csdn.net/kqjob/article/details/9891065#L23" rel="#L23" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;"> 23</a>
<a target=_blank id="L24" href="http://blog.csdn.net/kqjob/article/details/9891065#L24" rel="#L24" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;"> 24</a>
<a target=_blank id="L25" href="http://blog.csdn.net/kqjob/article/details/9891065#L25" rel="#L25" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;"> 25</a>
<a target=_blank id="L26" href="http://blog.csdn.net/kqjob/article/details/9891065#L26" rel="#L26" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;"> 26</a>
<a target=_blank id="L27" href="http://blog.csdn.net/kqjob/article/details/9891065#L27" rel="#L27" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;"> 27</a>
<a target=_blank id="L28" href="http://blog.csdn.net/kqjob/article/details/9891065#L28" rel="#L28" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;"> 28</a>
<a target=_blank id="L29" href="http://blog.csdn.net/kqjob/article/details/9891065#L29" rel="#L29" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;"> 29</a>
<a target=_blank id="L30" href="http://blog.csdn.net/kqjob/article/details/9891065#L30" rel="#L30" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;"> 30</a>
<a target=_blank id="L31" href="http://blog.csdn.net/kqjob/article/details/9891065#L31" rel="#L31" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;"> 31</a>
<a target=_blank id="L32" href="http://blog.csdn.net/kqjob/article/details/9891065#L32" rel="#L32" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;"> 32</a>
<a target=_blank id="L33" href="http://blog.csdn.net/kqjob/article/details/9891065#L33" rel="#L33" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;"> 33</a>
<a target=_blank id="L34" href="http://blog.csdn.net/kqjob/article/details/9891065#L34" rel="#L34" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;"> 34</a>
<a target=_blank id="L35" href="http://blog.csdn.net/kqjob/article/details/9891065#L35" rel="#L35" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;"> 35</a>
<a target=_blank id="L36" href="http://blog.csdn.net/kqjob/article/details/9891065#L36" rel="#L36" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;"> 36</a>
<a target=_blank id="L37" href="http://blog.csdn.net/kqjob/article/details/9891065#L37" rel="#L37" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;"> 37</a>
<a target=_blank id="L38" href="http://blog.csdn.net/kqjob/article/details/9891065#L38" rel="#L38" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;"> 38</a>
<a target=_blank id="L39" href="http://blog.csdn.net/kqjob/article/details/9891065#L39" rel="#L39" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;"> 39</a>
<a target=_blank id="L40" href="http://blog.csdn.net/kqjob/article/details/9891065#L40" rel="#L40" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;"> 40</a>
<a target=_blank id="L41" href="http://blog.csdn.net/kqjob/article/details/9891065#L41" rel="#L41" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;"> 41</a>
<a target=_blank id="L42" href="http://blog.csdn.net/kqjob/article/details/9891065#L42" rel="#L42" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;"> 42</a>
<a target=_blank id="L43" href="http://blog.csdn.net/kqjob/article/details/9891065#L43" rel="#L43" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;"> 43</a>
<a target=_blank id="L44" href="http://blog.csdn.net/kqjob/article/details/9891065#L44" rel="#L44" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;"> 44</a>
<a target=_blank id="L45" href="http://blog.csdn.net/kqjob/article/details/9891065#L45" rel="#L45" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;"> 45</a>
<a target=_blank id="L46" href="http://blog.csdn.net/kqjob/article/details/9891065#L46" rel="#L46" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;"> 46</a>
<a target=_blank id="L47" href="http://blog.csdn.net/kqjob/article/details/9891065#L47" rel="#L47" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;"> 47</a>
<a target=_blank id="L48" href="http://blog.csdn.net/kqjob/article/details/9891065#L48" rel="#L48" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;"> 48</a>
<a target=_blank id="L49" href="http://blog.csdn.net/kqjob/article/details/9891065#L49" rel="#L49" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;"> 49</a>
<a target=_blank id="L50" href="http://blog.csdn.net/kqjob/article/details/9891065#L50" rel="#L50" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;"> 50</a>
#import <QuartzCore/QuartzCore.h>

//下拉状态
typedef enum{
EGOOPullRefreshPulling = 0,
EGOOPullRefreshNormal,
EGOOPullRefreshLoading,
} EGOPullRefreshState;

@protocol EGORefreshTableHeaderDelegate;
@interface EGORefreshTableHeaderView : UIView {

id _delegate;
EGOPullRefreshState _state;//下拉状态

UILabel *_lastUpdatedLabel;//显示最后更新的时间
UILabel *_statusLabel;//显示下拉状态
CALayer *_arrowImage;//显示下拉图标
UIActivityIndicatorView *_activityView;//等待指示器

}

@property(nonatomic,assign) id <EGORefreshTableHeaderDelegate> delegate;

- (id)initWithFrame:(CGRect)frame arrowImageName:(NSString *)arrow textColor:(UIColor*)textColor;

//刷新最后更新时间
- (void)refreshLastUpdatedDate;

//UIScrollView 滑动时调用该方法
- (void)egoRefreshScrollViewDidScroll:(UIScrollView *)scrollView;

//UIScrollView 停止拖拽时调用该方法
- (void)egoRefreshScrollViewDidEndDragging:(UIScrollView *)scrollView;

//数据载入完成时调用此方法
- (void)egoRefreshScrollViewDataSourceDidFinishedLoading:(UIScrollView *)scrollView;

@end
//下拉委托
@protocol EGORefreshTableHeaderDelegate
//指示开始刷新数据
- (void)egoRefreshTableHeaderDidTriggerRefresh:(EGORefreshTableHeaderView*)view;
//是否正在载入数据
- (BOOL)egoRefreshTableHeaderDataSourceIsLoading:(EGORefreshTableHeaderView*)view;
@optional
//返回最后更新时间
- (NSDate*)egoRefreshTableHeaderDataSourceLastUpdated:(EGORefreshTableHeaderView*)view;
@end

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航