在写这篇文章之前,我一直很纠结,到底要不要写呢?任何一个写iOS的程序员或者称为编程者,都应该对MJRefresh熟悉的不能再熟悉了。几乎每个人都用过,也知道如何使用,那么我又何必再在这里写下这篇文章呢?回答这个问题之前,我想问几个问题:
1:MJRefresh 与header和Footer相关的类有几个?
2:MJRefresh 中不同的Footer有什么区别?
3:MJRefresh 中不同的Header有什么区别?
4:如何自定义Footer和Header?
如果你都能回答上来,那么这篇文章可以不用往下看了。如果有些许疑问,那么希望这篇浅显的文章可以给您提供些许帮助。
(MJRefresh下载地址:https://github.com/CoderMJLee/MJRefresh.git)
一、MJRefresh目录简介
首先让我们浏览下,MJRefresh都有哪些类文件。
这些文件大致分为四类:
辅助类(扩展类)
资源类(图片等)
自定义类(custom)
基础类 (base)
继续展开看:
Custom文件夹:
这里又包括两个文件夹,Header和Footer,我们经常使用的也是这个里面的一些类文件。
继续展开:
我们发现,这个文件夹中,Header有三种,Footer有六种。看到这里的时候,想必大家跟我一样有个疑问:
这么多种有什么区别呢?
先把疑问留在这里,我们继续往下看。
Base文件夹:
再次发现,base文件夹里还有很多个Header和Footer,这是怎么回事呢?
二、类之间的关系图
看完这个图之后,是不是基本理清楚了他们之间的关系呢?有没有又发现个小问题呢?
会回弹的刷新控件和会自动刷新的上拉刷新控件又是什么呢?
小练习:
看完上面的目录介绍以及结构图之后,如果觉得自己理解了或者有印象但不清晰的话,建议自己画一幅MJRefresh的主要刷新类之间关系图。下面是我自己画的:
如果你自己不参考任何东西就可以画出来的话,说明你真的对他们之间的关系弄清楚了。
三、详细介绍 Header和Footer
1、Header
- MJRefreshHeader
效果:
MJRefreshHeader 没有文字和提示,不能弹回去,只能刷新一次。
用法:
-(void)MJRefreshHeader_Default{
__weak DownDefaultController * weakSelf = self;
self.tableView.mj_header = [MJRefreshHeader headerWithRefreshingBlock:^{
[weakSelf loadData];
[weakSelf.tableView reloadData];
}];
}
运行结果:
正常状态:
下拉状态:
下拉恢复之后状态:
发现刷新结束之后,tableView上面多了一部分空白,使用xcode查看结构之后发现:
上面多出了一个空白的View,就是MJRefreshHeader 。
- MJRefreshNormalHeader
效果:
MJRefreshNormalHeader:最常用的那种刷新样式,有刷新状态、有时间、有上下指示的箭头。
用法:
-(void)MJRefreshNormalHeader_Normal{
__weak DownDefaultController * weakSelf = self;
self.tableView.mj_header = [MJRefreshNormalHeader headerWithRefreshingBlock:^{
[weakSelf loadData];
[weakSelf.tableView reloadData];
[weakSelf endRefresh];
}];
}
运行效果:
正常状态:
下拉状态:
刷新状态
结束状态:
这种样式应该是最常用的一种了。
- 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;
}
运行效果:
- MJRefreshStateHeader
效果:
MJRefreshStateHeader: 隐藏上下箭头图片,只有状态和时间。
用法:
-(void)MJRefreshStateHeader_state{
__weak DownDefaultController * weakSelf = self;
self.tableView.mj_header = [MJRefreshStateHeader headerWithRefreshingBlock:^{
[weakSelf loadData];
[weakSelf.tableView reloadData];
[weakSelf endRefresh];
}];
}
运行效果:
可以看到,这里没有左边的箭头,其他功能都是与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中看下,我们都可以取到哪些东西呢?
这里并没有时间和状态信息,只有一个旋转菊花的样式。不在这里,就在他的父类中。继续点击到MJRefreshStateHeader中去看看。
太好了,我们发现,在这个声明文件中,我们能够拿到
刷新时间和状态。那么我们就可以自由的操作它了。虽然是readonly的属性,但是我们仍然可以更改stateLabel的文字颜色等。
注意:readonly属性的含义
readonly是修饰的当前的这个属性,也就是stateLabel这个对象。针对stateLabel,你不可以给它重新赋值,也就是不能把另一个Label对象赋值给它。但是,stateLabel自己的属性,比如
等属性都是可以更改的。可不要搞错咯。
-
- 自定义文字、颜色等
用法:
- 自定义文字、颜色等
-(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;
}
运行效果:
这里,我们就是更改了它的文字颜色和大小。
最后,我们介绍下自定义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
运行效果:
到这里,我们了解了MJRefresh的Header的不同类之间的关系以及他们的使用方法和差别。如果您有时间,建议您自己花点时间自己敲一下,很简单的,加深记忆,也加深理解。如果您不想自己敲,也可以看我的源码,demo下载地址:
https://github.com/weiman152/TestMJ.git
欢迎大家评论,讨论,指出问题。
最后,祝大家开心。