MJRefresh 的使用

github：https://github.com/CoderMJLee/MJRefresh

• Getting Started
  • Features【Support what kinds of controls to refresh】
  • Installation【How to use MJRefresh】
  • Who's using【More than hundreds of Apps are using MJRefresh】
  • Classes【The Class Structure Chart of MJRefresh】
• Comment API
  • MJRefreshComponent.h 刷新控制的基类
  • MJRefreshHeader.h 基础的下拉刷新
  • MJRefreshFooter.h 基础的上拉刷新
  • MJRefreshAutoFooter.h 自动刷新的上拉刷新
  • MJRefreshTrailer.h

一、MJRefresh的类结构图

MJRefresh的类结构图

• MJRefreshComponent 所有刷新控件的基类
• 图表中的标有红色文本的类可以直接使用
  • 下拉刷新控件类型：
    • MJRefreshNormalHeader （ 默认的下拉刷新控件,可以直接使用）
    • MJRefreshGifHeader （带动态图的下拉刷新控件,可以直接使用）
  • 上拉刷新控件类型：
    • Auto refresh
      • MJRefreshAutoNormalFooter （默认的上拉刷新控件,可以直接使用 ）
      • MJRefreshAutoGifFooter （带动态图的上拉刷新控件,可以直接使用）
    • 自动回弹
      • MJRefreshBackNormalFooter
      • MJRefreshBackGifFooter

二、举例

• The drop-down refresh 01-Default

self.tableView.mj_header = [MJRefreshNormalHeader headerWithRefreshingBlock:^{
   //当自动进入刷新状态时调用此Block
}];

//设置回调（进入刷新状态后，调用target的动作，即调用[self loadNewData]） 
self.tableView.mj_header = [MJRefreshNormalHeader headerWithRefreshingTarget:self refreshingAction:@selector(loadNewData)];

// 立即进入刷新状态 
[self.tableView.mj_header beginRefreshing];

01 默认刷新

• The drop-down refresh 02-Animation image

MJRefreshGifHeader *header = [MJRefreshGifHeader headerWithRefreshingTarget:self refreshingAction:@selector(loadNewData)];
// 设置动画图像的普通状态
[header setImages:idleImages forState:MJRefreshStateIdle];
//设置动画图像的拖动状态(进入放松即刷新状态)
[header setImages:pullingImages forState:MJRefreshStatePulling];
// 设置动画图片的刷新状态 
[header setImages:refreshingImages forState:MJRefreshStateRefreshing];
self.tableView.mj_header = header;

02 动画图片

• The drop-down refresh 03-Hide the time

//隐藏时间
header.lastUpdatedTimeLabel.hidden = YES;

03 隐藏时间

• The drop-down refresh 04-Hide status and time

//隐藏时间
header.lastUpdatedTimeLabel.hidden = YES;
// 隐藏状态
header.stateLabel.hidden = YES;

隐藏状态和时间

• The drop-down refresh 05-DIY title

// 设置文字
[header setTitle:@"Pull down to refresh" forState:MJRefreshStateIdle];
[header setTitle:@"Release to refresh" forState:MJRefreshStatePulling];
[header setTitle:@"Loading ..." forState:MJRefreshStateRefreshing];

// 设置文字大小
header.stateLabel.font = [UIFont systemFontOfSize:15];
header.lastUpdatedTimeLabel.font = [UIFont systemFontOfSize:14];

// Set textColor
header.stateLabel.textColor = [UIColor redColor];
header.lastUpdatedTimeLabel.textColor = [UIColor blueColor];

(下拉刷新05-自定义文字)

• The drop-down refresh 06-DIY the control of refresh

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

下拉刷新06-自定义刷新控件

• The pull to refresh 01-Default

self.tableView.mj_footer = [MJRefreshAutoNormalFooter footerWithRefreshingBlock:^{
    //Call this Block When enter the refresh status automatically
}];

//或者
self.tableView.mj_footer = [MJRefreshAutoNormalFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadMoreData)];

01 上拉默认刷新

• The pull to refresh 02-Animation image

MJRefreshAutoGifFooter *footer = [MJRefreshAutoGifFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadMoreData)];

// 设置刷新图像
[footer setImages:refreshingImages forState:MJRefreshStateRefreshing];

self.tableView.mj_footer = footer;

02 动画上拉刷新

• The pull to refresh 03-Hide the title of refresh status

// 隐藏刷新状态的标题
footer.refreshingTitleHidden = YES;
// If does have not above method，then use //footer.stateLabel.hidden = YES;

03 隐藏刷新状态的标题

• The pull to refresh 04-All loaded

//成为NoMoreData的状态
[footer noticeNoMoreData];

04 全部加载完毕

• The pull to refresh 05-DIY title

// Set title
[footer setTitle:@"Click or drag up to refresh" forState:MJRefreshStateIdle];
[footer setTitle:@"Loading more ..." forState:MJRefreshStateRefreshing];
[footer setTitle:@"No more data" forState:MJRefreshStateNoMoreData];

// Set font
footer.stateLabel.font = [UIFont systemFontOfSize:17];

// Set textColor
footer.stateLabel.textColor = [UIColor blueColor];

05 自定义文字

• The pull to refresh 06-Hidden After loaded

//Hidden current control of the pull to refresh
self.tableView.mj_footer.hidden = YES;

06 加载后隐藏

• The pull to refresh 07-Automatic back of the pull01

//自动回弹的上拉
self.tableView.mj_footer = [MJRefreshBackNormalFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadMoreData)];

自动回弹的上拉 01

• The pull to refresh 08-Automatic back of the pull02

MJRefreshBackGifFooter *footer = [MJRefreshBackGifFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadMoreData)];

//设置动画图像的正常状态
[footer setImages:idleImages forState:MJRefreshStateIdle];
//设置动画图像的拖动状态（松开即进入刷新状态） 
[footer setImages:pullingImages forState:MJRefreshStatePulling];
// 设置动画图像的刷新状态
[footer setImages:refreshingImages forState:MJRefreshStateRefreshing];
self.tableView.mj_footer = footer;

自动回弹的上拉 02

• The pull to refresh 09-DIY the control of refresh(Automatic refresh)

self.tableView.mj_footer = [MJDIYAutoFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadMoreData)];
//实现参考MJDIYAutoFooter.h和MJDIYAutoFooter.m

自定义刷新控件

• The pull to refresh 10-DIY the control of refresh(Automatic back)

self.tableView.mj_footer = [MJDIYBackFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadMoreData)];
//实现参考MJDIYBackFooter.h和MJDIYBackFooter.m

自定义刷新控件(自动回弹)

• UICollectionView01-The pull and drop-down refresh

// 下拉刷新
self.collectionView.mj_header = [MJRefreshNormalHeader headerWithRefreshingBlock:^{
   //当自动进入刷新状态时调用此块
}];

// 上拉刷新
self.collectionView.mj_footer = [MJRefreshAutoNormalFooter footerWithRefreshingBlock:^{
   //当自动进入刷新状态时调用此块
}];

上下拉刷新

• UICollectionView02-The trailer refresh

// The trailer refresh
self.collectionView.mj_trailer = [MJRefreshNormalTrailer trailerWithRefreshingBlock:^{
   //当自动进入刷新状态时调用此块
}];

MJRefresh 演示

• WKWebView 01-The drop-down refresh

//添加下拉刷新控件
self.webView.scrollView.mj_header = [MJRefreshNormalHeader headerWithRefreshingBlock:^{
   //当自动进入刷新状态时调用此块
}];

WKWebView 添加下拉刷新控件

提醒:

• ARC
• iOS>=9.0
• iPhone \ iPad screen anyway