MJRefresh API深入了解(一)

简介: 在写这篇文章之前,我一直很纠结,到底要不要写呢?任何一个写iOS的程序员或者称为编程者,都应该对MJRefresh熟悉的不能再熟悉了。几乎每个人都用过,也知道如何使用,那么我又何必再在这里写下这篇文章呢?回答这个问题之前,我想问几个问题:1:MJRefresh 与header和Footer相关的类有几个?2:MJRefresh 中不同的Footer有什么区别?3:MJRefresh 中不同的Header有什么区别?4:如何自定义Footer和Header?如果你都能回答上来,那么这篇文章可以不用往下看了。

在写这篇文章之前,我一直很纠结,到底要不要写呢?任何一个写iOS的程序员或者称为编程者,都应该对MJRefresh熟悉的不能再熟悉了。几乎每个人都用过,也知道如何使用,那么我又何必再在这里写下这篇文章呢?回答这个问题之前,我想问几个问题:
1:MJRefresh 与header和Footer相关的类有几个?
2:MJRefresh 中不同的Footer有什么区别?
3:MJRefresh 中不同的Header有什么区别?
4:如何自定义Footer和Header?

如果你都能回答上来,那么这篇文章可以不用往下看了。如果有些许疑问,那么希望这篇浅显的文章可以给您提供些许帮助。
(MJRefresh下载地址:https://github.com/CoderMJLee/MJRefresh.git

一、MJRefresh目录简介

首先让我们浏览下,MJRefresh都有哪些类文件。


img_c35fe4f4e2be6cff5f6de5cf97cb55aa.png
image.png

这些文件大致分为四类:
辅助类(扩展类)
资源类(图片等)
自定义类(custom)
基础类 (base)

继续展开看:
Custom文件夹:


img_df8adad5d1b3cc71500d58bf12036d0a.png
image.png

这里又包括两个文件夹,Header和Footer,我们经常使用的也是这个里面的一些类文件。
继续展开:


img_b0a18ecd16bc1176f272d095cc3b8f0a.png
image.png

我们发现,这个文件夹中,Header有三种,Footer有六种。看到这里的时候,想必大家跟我一样有个疑问:

这么多种有什么区别呢?

先把疑问留在这里,我们继续往下看。

Base文件夹:


img_72466bb45ed07a312051a540bb5c8363.png
image.png

再次发现,base文件夹里还有很多个Header和Footer,这是怎么回事呢?

二、类之间的关系图

img_938c7b14575be79da01b5f0be76ec062.png
image.png

看完这个图之后,是不是基本理清楚了他们之间的关系呢?有没有又发现个小问题呢?

会回弹的刷新控件和会自动刷新的上拉刷新控件又是什么呢?

小练习:
看完上面的目录介绍以及结构图之后,如果觉得自己理解了或者有印象但不清晰的话,建议自己画一幅MJRefresh的主要刷新类之间关系图。下面是我自己画的:


img_7658d593db47484dde1a89f097304e77.png
image.png

如果你自己不参考任何东西就可以画出来的话,说明你真的对他们之间的关系弄清楚了。

三、详细介绍 Header和Footer

1、Header

  • MJRefreshHeader
    效果:
    MJRefreshHeader 没有文字和提示,不能弹回去,只能刷新一次。
    用法:
-(void)MJRefreshHeader_Default{
    __weak DownDefaultController * weakSelf = self;
    self.tableView.mj_header = [MJRefreshHeader headerWithRefreshingBlock:^{
        [weakSelf loadData];
        [weakSelf.tableView reloadData];
    }];
}

运行结果:

正常状态:


img_5ea63fdc201c8bf6b49ce1aa7fd6926f.png
image.png

下拉状态:


img_5eb77ad82605e05ca414b46f4fedbed6.png
image.png

下拉恢复之后状态:


img_fda586cab5197d5b8dbe8be10ea738fb.png
image.png

发现刷新结束之后,tableView上面多了一部分空白,使用xcode查看结构之后发现:


img_9b29a7fb75f5ec1591939b8e8b405a9b.png
image.png

上面多出了一个空白的View,就是MJRefreshHeader 。

  • MJRefreshNormalHeader
    效果:
    MJRefreshNormalHeader:最常用的那种刷新样式,有刷新状态、有时间、有上下指示的箭头。

用法:

-(void)MJRefreshNormalHeader_Normal{
    __weak DownDefaultController * weakSelf = self;
    self.tableView.mj_header = [MJRefreshNormalHeader headerWithRefreshingBlock:^{
        [weakSelf loadData];
        [weakSelf.tableView reloadData];
        [weakSelf endRefresh];
    }];
}

运行效果:
正常状态:


img_0a92f4f5f895e469f8f966b5d83653b3.png
image.png

下拉状态:


img_9da7d009cb2f1bc04ebb618964578617.png
image.png

刷新状态


img_6b0ca2a1279216f6d0a955dd28913a5d.png
image.png

结束状态:


img_102ed6d2549f894d9435a2b45c17bf74.png
image.png

这种样式应该是最常用的一种了。

  • MJRefreshGifHeader
    效果:
    MJRefreshGifHeader: 左边带动图的刷新,有时间,有状态。
    用法:
-(void)MJRefreshGifHeader_gif{
    __weak DownDefaultController * weakSelf = self;
    MJRefreshGifHeader * header =  [MJRefreshGifHeader headerWithRefreshingBlock:^{
        [weakSelf loadData];
        [weakSelf.tableView reloadData];
        [weakSelf endRefresh];
    }];
    
    NSMutableArray * imagesNormal = [NSMutableArray array];
    for (int i=1; i<51; i++) {
        //dropdown_anim__00060
        UIImage * image = [UIImage imageNamed:[NSString stringWithFormat:@"dropdown_anim__000%d",i]];
        [imagesNormal addObject:image];
    }
    
    NSMutableArray * imagesPulling = [NSMutableArray array];
    for (int i=51; i<61; i++) {
        //dropdown_anim__00060
        UIImage * image = [UIImage imageNamed:[NSString stringWithFormat:@"dropdown_anim__000%d",i]];
        [imagesPulling addObject:image];
    }
    
    NSMutableArray * imagesRefreshing = [NSMutableArray array];
    for (int i=1; i<4; i++) {
        //dropdown_loading_01
        UIImage * image = [UIImage imageNamed:[NSString stringWithFormat:@"dropdown_loading_0%d",i]];
        [imagesRefreshing addObject:image];
    }
    
    [header setImages:imagesNormal forState:MJRefreshStateIdle];
    [header setImages:imagesPulling forState:MJRefreshStatePulling];
    [header setImages:imagesRefreshing forState:MJRefreshStateRefreshing];
    self.tableView.mj_header = header;
}

运行效果:


img_36b1a7a3697e0482e11340e9fbbdfe7e.gif
QQ20171122-210207.gif
  • MJRefreshStateHeader
    效果:
    MJRefreshStateHeader: 隐藏上下箭头图片,只有状态和时间。
    用法:
-(void)MJRefreshStateHeader_state{
    __weak DownDefaultController * weakSelf = self;
    self.tableView.mj_header = [MJRefreshStateHeader headerWithRefreshingBlock:^{
        [weakSelf loadData];
        [weakSelf.tableView reloadData];
        [weakSelf endRefresh];
    }];
}

运行效果:


img_15257257891ef989e7eca7e7426e3439.gif
QQ20171122-210533.gif

可以看到,这里没有左边的箭头,其他功能都是与MJRefreshNormalHeader相同的。

到此为止,我们已经把Header的基本类都使用了一遍,也知道了他们的用法和运行效果。接下来呢,我们再使用上面的几个类,实现一些其他效果。

    • 把时间隐藏掉(MJRefreshNormalHeader)

用法:

//把时间隐藏掉
-(void)MJRefreshHeader_HideTime{
    __weak DownDefaultController * weakSelf = self;
    MJRefreshNormalHeader * header = [MJRefreshNormalHeader headerWithRefreshingBlock:^{
        [weakSelf loadData];
        [weakSelf.tableView reloadData];
        [weakSelf endRefresh];
    }];
    //隐藏时间
    header.lastUpdatedTimeLabel.hidden = YES;
    self.tableView.mj_header = header;
}

我们到MJRefreshNormalHeader的.h中看下,我们都可以取到哪些东西呢?


img_ff4f7d41d5ae94f60904efb0d4f7b27c.png
image.png

这里并没有时间和状态信息,只有一个旋转菊花的样式。不在这里,就在他的父类中。继续点击到MJRefreshStateHeader中去看看。


img_75fd6f550e622f75c351e7877dc02116.png
image.png

太好了,我们发现,在这个声明文件中,我们能够拿到


img_c2131b0dd032d7f31276025c191e300b.png
image.png

刷新时间和状态。那么我们就可以自由的操作它了。虽然是readonly的属性,但是我们仍然可以更改stateLabel的文字颜色等。

注意:readonly属性的含义
readonly是修饰的当前的这个属性,也就是stateLabel这个对象。针对stateLabel,你不可以给它重新赋值,也就是不能把另一个Label对象赋值给它。但是,stateLabel自己的属性,比如


img_42ebec1b8c4e2b9fad735757229caa26.png
image.png

等属性都是可以更改的。可不要搞错咯。

    • 自定义文字、颜色等
      用法:
-(void)MJRefreshHeader_CustomText{
    __weak DownDefaultController * weakSelf = self;
    MJRefreshNormalHeader * header = [MJRefreshNormalHeader headerWithRefreshingBlock:^{
        [weakSelf loadData];
        [weakSelf.tableView reloadData];
        [weakSelf endRefresh];
    }];
    //设置刷新状态的文字
    [header setTitle:@"正常状态" forState:MJRefreshStateIdle];
    [header setTitle:@"刷新状态" forState:MJRefreshStateRefreshing];
    [header setTitle:@"正在下拉状态" forState:MJRefreshStatePulling];
    
    //设置字体
    header.stateLabel.font = [UIFont systemFontOfSize:10];
    header.lastUpdatedTimeLabel.font = [UIFont systemFontOfSize:7];
    
    //设置文字颜色
    header.stateLabel.textColor = [UIColor redColor];
    header.lastUpdatedTimeLabel.textColor = [UIColor blueColor];
    
    self.tableView.mj_header = header;
}

运行效果:


img_342ae0698473a0c7223f8c7c6a13f3ad.gif
QQ20171122-212505.gif

这里,我们就是更改了它的文字颜色和大小。


img_b751cbbe0a562ad6837cd3c3ed851239.png
image.png

最后,我们介绍下自定义header.
大家直接看源码吧。
新建一个类CustomHeader继承自MJRefreshHeader。

.h文件:

#import "MJRefreshHeader.h"

@interface CustomHeader : MJRefreshHeader

@end

.m文件:

//
//  CustomHeader.m
//  TestMJ
//
//  Created by weiman on 2017/11/17.
//  Copyright © 2017年 weiman. All rights reserved.
//

#import "CustomHeader.h"

@interface CustomHeader()

@property(nonatomic,weak)UILabel * stateLabel;
@property(nonatomic,weak)UIImageView * imageV;
@property(nonatomic,weak)UIActivityIndicatorView *loading;

@end

@implementation CustomHeader
#pragma mark - 重写方法
#pragma mark 在这里做一些初始化配置(比如添加子控件)
-(void)prepare{
    [super prepare];
    //设置控件的高度
    self.mj_h = 50;
    
    //添加label
    UILabel * label = [[UILabel alloc] init];
    label.textColor = [UIColor redColor];
    label.font = [UIFont systemFontOfSize:15];
    label.textAlignment = NSTextAlignmentCenter;
    [self addSubview:label];
    self.stateLabel = label;
    
    //图片
    UIImageView * imageV = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 30, 30)];
    imageV.image = [UIImage imageNamed:@"refresh"];
    imageV.contentMode = UIViewContentModeScaleAspectFit;
    [self addSubview:imageV];
    self.imageV = imageV;
    
    //loading
    UIActivityIndicatorView * loading = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];
    [self addSubview:loading];
    self.loading = loading;
    
}

