[最新版]MJRefresh解析与详细使用指导

俗话说 “工欲善其事,必先利其器”,好的成熟的第三方,是我们开发路上的利器;俗话又说“君子生非异也,善假于物也”NB的人并不是生下来就和别人不一样,只是他们擅于使用工具罢了!,熟练使用这些第三方,你就是开发者的"君子"!

本篇旨在更详细指导怎么使用对应的第三方,不会过多说明第三方怎么实现!就像你买了部新手机,说明书只说明怎么使用(及注意事项),并不说明手机由什么构造以及怎么制造!
PPDemos地址
注意demo用的是3.1.2版本,运行可能出现Terminating app due to uncaught exception ‘NSRangeException‘, reason: ‘*** -[NSTaggedPointerString substringToIndex:]: Index 9223372036854775807 out of bounds; string length 2‘,请更新到最新就好了2016--07--04

一. 新旧版本比较

旧版本使用说明

#import "UIScrollView+MJRefresh.h"
/**
 MJ友情提示:
 1. 添加头部控件的方法
 [self.tableView addHeaderWithTarget:self action:@selector(headerRereshing)];
 或者
 [self.tableView addHeaderWithCallback:^{ }];
 2. 添加尾部控件的方法
 [self.tableView addFooterWithTarget:self action:@selector(footerRereshing)];
 或者
 [self.tableView addFooterWithCallback:^{ }];
 3. 可以在MJRefreshConst.h和MJRefreshConst.m文件中自定义显示的文字内容和文字颜色
 4. 本框架兼容iOS6\\\\iOS7,iPhone\\\\iPad横竖屏
 5.自动进入刷新状态
 1> [self.tableView headerBeginRefreshing];
 2> [self.tableView footerBeginRefreshing];
 6.结束刷新
 1> [self.tableView headerEndRefreshing];
 2> [self.tableView footerEndRefreshing];
 */

新版本介绍version= ‘3.1.5‘,2016-06-13
1.添加前缀mj_;
2.支持国际化zh-Hans(简体中文),zh-Hant(繁体中文),en(英文)
3.可以自定义刷新控件
4.更加自由化,支持文字,图片,GIF等混合搭配(有点扯

最新的MJRefresh的GitHub仓库截图如图mj-01:

图mj-01 MJRefresh的GitHub仓库截图

二.MJRefresh解析

1 . MJRefresh的框架图如图mj-02:

图mj-02 MJRefresh的框架图

2 . MJRefresh的框架图梳理

作用
MJRefreshComponent 继承自UIView,最基本的刷新类
MJRefreshHeader 最基本的下拉刷新类
MJRefreshStateHeader 可以下拉刷新,但是只有文字
MJRefreshNormalHeader 默认的刷新样式,有文字,有上下箭头,有菊花

抱歉说下:上面MJ的框架图说的已经很详细了,具体的上拉加载更多就不写了

3 . MJRefresh使用技巧或建议

3.1 无论是下拉刷新还是上拉加载,都最好使用图mj-02分支最后面的某一个,因为越后面分工越详细,刷新控件处理的越细致;
3.2 自定义刷新控件,后面有讲解

三 .MJRefresh详细使用指导所有说明都配合代码讲解

① MJRefresh默认下拉刷新上拉加载

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.

    //默认【下拉刷新】
    self.tableView.mj_header = [MJRefreshNormalHeader headerWithRefreshingTarget:self refreshingAction:@selector(refresh)];
    //默认【上拉加载】
    self.tableView.mj_footer = [MJRefreshAutoNormalFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadMore)];
}
-(void)refresh
{
    [self getNetworkData:YES];
}
-(void)loadMore
{
    [self getNetworkData:NO];
}

② MJRefresh默认下拉刷新上拉加载【使用Block方法】

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.

    __weak typeof(self) weakSelf = self;
    //默认block方法:设置下拉刷新
    self.tableView.mj_header = [MJRefreshNormalHeader headerWithRefreshingBlock:^{
        [weakSelf getNetworkData:YES];
    }];

    //默认block方法:设置上拉加载更多
    self.tableView.mj_footer = [MJRefreshAutoNormalFooter footerWithRefreshingBlock:^{
        //Call this Block When enter the refresh status automatically
        [weakSelf getNetworkData:NO];
    }];

}

