zoukankan      html  css  js  c++  java
  • [最新版]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开发我的偶像吧,算是!激励自己而已!

  • 相关阅读:
    jQuery 核心
    Js实现内容向上无缝循环滚动
    浅析CSS postion属性值用法
    JS原生Ajax请求
    详解SQL集合运算
    Windows上开启IIS
    poj 4618 暴力
    hdu 4614 线段树
    poj 3468 线段树
    hdu 1698 线段树成段更新
  • 原文地址:https://www.cnblogs.com/Ghosgt/p/5992414.html
Copyright © 2011-2022 走看看