在写这篇文章之前,我一直很纠结,到底要不要写呢?任何一个写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](https://i-blog.csdnimg.cn/blog_migrate/61adadc5688096e7ceefe87d115eab97.png)
这些文件大致分为四类:
辅助类(扩展类)
资源类(图片等)
自定义类(custom)
基础类 (base)
继续展开看:
Custom文件夹:
![img_df8adad5d1b3cc71500d58bf12036d0a.png](https://i-blog.csdnimg.cn/blog_migrate/353220993f40fb582d504b443f2fb767.png)
这里又包括两个文件夹,Header和Footer,我们经常使用的也是这个里面的一些类文件。
继续展开:
![img_b0a18ecd16bc1176f272d095cc3b8f0a.png](https://i-blog.csdnimg.cn/blog_migrate/26252676fcf32177a5bf3103a47ec5f3.png)
我们发现,这个文件夹中,Header有三种,Footer有六种。看到这里的时候,想必大家跟我一样有个疑问:
这么多种有什么区别呢?
先把疑问留在这里,我们继续往下看。
Base文件夹:
![img_72466bb45ed07a312051a540bb5c8363.png](https://i-blog.csdnimg.cn/blog_migrate/3a6f1ee3d2eb8dc7e3d6e0f2f5dd28d5.png)
再次发现,base文件夹里还有很多个Header和Footer,这是怎么回事呢?
二、类之间的关系图
![img_938c7b14575be79da01b5f0be76ec062.png](https://i-blog.csdnimg.cn/blog_migrate/dfb4e57761882ee1316c0583fdd7aad5.png)
看完这个图之后,是不是基本理清楚了他们之间的关系呢?有没有又发现个小问题呢?
会回弹的刷新控件和会自动刷新的上拉刷新控件又是什么呢?
小练习:
看完上面的目录介绍以及结构图之后,如果觉得自己理解了或者有印象但不清晰的话,建议自己画一幅MJRefresh的主要刷新类之间关系图。下面是我自己画的:
![img_7658d593db47484dde1a89f097304e77.png](https://i-blog.csdnimg.cn/blog_migrate/be69030426312295c3b04997d9e1928f.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](https://i-blog.csdnimg.cn/blog_migrate/83e9d7b8b2fc9c91c0d9926958a09bd4.png)
下拉状态:
![img_5eb77ad82605e05ca414b46f4fedbed6.png](https://i-blog.csdnimg.cn/blog_migrate/85f08e4beb6f88610e319278a9ba336f.png)
下拉恢复之后状态:
![img_fda586cab5197d5b8dbe8be10ea738fb.png](https://i-blog.csdnimg.cn/blog_migrate/e220a5673d07b1ccfde27d548b99dbcb.png)
发现刷新结束之后,tableView上面多了一部分空白,使用xcode查看结构之后发现:
![img_9b29a7fb75f5ec1591939b8e8b405a9b.png](https://i-blog.csdnimg.cn/blog_migrate/8a6336cf2c92c7d525797599a15f5ba1.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](https://i-blog.csdnimg.cn/blog_migrate/4c049cd3e8ee61dc65881d9ee10bfde6.png)
下拉状态:
![img_9da7d009cb2f1bc04ebb618964578617.png](https://i-blog.csdnimg.cn/blog_migrate/af14e2661faca8981db08a9250288999.png)
刷新状态
![img_6b0ca2a1279216f6d0a955dd28913a5d.png](https://i-blog.csdnimg.cn/blog_migrate/22f290eab94dc7b49170058458e58387.png)
结束状态:
![img_102ed6d2549f894d9435a2b45c17bf74.png](https://i-blog.csdnimg.cn/blog_migrate/763b9285177163971bdba8f08eb904bc.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](https://i-blog.csdnimg.cn/blog_migrate/4a1cdeb8678e3dbc7304e7c409012d9d.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](https://i-blog.csdnimg.cn/blog_migrate/471590c36d113af18ebed1281be00acc.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](https://i-blog.csdnimg.cn/blog_migrate/86ed781ce0ef90fe6da89bcf3224f1c2.png)
这里并没有时间和状态信息,只有一个旋转菊花的样式。不在这里,就在他的父类中。继续点击到MJRefreshStateHeader中去看看。
![img_75fd6f550e622f75c351e7877dc02116.png](https://i-blog.csdnimg.cn/blog_migrate/1acb2f226f0421faa859b1c0cae11aad.png)
太好了,我们发现,在这个声明文件中,我们能够拿到
![img_c2131b0dd032d7f31276025c191e300b.png](https://i-blog.csdnimg.cn/blog_migrate/48cdca169ab28c023abeb1acb6317192.png)
刷新时间和状态。那么我们就可以自由的操作它了。虽然是readonly的属性,但是我们仍然可以更改stateLabel的文字颜色等。
注意:readonly属性的含义
readonly是修饰的当前的这个属性,也就是stateLabel这个对象。针对stateLabel,你不可以给它重新赋值,也就是不能把另一个Label对象赋值给它。但是,stateLabel自己的属性,比如
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](https://i-blog.csdnimg.cn/blog_migrate/e504e77cadb157696f88ea229e6a3958.gif)
这里,我们就是更改了它的文字颜色和大小。
![img_b751cbbe0a562ad6837cd3c3ed851239.png](https://i-blog.csdnimg.cn/blog_migrate/379df8d8d3affc4c79a34373bde2cfea.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](https://i-blog.csdnimg.cn/blog_migrate/64c280027d1bdeb603bba67c90171c6e.gif)
到这里,我们了解了MJRefresh的Header的不同类之间的关系以及他们的使用方法和差别。如果您有时间,建议您自己花点时间自己敲一下,很简单的,加深记忆,也加深理解。如果您不想自己敲,也可以看我的源码,demo下载地址:
https://github.com/weiman152/TestMJ.git
欢迎大家评论,讨论,指出问题。
最后,祝大家开心。