③ MJRefresh更自定义化的下拉刷新上拉加载

  1. 动画图片样式;
  2. 隐藏刷新控件状态或者时间样式;
  3. 自定义刷新状态和刷新时间文字样式【当然了,对应的Label不能隐藏】
- (void)viewDidLoad {
    [super viewDidLoad];
    //样式一:设置一张图片(无动画效果)
//    NSArray *idleImages = [NSArray arrayWithObject:[UIImage imageNamed:@"xiala_icon.png"]];
    //样式二:设置多张图片(有动画效果)
    NSArray *idleImages = [NSArray arrayWithObjects:
                           [UIImage imageNamed:@"dropdown_loading_01.png"],
                           [UIImage imageNamed:@"dropdown_loading_02.png"],
                           [UIImage imageNamed:@"dropdown_loading_03.png"],nil];

    NSArray *pullingImages = [NSArray arrayWithObject:[UIImage imageNamed:@"shifang_icon.png"]];
    NSArray *refreshingImages = [NSArray arrayWithObjects:
                                 [UIImage imageNamed:@"load_view_01.png"],
                                 [UIImage imageNamed:@"load_view_02.png"],
                                 [UIImage imageNamed:@"load_view_03.png"],
                                 [UIImage imageNamed:@"load_view_04.png"],
                                 [UIImage imageNamed:@"load_view_05.png"],
                                 [UIImage imageNamed:@"load_view_06.png"],
                                 [UIImage imageNamed:@"load_view_07.png"],
                                 [UIImage imageNamed:@"load_view_08.png"],
                                 [UIImage imageNamed:@"load_view_09.png"],
                                 [UIImage imageNamed:@"load_view_010.png"], nil];

//    MJRefreshGifHeader *header = [MJRefreshGifHeader headerWithRefreshingTarget:self refreshingAction:@selector(animationRefresh)];

    //-------以下是使用block方法【不包含animationRefresh方法】,动画设置在上面的部分代码---------

    __weak typeof(self) weakSelf = self;
    MJRefreshGifHeader *header = [MJRefreshGifHeader headerWithRefreshingBlock:^{
        [weakSelf getNetworkData:YES];
    }];

    //-------以上是使用block方法【不包含animationRefresh方法】,动画设置在上面的部分代码---------

    //1.设置普通状态的动画图片
    [header setImages:idleImages forState:MJRefreshStateIdle];
    //2.设置即将刷新状态的动画图片(一松开就会刷新的状态)
    [header setImages:pullingImages forState:MJRefreshStatePulling];
    //3.设置正在刷新状态的动画图片
    [header setImages:refreshingImages forState:MJRefreshStateRefreshing];

    self.tableView.mj_header = header;

#pragma mark --- 下面两个设置根据各自需求设置
//    // 隐藏更新时间
//    header.lastUpdatedTimeLabel.hidden = YES;
//
//    // 隐藏刷新状态
//    header.stateLabel.hidden = YES;

#pragma mark --- 自定义刷新状态和刷新时间文字【当然了,对应的Label不能隐藏】
    // Set title
    [header setTitle:@"Pull down to refresh" forState:MJRefreshStateIdle];
    [header setTitle:@"Release to refresh" forState:MJRefreshStatePulling];
    [header setTitle:@"Loading ..." forState:MJRefreshStateRefreshing];

    // Set font
    header.stateLabel.font = [UIFont systemFontOfSize:15];
    header.lastUpdatedTimeLabel.font = [UIFont systemFontOfSize:14];

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

}
#pragma mark --- "动画图片"样式的非block方法
-(void)animationRefresh
{
    [self getNetworkData:YES];
}

④ MJRefresh完全自定义化的下拉刷新上拉加载

④-1. 最终调用

- (void)viewDidLoad {
    [super viewDidLoad];
    //MJRefresh自定义刷新控件
    __weak typeof(self) weakSelf = self;
    self.tableView.mj_header = [MJDIYHeader headerWithRefreshingBlock:^{
        [weakSelf getNetworkData:YES];
    }];
}

