实现上下拉刷新MJRefresh

Posted 2022-06-22 pengyuan_D

  在开发项目中,为了更好的用户体验,现在大多软件都加入了上拉刷新列表数据,下拉加载更多数据的功能,比如:腾讯QQ,新浪微博,网易新闻,等等很多的社交新闻类都带有这样的功能.下面来就是几种常见的实现方法:

 

一:UITableView的代理方法

效果:

  

 

通过使用UITableView的这个代理方法:

-  (void)tableView:(UITableView*)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath*)indexPath；

来判定tableView中的数组数是否即将显示最后一个cell，if (indexPath.row == [self.dataArrcount]-1).

可以在下面添加视图,通过UITableView的FooterView:

self.tableView.tableFooterView=footSpinnerView;其中footSpinnerView是一个自定义的UIView,再在上面加了一个旋转的UIActivityIndicatorView即可，记得[UIActivityIndicatorViewstartAnimation]让风火轮旋转.
再加上你对于加载数据的一些想法,比如从数据库获取更多的内容,刷新数据完成后,再将self.tableView.tableFooterView设为nil即可.当然,从数据库获取完新数据后[tableView reloadData]刷新数据也是必须的.相关代码:

Demo:

#pragma mark -
#pragma mark UITableViewDelegate
- (void)tableView:(UITableView *)tableViewwillDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath

       if (indexPath.row == [self.productArrcount]-1) 
             [selfsetupFootSpinnerView];   
             self.tableView.tableFooterView= footSpinnerView;
             if(currentArrCount < dataCount)  
            currentArrCount+= 5;
            self.dataArr= [dao getArrayOfDataLimit:currentArrCount offset:0];//从数据库中重新取数据
             [self.tableViewreloadData];
      else 
           self.tableView.tableFooterView= nil;
     
   

∂---- 经本人实验呢,该方法简单好用,但是似乎只能实现上拉刷新或者加载更多数据,无法实现下拉刷新的功能,下拉刷新的功能貌似还需要通过监听偏移量的方法来实现啊.

二:UIScrollView的代理方法

UITableView本身继承于UIScrollView,所以它也就是一个特殊的UIScrollView,也可以实现UIScrollView的代理方法.上下拉刷新,其实就是当UIScrollView的偏移量到一定程度时调用刷新方法,因此实现:

效果:

-  (void)scrollViewDidScroll:(UIScrollView*)scrollView代理方法即可。代码:
-   - (void)scrollViewDidScroll:(UIScrollView *)scrollView
-   
-       // 假设偏移表格高度的20%进行刷新
-       if(!_isLoading)  // 判断是否处于刷新状态，刷新中就不执行
-           // 取内容的高度：
-           //    如果内容高度大于UITableView高度，就取TableView高度
-           //    如果内容高度小于UITableView高度，就取内容的实际高度
-           floatheight = scrollView.contentSize.height > _tableView.frame.size.height?_tableView.frame.size.height : scrollView.contentSize.height;
-           if((height -scrollView.contentSize.height + scrollView.contentOffset.y) / height > 0.2)
-               //调用上拉刷新方法
-           
-           if(- scrollView.contentOffset.y /_tableView.frame.size.height > 0.2) 
-               //调用下拉刷新方法
-           
-       
-   
-    

具体要做出怎样的刷新效果在两个if中添加就行了,比如从数据库添加更多数据,添加风火轮视图等等.

∂---- 经本人再次实践,相比较而言,这种方法就要比上面的方法好点了,使用起来方便,逻辑简单,能同时实现上拉和下拉刷新的功能,比较推荐.

 

 

三:EGOTableViewPullRefresh

   EGOTableViewPullRefresh是当前一个比较火的实现上下拉刷新的开源类库.

英文原文和类库下载地址:https://github.com/emreberge/EGOTableViewPullRefresh

优点:

·      容易集成，使用interface builder 添加tableView进行配置。

·      配置简单, 箭头头像，背景颜色和文本颜色都能通过PullTableView类的属性很容易的更改。  

·      上拉加载更多数据功能在Table的底部。

·      可以通过代码修改刷新和加载更多动画。

 

 

上面的就是实现后的效果图,个人感觉还不错,挺好用的.具体的实现方法可以参考

出处http://blog.csdn.net/duxinfeng2010

 

四:MJRefresh

这是我在网上看到的MJ自己封装的一个框架,可以为UITableView或者CollectionView加上下拉刷新或者上拉刷新功能。可以自定义上下拉刷新的文字说明。是一套无耦合、可插拔式的刷新控件，对项目中的其他代码毫无侵入性，而且使用简单，3行代码就能集成刷新控件

测试环境:

[Code4App]编译测试，测试环境：Xcode 4.5, ios 5.0 以上。

效果:

 

 

 

在网站:  http://code4app.com(cn)   或者http://code4app.net(en)    下载代码,然后再自己的工程里倒入 MJRefresh.h 头文件 调用其中的几个方法就能简单实现上下拉刷新的功能.

 

