MJRefresh的简单使用

俗话说“工欲善其事,必先利其器”一个好的成熟的第三方库,是开发路上的一把利器,可节约很多开发成本。
先简单的介绍下上下拉刷新的原理:大部分的上下拉刷新控件,都是用contentInset实现的。默认情况下,如果一个UIScrollView在导航栏的正下方,那么它的contentInset是64,而contentOffset是-64。继续下拉的话,contentOffset就会越来越小,如果上滑,contentOffset就会增大,直到左上角达到屏幕的左上角时,contentOffset刚好为0。默认情况下,如果下拉一个UIScrollView,在松手之后,会弹回初始的位置(导航栏下方)。而大部分的下拉刷新控件,都是将自己放在UIScrollView的上方,起始y设置成负数,所以平时不会显示出来,只有下拉的时候才会出现,放开又会弹回去。然后在loading的时候,临时把contentInset增大,相当于把UIScrollView往下挤,于是下拉刷新的控件就会显示出来,然后刷新完成后,再把contentIset改回原来的值,实现回弹的效果。基本上,MJRefresh也是这么实现的。
上下拉刷新的方法有系统自带的UIRefreshControl,第三方库MJRefresh,JHRefresh这里就简单的介绍下MJRefresh的使用
1. 导入MJRefresh
pod 'MJRefresh'
2.导入头文件
#import "MJRefresh.h"
3.下拉刷新
默认状态效果

self.tableView.mj_header = [MJRefreshNormalHeader headerWithRefreshingTarget:self refreshingAction:@selector(loadNewData)];

gif动画效果

// 当下拉刷新时会调用loadNewData,在这个方法里用来刷新数据
MJRefreshGifHeader *header = [MJRefreshGifHeader headerWithRefreshingTarget:self refreshingAction:@selector(loadNewData)];
    
    UIImage * image1 = [UIImage imageNamed:@"loading01.png"];
    UIImage * image2 = [UIImage imageNamed:@"loading02.png"];
    UIImage * image3 = [UIImage imageNamed:@"loading03.png"];
    UIImage * image4 = [UIImage imageNamed:@"loading04.png"];
    // 设置普通状态的动画图片
    NSArray *idleImages = @[image1, image2, image3, image4];
    [header setImages:idleImages forState:MJRefreshStateIdle];
    
    // 设置即将刷新状态的动画图片(一松开就会刷新的状态)
    NSArray *pullingImages = @[image1, image2, image3, image4];
    [header setImages:pullingImages forState:MJRefreshStatePulling];
    
    // 设置正在刷新状态的动画图片
    NSArray *refreshingImages = @[image1, image2, image3, image4];
    [header setImages:refreshingImages forState:MJRefreshStateRefreshing];
    
    // 设置文字
    [header setTitle:@"Pull down to refresh" forState:MJRefreshStateIdle];
    [header setTitle:@"Release to refresh" forState:MJRefreshStatePulling];
    [header setTitle:@"Loading ..." forState:MJRefreshStateRefreshing];
    
    // 设置字体
    header.stateLabel.font = [UIFont systemFontOfSize:15];
    header.lastUpdatedTimeLabel.font = [UIFont systemFontOfSize:14];
    
    // 设置颜色
    header.stateLabel.textColor = [UIColor redColor];
    header.lastUpdatedTimeLabel.textColor = [UIColor blueColor];
    
    // 隐藏时间
    header.lastUpdatedTimeLabel.hidden = YES;
    // 设置 header
    self.tableView.mj_header = header;

loadNewData方法

-(void)loadNewData{
   // 这里可以获取数据,获取数据成功后tableView重新加载数据
    [self.tableView reloadData];
    // 结束刷新
    [self.tableView.mj_header endRefreshing];
}

4.上拉刷新
默认状态效果

self.tableView.mj_footer = [MJRefreshAutoNormalFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadMoreTopic)];

gif动画效果

MJRefreshAutoGifFooter *footer = [MJRefreshAutoGifFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadMoreTopic)];
    
    // 设置普通状态的动画图片
    NSArray *idleImages1 = @[image1, image2, image3, image4];
    [footer setImages:idleImages1 forState:MJRefreshStateIdle];
    
    // 设置即将刷新状态的动画图片(一松开就会刷新的状态)
    NSArray *pullingImages1 = @[image1, image2, image3, image4];
    
    [footer setImages:pullingImages1 forState:MJRefreshStatePulling];
    
    // 设置正在刷新状态的动画图片
    NSArray *refreshingImages1 = @[image1, image2, image3, image4];
    [footer setImages:refreshingImages1 forState:MJRefreshStateRefreshing];
    
    
    // 设置文字
    [footer setTitle:@"Click or drag up to refresh" forState:MJRefreshStateIdle];
    [footer setTitle:@"Loading more ..." forState:MJRefreshStateRefreshing];
    [footer setTitle:@"No more data" forState:MJRefreshStateNoMoreData];
    
    // 设置字体
    footer.stateLabel.font = [UIFont systemFontOfSize:17];
    
    // 设置颜色
    footer.stateLabel.textColor = [UIColor blueColor];
    

    // 隐藏刷新状态的文字
   //    footer.refreshingTitleHidden = YES;
    // 如果没有上面的方法,就用footer.stateLabel.hidden = YES;
    
    // 设置尾部
    self.tableView.mj_footer = footer;

loadMoreTopic方法

-(void)loadMoreTopic{
    // 这里获取数据,获取成功后tableView再重新加载数据
    [self.tableView reloadData];
    // 结束刷新
    [self.tableView.mj_footer endRefreshing];
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,098评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,213评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,960评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,519评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,512评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,533评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,914评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,574评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,804评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,563评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,644评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,350评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,933评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,908评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,146评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,847评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,361评论 2 342

推荐阅读更多精彩内容