④-2. 完全自定义的下拉刷新控件上拉暂还没看

更多信息请参看MJDIYHeade.m
更多信息请参看MJDIYHeade.m
更多信息请参看MJDIYHeade.m
(嘿嘿,我错了,当然不能这样忽悠过了,请往下继续......)

④-3. 【附】:MJRefresh自定义刷新控件步骤(just 3 步)重要

说明:最好参考MJDIYHeader.m来学习,就不一一截图说明
① 首先创建一个类(譬如MJDIYHeader),继承自MJRefreshHeader;
② 重写相关方法 【 在MJRefreshComponent.h中有下面的提示】

#pragma mark - 交给子类们去实现
/** 初始化 */
#pragma mark 在这里做一些初始化配置(比如添加子控件)
-(void)prepare NS_REQUIRES_SUPER;
/** 摆放子控件frame */
#pragma mark 在这里设置子控件的位置和尺寸
-(void)placeSubviews NS_REQUIRES_SUPER;
/** 当scrollView的contentOffset发生改变的时候调用 */
-(void)scrollViewContentOffsetDidChange:(NSDictionary *)change NS_REQUIRES_SUPER;
/** 当scrollView的contentSize发生改变的时候调用 */
-(void)scrollViewContentSizeDidChange:(NSDictionary *)change NS_REQUIRES_SUPER;
/** 当scrollView的拖拽状态发生改变的时候调用 */
-(void)scrollViewPanStateDidChange:(NSDictionary *)change NS_REQUIRES_SUPER;

③ 调用!OK啦!嘿嘿!

四. 最后,上面的刷新和加载这么简单,等等,还有一点注意呢

下拉刷新 --- 获取最新数据;
上拉加载 --- 获取更多数据;

四-1PPDemos中的刷新类都是继承自MJViewController的,所以在刷新和加载的类MJDefaultViewController,MJDefaultBlockViewController,MJAnimationImageViewController,MJCustomRefreshViewController中,只需要在viewDidLoad中调用即可;
四-2MJViewController.h 父类的,子类都可以用

//
//  MJViewController.h
//  MJDemos
//
//  Created by Abner on 16/6/13.
//  Copyright ? 2016年 PPAbner. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface MJViewController : UIViewController
{
    int page;
    BOOL isFirstCome; //第一次加载帖子时候不需要传入此关键字,当需要加载下一页时:需要传入加载上一页时返回值字段“maxtime”中的内容。
    int totalPage;//总页数
    BOOL isJuhua;//是否正在下拉刷新或者上拉加载。default NO。
}
@property(nonatomic,strong)NSMutableArray *pictures;
@property(nonatomic,strong)UITableView *tableView;
/** maxtime */
@property(nonatomic,copy)NSString *maxtime;
/**
 *  获取网络数据
 *  @param isRefresh 是否是下拉刷新
 */
-(void)getNetworkData:(BOOL)isRefresh;

@end

四-3MJViewController.m

//
//  MJViewController.m
//  MJDemos
//
//  Created by Abner on 16/6/13.
//  Copyright ? 2016年 PPAbner. All rights reserved.
//  

#import "MJViewController.h"
#import "MJPicture.h"

@interface MJViewController ()<UITableViewDelegate,UITableViewDataSource>

@end

@implementation MJViewController
-(void)viewWillDisappear:(BOOL)animated
{
    isFirstCome = YES;
}
//一进来就让自动刷新
-(void)viewWillAppear:(BOOL)animated
{
    [self.tableView.mj_header beginRefreshing];
}

- (void)viewDidLoad {
    [super viewDidLoad];
    page = 0;
    isFirstCome = YES;
    isJuhua = NO;
    [self creatUI];
}
/**
 *  停止刷新
 */
