iOS实现MJRefresh下拉刷新(上拉加载)使用详解

2020-01-18 19:56:15王振洲

下拉刷新控件目前比较火的有好几种,本人用过MJRefresh 和 SVPullToRefresh,相对而言,前者比后者可定制化、拓展新都更高一点。

因此本文着重讲一下MJRefresh的简单用法。

导入项目:

cocoapods导入:pod 'MJRefresh'

手动导入:

 将MJRefresh文件夹中的所有文件拽入项目中 导入主头文件:#import "MJRefresh.h"

使用介绍:

mjrefresh下拉刷新,ios下拉刷新实现原理,ios,下拉刷新动画

广泛性分为6种使用场景,分别对应:默认、动画图片、隐藏时间、隐藏时间和状态、自定义文字说明、以及自定义刷新控件。 

下面就各种场景分别讲一下:

1、默认场景

mjrefresh下拉刷新,ios下拉刷新实现原理,ios,下拉刷新动画

包含刷新菊花、下拉说明、时间

使用代码:


#pragma mark UITableView + 下拉刷新 默认

- (void)example01

{

  __weak __typeof(self) weakSelf = self; 

  // 设置回调(一旦进入刷新状态就会调用这个refreshingBlock)

  self.tableView.mj_header = [MJRefreshNormalHeader headerWithRefreshingBlock:^{

    [weakSelf loadNewData];

  }];

  // 马上进入刷新状态

  [self.tableView.mj_header beginRefreshing];

} 

2、使用动画图片

mjrefresh下拉刷新,ios下拉刷新实现原理,ios,下拉刷新动画

PS:这里的动画并不是用gif实现的,而是利用序列帧(即若干图片组成一个不同状态下的图片数组,然后根据位置显示不同图片)去展现。


#pragma mark UITableView + 下拉刷新 动画图片

- (void)example02

{

  // 设置回调(一旦进入刷新状态,就调用target的action,也就是调用self的loadNewData方法)

  self.tableView.mj_header = [MJChiBaoZiHeader headerWithRefreshingTarget:self refreshingAction:@selector(loadNewData)];

   

  // 马上进入刷新状态

  [self.tableView.mj_header beginRefreshing];

} 

这里用大众点评吃包子图片为例,新建一个自定义类 MJChiBaoZiHeader,继承:MJRefreshGifHeader


#import "MJRefreshGifHeader.h" 

@interface MJChiBaoZiHeader : MJRefreshGifHeader 

@end

然后重写prepare方法,代码:


- (void)prepare

{

  [super prepare];   

  // 设置普通状态的动画图片

  NSMutableArray *idleImages = [NSMutableArray array];

  for (NSUInteger i = 1; i<=60; i++) {

    UIImage *image = [UIImage imageNamed:[NSString stringWithFormat:@"dropdown_anim__000%zd", i]];

    [idleImages addObject:image];

  }

   [self setImages:idleImages forState:MJRefreshStateIdle];   

  // 设置即将刷新状态的动画图片(一松开就会刷新的状态)

  NSMutableArray *refreshingImages = [NSMutableArray array];

  for (NSUInteger i = 1; i<=3; i++) {

    UIImage *image = [UIImage imageNamed:[NSString stringWithFormat:@"dropdown_loading_0%zd", i]];

    [refreshingImages addObject:image];

  }

  [self setImages:refreshingImages forState:MJRefreshStatePulling];  

  // 设置正在刷新状态的动画图片

  [self setImages:refreshingImages forState:MJRefreshStateRefreshing];

}