#pragma mark 在这里设置子控件的位置和尺寸
-(void)placeSubviews{
    [super placeSubviews];
    self.stateLabel.frame = self.bounds;
    self.imageV.frame = CGRectMake(50, self.mj_h*0.25, 30, 30);
    //self.imageV.center = CGPointMake(self.mj_w * 0.5, - self.imageV.mj_h + 20);
    self.loading.center = CGPointMake(self.mj_w-30, self.mj_h*0.5);
}

#pragma mark 监听scrollView的contentOffset改变
-(void)scrollViewContentOffsetDidChange:(NSDictionary *)change{
    [super scrollViewContentOffsetDidChange:change];
}

#pragma mark - 监听scrollView的contentSize改变
-(void)scrollViewContentSizeDidChange:(NSDictionary *)change{
    [super scrollViewContentSizeDidChange:change];
}

#pragma mark 监听scrollView的拖拽状态改变
-(void)scrollViewPanStateDidChange:(NSDictionary *)change{
    [super scrollViewPanStateDidChange:change];
}

#pragma mark - 监听控件的刷新状态
-(void)setState:(MJRefreshState)state{
    MJRefreshCheckState;
    switch (state) {
        case MJRefreshStateIdle:
        {
            [self.loading stopAnimating];
            self.stateLabel.text = @"下拉哟,哟乎乎";
        }
            break;
        case MJRefreshStatePulling:
        {
            [self.loading stopAnimating];
            self.stateLabel.text = @"赶紧放开我吧";
        }
            break;
        case MJRefreshStateRefreshing:
        {
            self.stateLabel.text = @"数据加载中";
            [self.loading startAnimating];
        }
            break;
  
        default:
            break;
    }
}