-(void)endRefresh{

    if (page == 0) {
        [self.tableView.mj_header endRefreshing];
    }
    [self.tableView.mj_footer endRefreshing];
}
-(void)creatUI
{
    self.tableView = [[UITableView alloc]initWithFrame:CGRectMake(0, 0, ScreenWidth, ScreenHeight) style:UITableViewStylePlain];
    self.tableView.delegate =self;
    self.tableView.dataSource =self;
    [self.view addSubview:self.tableView];
    self.tableView.tableFooterView = [UIView new];
    self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;

}
-(void)getNetworkData:(BOOL)isRefresh
{
    if (isRefresh) {
        page = 0;
        isFirstCome = YES;
    }else{
         page++;
    }

    NSString *url;
    if (isFirstCome) {
        url = [NSString stringWithFormat:MissBaisiImageUrl,@"",page];
    }else{
        url = [NSString stringWithFormat:MissBaisiImageUrl,self.maxtime,page];
    }
//    [HYBNetworking cacheGetRequest:YES shoulCachePost:YES];
    [HYBNetworking getWithUrl:url refreshCache:NO params:nil progress:^(int64_t bytesRead, int64_t totalBytesRead) {

    } success:^(id response) {
        PPLog(@"请求成功---%@",response);
        [self endRefresh];
        isJuhua = NO; //数据获取成功后,设置为NO

        NSDictionary *dict = (NSDictionary *)response;
        NSDictionary *infoDict = [dict objectForKey:@"info"];
        totalPage = (int)[infoDict objectForKey:@"page"];
        self.maxtime = [infoDict objectForKey:@"maxtime"];

        if (page == 0) {
            [_pictures removeAllObjects];
        }
        //判断是否有菊花正在加载,如果有,判断当前页数是不是大于最大页数,是的话就不让加载,直接return;(因为下拉的当前页永远是最小的,所以直接return)
        if (isJuhua) {
            if (page >= totalPage) {
                [self endRefresh];
            }
            return ;
        }
        //没有菊花正在加载,所以设置yes
        isJuhua = YES;
        //显然下面的方法适用于上拉加载更多
        if (page >= totalPage) {
            [self endRefresh];
            return;
        }
        //获取模型数组
        NSArray *pictureArr = [dict objectForKey:@"list"];
        for (NSDictionary *dic in pictureArr) {
            MJPicture *picture = [[MJPicture alloc]init];
            [picture setValuesForKeysWithDictionary:dic];
            [self.pictures addObject:picture];
        }
        [self.tableView reloadData];
        //获取成功一次就判断
        isFirstCome = NO;

    } fail:^(NSError *error) {
        PPLog(@"请求失败---%@",error);
    }];
}
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return _pictures.count;
}
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    UITableViewCell * cell = [tableView dequeueReusableCellWithIdentifier:@"cell"];
    if (!cell) {
        cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"cell"];
    }

    MJPicture * picture = _pictures[indexPath.row];
    cell.textLabel.text = picture.name;
    cell.detailTextLabel.text = picture.passtime;
    [cell.imageView sd_setImageWithURL:[NSURL URLWithString:picture.profile_image]];
    return cell;
}
- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

-(NSMutableArray *)pictures
{
    if (_pictures == nil) {
        _pictures = [NSMutableArray array];
    }
    return _pictures;
}

@end

结束语:最初自己在简书上转载别人的文章MJRefresh实现刷新(使用它的Block方法),看到有好多阅读量,并且还有小伙伴问我,自己也一直说更新,但没有更新,6月13号刚好有空,就去下了最新的MJRefresh准备自己写篇使用指导,下午快下班的时候遇到MJRefresh国际化的bug,在Issues了MJ后,bug被当晚解决了,14号早上也是收到MJ的邮件,非常开心!!!为开源点赞,也要做贡献!
最后附上一张图,iOS开发我的偶像吧,算是!激励自己而已!

时间: 2024-10-11 00:50:53

[最新版]MJRefresh解析与详细使用指导的相关文章

iOS-上拉刷新下拉加载 新版MJRefresh和EGOTableViewPullRefresh

上拉刷新下拉加载比较流行的两个第三方 MJRefresh和 EGOTableViewPullRefresh 一.最新版的MJRefresh 首先介绍M了个J的 最新版的MJRefresh 因为他的github里有详细介绍,话不多说上代码 [objc] view plain copy // //  ViewController.m //  新版MJRefresh Demo // //  Created by Jack_Jia on 16/1/19. //  Copyright ? 2016年 Ja

