iOS MJRefresh的使用方式

作者: 光之盐汽水 | 来源:发表于2018-06-29 10:30 被阅读2348次

    1、导入MJRefresh到项目中

    • cocoapods导入:pod 'MJRefresh'
    • 将MJRefresh文件夹中的所有内容拖拽进项目中。
      两种方式任选其一。使用时别忘记引入头文件:#import "MJRefresh.h"

    2、UITableView下拉刷新和上拉刷新
    2.1 默认下拉界面

        // 设置回调(一旦进入刷新状态就会调用这个refreshingBlock)
        self.tableView.mj_header = [MJRefreshNormalHeader headerWithRefreshingBlock:^{
            //进行数据刷新操作
        }];
        
        // 马上进入刷新状态
        [self.tableView.mj_header beginRefreshing];
    

    2.2 下拉刷新设置动画图片

        // 设置回调(一旦进入刷新状态,就调用target的action,也就是调用self的loadNewData方法)
        self.tableView.mj_header = [MJChiBaoZiHeader headerWithRefreshingTarget:self refreshingAction:@selector(loadNewData)];
        
        // 马上进入刷新状态
        [self.tableView.mj_header beginRefreshing];
    

    ps:MJChiBaoZiHeader是继承自MJRefreshGifHeader,在这里面可以自定义加载动画图片

    #import "MJChiBaoZiHeader.h"
    
    @implementation MJChiBaoZiHeader
    #pragma mark - 重写方法
    #pragma mark 基本设置
    - (void)prepare
    {
        [super prepare];
        
        // 设置普通状态的动画图片
        NSMutableArray *idleImages = [NSMutableArray array];
        for (NSUInteger i = 1; i<=60; i++) {
            UIImage *image = [UIImage imageNamed:[NSString stringWithFormat:@"dropdown_anim__000%zd", i]];
            [idleImages addObject:image];
        }
         [self setImages:idleImages forState:MJRefreshStateIdle];
        
        // 设置即将刷新状态的动画图片(一松开就会刷新的状态)
        NSMutableArray *refreshingImages = [NSMutableArray array];
        for (NSUInteger i = 1; i<=3; i++) {
            UIImage *image = [UIImage imageNamed:[NSString stringWithFormat:@"dropdown_loading_0%zd", i]];
            [refreshingImages addObject:image];
        }
        [self setImages:refreshingImages forState:MJRefreshStatePulling];
        
        // 设置正在刷新状态的动画图片
        [self setImages:refreshingImages forState:MJRefreshStateRefreshing];
    }
    @end
    

    2.3 默认下拉刷新+隐藏时间

        // 设置回调(一旦进入刷新状态,就调用target的action,也就是调用self的loadNewData方法)
        MJRefreshNormalHeader *header = [MJRefreshNormalHeader headerWithRefreshingTarget:self refreshingAction:@selector(loadNewData)];
        
        // 设置自动切换透明度(在导航栏下面自动隐藏)
        header.automaticallyChangeAlpha = YES;
        
        // 隐藏时间
        header.lastUpdatedTimeLabel.hidden = YES;
        
        // 马上进入刷新状态
        [header beginRefreshing];
        
        // 设置header
        self.tableView.mj_header = header;
    

    2.4 默认下拉刷新+隐藏时间、隐藏状态

        // 设置回调(一旦进入刷新状态,就调用target的action,也就是调用self的loadNewData方法)
        MJChiBaoZiHeader *header = [MJChiBaoZiHeader headerWithRefreshingTarget:self refreshingAction:@selector(loadNewData)];
        
        // 隐藏时间
        header.lastUpdatedTimeLabel.hidden = YES;
    
        // 隐藏状态
        header.stateLabel.hidden = YES;
        
        // 马上进入刷新状态
        [header beginRefreshing];
        
        // 设置header
        self.tableView.mj_header = header;
    

    2.5 默认下拉刷新+自定义文字

        // 设置回调(一旦进入刷新状态,就调用target的action,也就是调用self的loadNewData方法)
        MJRefreshNormalHeader *header = [MJRefreshNormalHeader headerWithRefreshingTarget:self refreshingAction:@selector(loadNewData)];
        
        // 设置文字
        [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 beginRefreshing];
        
        // 设置刷新控件
        self.tableView.mj_header = header;
    

    2.6 下拉刷新+自定义header

        // 设置回调(一旦进入刷新状态,就调用target的action,也就是调用self的loadNewData方法)
        self.tableView.mj_header = [MJDIYHeader headerWithRefreshingTarget:self refreshingAction:@selector(loadNewData)];
        [self.tableView.mj_header beginRefreshing];
    

    ps: MJDIYHeader是继承自MJRefreshHeader,在这里面进行自定义header视图的操作

    #import "MJDIYHeader.h"
    
    @interface MJDIYHeader()
    //在这里声明子控件的全局变量
    @end
    
    @implementation MJDIYHeader
    #pragma mark - 重写方法
    #pragma mark 在这里做一些初始化配置(比如添加子控件)
    - (void)prepare
    {
        [super prepare];
        
        // 设置控件的高度
        self.mj_h = 50;
        
        // 在这里添加子控件
    }
    
    #pragma mark 在这里设置子控件的位置和尺寸
    - (void)placeSubviews
    {
        [super placeSubviews];
    
        //在这里设置子控件的位置和尺寸
    }
    
    #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:
                 /** 普通闲置状态 */
                //在这里设置子控件在普通闲置状态的界面展示
                break;
            case MJRefreshStatePulling:
                /** 松开就可以进行刷新的状态 */
                //在这里设置子控件在松开就可以进行刷新的状态的界面展示
                break;
            case MJRefreshStateRefreshing:
                /** 正在刷新中的状态 */
                //在这里设置子控件在正在刷新中的状态的界面展示
                break;
            default:
                break;
        }
    }
    
    #pragma mark 监听拖拽比例(控件被拖出来的比例)
    - (void)setPullingPercent:(CGFloat)pullingPercent
    {
        [super setPullingPercent:pullingPercent];
    }
    
    @end
    

    2.7 上拉刷新 默认界面

        // 设置回调(一旦进入刷新状态就会调用这个refreshingBlock)
        self.tableView.mj_footer = [MJRefreshAutoNormalFooter footerWithRefreshingBlock:^{
            [weakSelf loadMoreData];
        }];
    

    2.8 上拉刷新+设置动画

        // 设置回调(一旦进入刷新状态,就调用target的action,也就是调用self的loadMoreData方法)
        self.tableView.mj_footer = [MJChiBaoZiFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadMoreData)];
    
    #import "MJChiBaoZiFooter.h"
    
    @implementation MJChiBaoZiFooter
    #pragma mark - 重写方法
    #pragma mark 基本设置
    - (void)prepare
    {
        [super prepare];
        
        // 设置正在刷新状态的动画图片
        NSMutableArray *refreshingImages = [NSMutableArray array];
        for (NSUInteger i = 1; i<=3; i++) {
            UIImage *image = [UIImage imageNamed:[NSString stringWithFormat:@"dropdown_loading_0%zd", i]];
            [refreshingImages addObject:image];
        }
        [self setImages:refreshingImages forState:MJRefreshStateRefreshing];
    }
    @end
    

    2.9 上拉刷新 隐藏刷新状态的文字

        // 设置回调(一旦进入刷新状态,就调用target的action,也就是调用self的loadMoreData方法)
        MJChiBaoZiFooter *footer = [MJChiBaoZiFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadMoreData)];
        
        // 当上拉刷新控件出现50%时(出现一半),就会自动刷新。这个值默认是1.0(也就是上拉刷新100%出现时,才会自动刷新)
        //    footer.triggerAutomaticallyRefreshPercent = 0.5;
        
        // 隐藏刷新状态的文字
        footer.refreshingTitleHidden = YES;
        
        // 设置footer
        self.tableView.mj_footer = footer;
    

    2.10 上拉刷新 禁止自动加载

        // 设置回调(一旦进入刷新状态,就调用target的action,也就是调用self的loadMoreData方法)
        MJRefreshAutoNormalFooter *footer = [MJRefreshAutoNormalFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadMoreData)];
        
        // 禁止自动加载
        footer.automaticallyRefresh = NO;
        
        // 设置footer
        self.tableView.mj_footer = footer;
    

    2.11 上拉刷新 自定义文字

        // 设置回调(一旦进入刷新状态,就调用target的action,也就是调用self的loadMoreData方法)
        MJRefreshAutoNormalFooter *footer = [MJRefreshAutoNormalFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadMoreData)];
        
        // 设置文字
        [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
        self.tableView.mj_footer = footer;
    

    3、UIWebView的下拉刷新和上拉刷新

    #pragma mark - 示例
    - (void)example31
    {
        __weak UIWebView *webView = self.webView;
        webView.delegate = self;
        
        __weak UIScrollView *scrollView = self.webView.scrollView;
        
        // 添加下拉刷新控件
        scrollView.mj_header= [MJRefreshNormalHeader headerWithRefreshingBlock:^{
            [webView reload];
        }];
        
        // 如果是上拉刷新,就以此类推
    }
    
    #pragma mark - webViewDelegate
    - (void)webViewDidFinishLoad:(nonnull UIWebView *)webView
    {
        [self.webView.scrollView.mj_header endRefreshing];
    }
    

    4、UICollectionView的下拉刷新和上拉刷新

    #pragma mark - 示例
    #pragma mark UICollectionView 上下拉刷新
    - (void)example21
    {
        __weak __typeof(self) weakSelf = self;
        
        // 下拉刷新
        self.collectionView.mj_header= [MJRefreshNormalHeader headerWithRefreshingBlock:^{
            // 增加5条假数据
            for (int i = 0; i<10; i++) {
                [weakSelf.colors insertObject:MJRandomColor atIndex:0];
            }
            
            // 模拟延迟加载数据,因此2秒后才调用(真实开发中,可以移除这段gcd代码)
            dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(MJDuration * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
                [weakSelf.collectionView reloadData];
                
                // 结束刷新
                [weakSelf.collectionView.mj_header endRefreshing];
            });
        }];
        [self.collectionView.mj_header beginRefreshing];
    
        // 上拉刷新
        self.collectionView.mj_footer = [MJRefreshBackNormalFooter footerWithRefreshingBlock:^{
            // 增加5条假数据
            for (int i = 0; i<5; i++) {
                [weakSelf.colors addObject:MJRandomColor];
            }
            
            // 模拟延迟加载数据,因此2秒后才调用(真实开发中,可以移除这段gcd代码)
            dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(MJDuration * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
                [weakSelf.collectionView reloadData];
                
                // 结束刷新
                [weakSelf.collectionView.mj_footer endRefreshing];
            });
        }];
        // 默认先隐藏footer
        self.collectionView.mj_footer.hidden = YES;
    }
    

    相关文章

      网友评论

        本文标题:iOS MJRefresh的使用方式

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