美文网首页
MJRefresh的简单使用

MJRefresh的简单使用

作者: 鄂北 | 来源:发表于2017-09-12 11:29 被阅读281次

    俗话说“工欲善其事,必先利其器”一个好的成熟的第三方库,是开发路上的一把利器,可节约很多开发成本。
    先简单的介绍下上下拉刷新的原理:大部分的上下拉刷新控件,都是用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];
    }
    

    相关文章

      网友评论

          本文标题:MJRefresh的简单使用

          本文链接:https://www.haomeiwen.com/subject/zbzqsxtx.html