Linux Top 命令解析 比较详细--转

TOP是一个动态显示过程,即可以通过用户按键来不断刷新当前状态.如果在前台执行该命令,它将独占前台,直到用户终止该程序为止.比较准确的说,top命令提供了实时的对系统处理器的状态监视.它将显示系统中CPU最“敏感”的任务列表.该命令可以按CPU使用.内存使用和执行时间对任务进行排序:而且该命令的很多特性都可以通过交互式命令或者在个人定制文件中进行设定. top - 12:38:33 up 50 days, 23:15,  7 users,  load average: 60.58, 61.14,

HTML页面加载和解析流程详细介绍

浏览器加载和渲染html的顺序.如何加快HTML页面加载速度.HTML页面加载和解析流程等等,在本文将为大家详细介绍下,感兴趣的朋友不要错过 浏览器加载和渲染html的顺序 1. IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的. 2. 在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都已经下载完). 3. 如果遇到语义解释性的标签嵌入文件(JS脚本,CSS样式),那么此时IE的下载过程会启用单独连接进行下载. 4. 样式表在下载完成后,

mybatis源码-解析配置文件(三)之配置文件Configuration解析(超详细, 值得收藏)

1. 简介 1.1 系列内容 本系列文章讲解的是mybatis解析配置文件内部的逻辑, 即 Reader reader = Resources.getResourceAsReader("mybatis-config.xml"); SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(reader); 其背后的逻辑. 1.2 适合对象 了解如何使用 mybatis 来访问数据库.可参看<

Linux Top 命令解析 比较详细

TOP是一个动态显示过程,即可以通过用户按键来不断刷新当前状态.如果在前台执行该命令,它将独占前台,直到用户终止该程序为止.比较准确的说,top命令提供了实时的对系统处理器的状态监视.它将显示系统中CPU最“敏感”的任务列表.该命令可以按CPU使用.内存使用和执行时间对任务进行排序:而且该命令的很多特性都可以通过交互式命令或者在个人定制文件中进行设定. top - 12:38:33 up 50 days, 23:15,  7 users,  load average: 60.58, 61.14,

java Dom 解析 XML 详细解答

Dom4j遍历解析XML测试 近来老和XML打交道,不深挖不行了.. 这是一个Dom4j解析XML的例子,为做复杂递归处理前期所写的例子.涵盖了XML的解析方面大部分核心API. 环境: Dom4j-1.6.1 Dom4j解析需要XML需要的最小类库为: dom4j-1.6.1.jar jaxen-1.1-beta-6.jar 目标: 解析一个xml,输出所有的属性和元素值. 测试代码: XML文件: <?xml version="1.0" encoding="GBK&

python接口自动化测试 - configparser配置文件解析器详细使用

configparser简介 ConfigParser模块已在Python 3中重命名为configparser 该模块定义了ConfigParser类. ConfigParser类实现一种基本的配置文件解析器语言,该语言提供的结构类似于 .ini 文件中的结构 ini文件相关知识 键值对可用 = 或者 : 进行分隔 section 的名字是区分大小写的,而 option 的名字是不区分大小写的 键值对中头部和尾部的空白符会被去掉 值可以为多行 配置文件可以包含注释,注释以 # 或者 ; 为前缀

王爽《汇编语言》(第三版)实验8解析(超详细)

题目 分析程序,在运行前思考:这个程序是否能够正确返回? 运行之后再思考:为什么是这种结果? 通过这个程序加深对相关内容的理解. 贴入代码如下: assueme cs:codesg codesg segment mov ax,4c00h int 21h start: mov ax,0 s: nop nop mov di,offset s mov si,offset s2 mov ax,cs:[si] mov cs:[di],ax s0: jmp short s s1: mov ax,0 int

zend framework2 之入口文件详解以及原理解析

zend framework2 之入口文件详解 转载请注明出处,尊重原创:http://blog.csdn.net/a437629292/article/details/41545297,谢谢! 一.基本配置解析 1. 详细配置: 如下代码: <?php // 定义程序目录 defined('APPLICATION_PATH') || define('APPLICATION_PATH', realpath(dirname(__FILE__) . '/../application')); // D