代码中定义了几种刷新控件的刷新状态,通过监听刷新控件的刷新状态的改变来调用刷新或者停止刷新方法,来实现上下拉刷新的功能,其中,刷新结束也是通过将尾部视图设置为nil来移除尾部空间的:

 

#pragma mark - 控件的刷新状态
typedef enum 
   MJRefreshStatePulling= 1, // 松开就可以进行刷新的状态
   MJRefreshStateNormal= 2, // 普通状态
   MJRefreshStateRefreshing= 3, // 正在刷新中的状态
   MJRefreshStateWillRefreshing = 4
 MJRefreshState;
 
#pragma mark - 控件的类型
typedef enum 
   MJRefreshViewTypeHeader = -1, // 头部控件
   MJRefreshViewTypeFooter = 1 // 尾部控件
 MJRefreshViewType;

 

 

下面是这个框架的简单的使用方法:

1.给UITableView添加头,尾部的刷新控件:

 添加头部控件的方法:

 [self.tableViewaddHeaderWithTarget:self action:@selector(headerRereshing)];

 或者通过代码块

 [self.tableViewaddHeaderWithCallback:^ ];

  添加尾部控件的方法

 [self.tableViewaddFooterWithTarget:self action:@selector(footerRereshing)];

 或者通过代码块

 [self.tableViewaddFooterWithCallback:^ ];

 

  你可以在MJRefreshConst.h和MJRefreshConst.m文件中自定义显示的文字内容和文字颜色

 

 2.调用刷新方法进入自动刷新状态

 1> [self.tableViewheaderBeginRefreshing];

 2> [self.tableViewfooterBeginRefreshing];

 

 3.调用下面方法用来结束刷新状态

 1> [self.tableViewheaderEndRefreshing];

 2> [self.tableViewfooterEndRefreshing];

他在添加头尾部控件的代码中提供了两种添加方法,addTarget和block代码块,可以根据个人喜好使用.

 

 

刷新方法的代码:

- (void)headerRereshing

    // 1.添加假数据
    for (int i = 0; i<5; i++) 
        [self.fakeData insertObject:MJRandomData atIndex:0];
    
   
    // 2.2秒后刷新表格UI
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^
        // 刷新表格
        [self.tableView reloadData];
       
        // (最好在刷新表格后调用)调用endRefreshing可以结束刷新状态
        [self.tableView headerEndRefreshing];
    );

 
- (void)footerRereshing

    // 1.添加假数据
    for (int i = 0; i<5; i++) 
        [self.fakeData addObject:MJRandomData];
    
   
    // 2.2秒后刷新表格UI
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^
        // 刷新表格
        [self.tableView reloadData];
       
        // (最好在刷新表格后调用)调用endRefreshing可以结束刷新状态
        [self.tableView footerEndRefreshing];
    );

以上是UITableView的刷新方法,UICollectionView与之类似.

 

 

代码中,MJ使用了UIView的autoresizingMask属性,

在 UIView 中有一个autoresizingMask的属性，它对应的是一个枚举的值（如下），属性的意思就是自动调整子控件与父控件中间的位置，宽高。

enum 
   UIViewAutoresizingNone                 = 0,
   UIViewAutoresizingFlexibleLeftMargin   = 1 << 0,
   UIViewAutoresizingFlexibleWidth        = 1 << 1,
   UIViewAutoresizingFlexibleRightMargin  = 1 << 2,
   UIViewAutoresizingFlexibleTopMargin    = 1 << 3,
   UIViewAutoresizingFlexibleHeight       = 1 << 4,
   UIViewAutoresizingFlexibleBottomMargin = 1 << 5
;

UIViewAutoresizingNone就是不自动调整。
UIViewAutoresizingFlexibleLeftMargin 自动调整与superView左边的距离，保证与superView右边的距离不变。
UIViewAutoresizingFlexibleRightMargin 自动调整与superView的右边距离，保证与superView左边的距离不变。
UIViewAutoresizingFlexibleTopMargin 自动调整与superView顶部的距离，保证与superView底部的距离不变。
UIViewAutoresizingFlexibleBottomMargin 自动调整与superView底部的距离，也就是说，与superView顶部的距离不变。
UIViewAutoresizingFlexibleWidth 自动调整自己的宽度，保证与superView左边和右边的距离不变。
UIViewAutoresizingFlexibleHeight 自动调整自己的高度，保证与superView顶部和底部的距离不变。
UIViewAutoresizingFlexibleLeftMargin |UIViewAutoresizingFlexibleRightMargin 自动调整与superView左边的距离，保证与左边的距离和右边的距离和原来距左边和右边的距离的比例不变。比如原来距离为20，30，调整后的距离应为68，102，即68/20=102/30。

 

这个框架很不错,在需要实现上下拉刷新功能的项目中能直接拿过来使用,正如作者本人说的那样,这是一套无耦合、可插拔式的刷新控件，对项目中的其他代码毫无侵入性，而且使用简单啊.

 

以上是我总结的几种实现上下拉刷新功能的方法,希望能给需要帮助的人一些借鉴吧.