#pragma mark - 监听拖拽比例(控件被拖出来的比例)
-(void)setPullingPercent:(CGFloat)pullingPercent{
    [super setPullingPercent:pullingPercent];
    
    CGFloat red = 1.0 - pullingPercent * 0.5;
    CGFloat green = 0.5 - 0.5 * pullingPercent;
    CGFloat blue = 0.5 * pullingPercent;
    self.stateLabel.textColor = [UIColor colorWithRed:red green:green blue:blue alpha:1.0];
}

@end

运行效果:


img_f79980994f081f9e883eada3ec9876e8.gif
QQ20171122-213032.gif

到这里,我们了解了MJRefresh的Header的不同类之间的关系以及他们的使用方法和差别。如果您有时间,建议您自己花点时间自己敲一下,很简单的,加深记忆,也加深理解。如果您不想自己敲,也可以看我的源码,demo下载地址:
https://github.com/weiman152/TestMJ.git

欢迎大家评论,讨论,指出问题。

最后,祝大家开心。

目录
相关文章
|
4月前
|
Web App开发 JavaScript 前端开发
MediaRecorder API是什么,如何使用
MediaRecorder API是什么,如何使用
53 0
|
22天前
|
JavaScript API
Composition Api 与 Options Api 有什么区别?
Composition Api 与 Options Api 有什么区别?
13 0
|
22天前
|
前端开发 程序员 API
什么是API?谈对API的理解
什么是API?谈对API的理解
25 1
|
4月前
|
API
MediaRecorder API的使用
MediaRecorder API的使用
23 0
|
5月前
|
JavaScript API
Componsition API与Options API的对比
Componsition API与Options API的对比
23 0
|
5月前
|
移动开发 前端开发 JavaScript
关于canvas使用api汇总
关于canvas使用api汇总
|
API Android开发 iOS开发
|
API
MJRefresh (Footer ) API
接着上一章,我们继续了解MJRefresh。上一篇文章中我们了解了MJRefresh的主要类,以及他们之间的关系,了解了Header的各种使用方法。这一篇文章中,我们继续一起学习Footer的各种类型以及用法。
2487 0
|
API C# Windows

热门文章

最新文章