iOS MJRefresh使用

1. MJRefresh

MJRefresh封装了上下拉刷新的功能。

在Podfile中安装

pod 'MJRefresh'

导入MJRefresh

#import "MJRefresh.h"

2. 下拉刷新

2.1 MJRefreshStateHeader

在viewDidLoad中指定列表的mj_header属性，即可实现下拉刷新功能

- (void)viewDidLoad {
    [super viewDidLoad];

    ... ...
    
    __weak typeof(self) weakSelf = self;
    MJRefreshStateHeader *header = [MJRefreshStateHeader headerWithRefreshingBlock:^{
        dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(3 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
            [weakSelf refresh];
        });
    }];
    
    self.tableView.mj_header = header;
}

- (void)refresh {
    ... ...
        
    //网络请求加载数据完成后在停止刷新
    [self.tableView.mj_header endRefreshing];
}

MJRefreshStateHeader有两种方式指定，都要指定刷新动作。

/** 创建header */
+ (instancetype)headerWithRefreshingBlock:(MJRefreshComponentAction)refreshingBlock;
/** 创建header */
+ (instancetype)headerWithRefreshingTarget:(id)target refreshingAction:(SEL)action;

MJRefreshStateHeader显示两条信息，上面是状态，下面是刷新时间。

/** 显示刷新状态的label */
@property (weak, nonatomic, readonly) UILabel *stateLabel;
/** 显示上一次刷新时间的label */
@property (weak, nonatomic, readonly) UILabel *lastUpdatedTimeLabel;

/** 设置state状态下的文字 */
- (instancetype)setTitle:(NSString *)title forState:(MJRefreshState)state;

/** 利用这个block来决定显示的更新时间文字 */
@property (copy, nonatomic, nullable) NSString *(^lastUpdatedTimeText)(NSDate * _Nullable lastUpdatedTime);

setTitle: forState:设置不同状态下的文字，lastUpdatedTimeText修改显示的更新时间文字。

[header setTitle:@"下拉刷新" forState:MJRefreshStateIdle];
[header setTitle:@"松开刷新" forState:MJRefreshStatePulling];
[header setTitle:@"刷新中..." forState:MJRefreshStateRefreshing];

header.lastUpdatedTimeText = ^NSString * _Nonnull(NSDate * _Nullable lastUpdatedTime) {
    return @"当前时间...";
};

2.2 MJRefreshNormalHeader

MJRefreshNormalHeader是MJRefreshStateHeader的子类，添加了图标的支持

@property (weak, nonatomic, readonly) UIImageView *arrowView;
@property (weak, nonatomic, readonly) UIActivityIndicatorView *loadingView;

MJRefreshNormalHeader提供了默认的箭头图片和一个UIActivityIndicatorView控件

可以对图标进行一些改动

header.arrowView.image = [UIImage imageNamed:@"arrow"];
header.loadingView.color = [UIColor magentaColor];

header.lastUpdatedTimeLabel.hidden = YES;

2.3 MJRefreshGifHeader

MJRefreshGifHeader同样继承MJRefreshStateHeader，但实现动图的刷新。

NSArray *idleImages = @[[UIImage imageNamed:@"btn_guanzhu"]];
NSArray *pullingImages = @[[UIImage imageNamed:@"btn_guanzhu_s"]];
NSArray *refreshingImages = @[[UIImage imageNamed:@"btn_guanzhu_s"],
                      [UIImage imageNamed:@"btn_guanzhu"]];

[header setImages:idleImages forState:MJRefreshStateIdle];
[header setImages:pullingImages forState:MJRefreshStatePulling];
[header setImages:refreshingImages forState:MJRefreshStateRefreshing];

3. 上拉刷新

MJRefreshFooter上拉刷新控件分为两种，MJRefreshBackFooter和MJRefreshAutoFooter

• MJRefreshBackFooter，回弹底部的上拉刷新控件。
  • MJRefreshBackStateFooter，带状态的上拉刷新控件。
    • MJRefreshBackNormalFooter，默认的上拉刷新控件。
    • MJRefreshBackGifFooter，带动图的上拉刷新控件。
• MJRefreshAutoFooter，自动刷新的上拉刷新控件。
  • MJRefreshAutoStateFooter，带状态的上拉刷新控件。
    • MJRefreshAutoNormalFooter， 默认的上拉刷新控件。
    • MJRefreshAutoGifFooter，带动图的上拉刷新控件。

3.1 MJRefreshBackFooter

MJRefreshBackStateFooter类似于MJRefreshStateHeader，可以修改不同状态下的文字。

- (void)viewDidLoad {
    [super viewDidLoad];

    ... ...

    MJRefreshBackStateFooter *footer = [MJRefreshBackStateFooter footerWithRefreshingBlock:^{
        dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(3 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
            [weakSelf loading];
        });
    }];
    [footer setTitle:@"上拉刷新" forState:MJRefreshStateIdle];
    [footer setTitle:@"松开刷新" forState:MJRefreshStatePulling];
    [footer setTitle:@"刷新中..." forState:MJRefreshStateRefreshing];
    [footer setTitle:@"-- 我是有底线的 --" forState:MJRefreshStateNoMoreData];
    self.tableView.mj_footer = footer;
}

- (void)loading {
    ... ...

    [self.tableView.mj_footer endRefreshingWithNoMoreData];
}

MJRefreshBackNormalFooter提供了默认的箭头图片和一个UIActivityIndicatorView控件

MJRefreshBackGifFooter实现了动图效果

3.2 MJRefreshAutoFooter

MJRefreshAutoFooter是自动刷新的上拉刷新控件，上拉后都会自动属性。而效果与MJRefreshBackFooter类似。

MJRefreshAutoNormalFooter效果

MJRefreshBackGifFooter效果