美文网首页藤原とうふ店(自家用)
MJRefresh——下拉刷新控件

MJRefresh——下拉刷新控件

作者: 独木舟的木 | 来源:发表于2017-07-24 15:20 被阅读381次
    (logo)

    MJRefresh

    • An easy way to use pull-to-refresh——实现下拉刷新控件

    Support what kinds of controls to refresh

    • UIScrollViewUITableViewUICollectionViewUIWebView

    How to use MJRefresh

    • Installation with CocoaPods:pod 'MJRefresh'
    • Manual import:
      • Drag All files in the MJRefresh folder to project
      • Import the main file:#import "MJRefresh.h"
    Base                        Custom
    MJRefresh.bundle            MJRefresh.h
    MJRefreshConst.h            MJRefreshConst.m
    UIScrollView+MJExtension.h  UIScrollView+MJExtension.m
    UIScrollView+MJRefresh.h    UIScrollView+MJRefresh.m
    UIView+MJExtension.h        UIView+MJExtension.m
    

    More than hundreds of Apps are using MJRefresh

    The Class Structure Chart of MJRefresh

    • The class of red text in the chart:You can use them directly

      • The drop-down refresh control types ——下拉刷新类型
        • Normal:MJRefreshNormalHeader
        • Gif:MJRefreshGifHeader
      • The pull to refresh control types ——上拉刷新类型
        • Auto refresh
          • Normal:MJRefreshAutoNormalFooter
          • Gif:MJRefreshAutoGifFooter
        • Auto Back
          • Normal:MJRefreshBackNormalFooter
          • Gif:MJRefreshBackGifFooter
    • The class of non-red text in the chart:For inheritance,to use DIY the control of refresh

    • About how to DIY the control of refresh,You can refer the Class in below Chart

    MJRefreshComponent.h

    /** The Base Class of refresh control */
    @interface MJRefreshComponent : UIView
    #pragma mark -  Control the state of Refresh 
    
    /** BeginRefreshing */
    - (void)beginRefreshing;
    /** EndRefreshing */
    - (void)endRefreshing; 
    /** IsRefreshing */
    - (BOOL)isRefreshing;
    
    #pragma mark - Other
    /** According to the drag ratio to change alpha automatically */
    // 根据拖动比例自动更改alpha
    // 设置自动切换透明度(在导航栏下面自动隐藏)
    @property (assign, nonatomic, getter=isAutomaticallyChangeAlpha) BOOL automaticallyChangeAlpha;
    @end
    

    MJRefreshHeader.h

    @interface MJRefreshHeader : MJRefreshComponent
    /** Creat header */
    + (instancetype)headerWithRefreshingBlock:(MJRefreshComponentRefreshingBlock)refreshingBlock;
    /** Creat header */
    + (instancetype)headerWithRefreshingTarget:(id)target refreshingAction:(SEL)action;
    
    /** This key is used to storage the time that the last time of drown-down successfully */
    /** 该关键字用于存储上次成功下拉刷新的时间*/
    @property (copy, nonatomic) NSString *lastUpdatedTimeKey;
    /** The last time of drown-down successfully */
    @property (strong, nonatomic, readonly) NSDate *lastUpdatedTime;
    
    /** Ignored scrollView contentInset top */
    @property (assign, nonatomic) CGFloat ignoredScrollViewContentInsetTop;
    @end
    

    MJRefreshFooter.h

    @interface MJRefreshFooter : MJRefreshComponent
    /** Creat footer */
    + (instancetype)footerWithRefreshingBlock:(MJRefreshComponentRefreshingBlock)refreshingBlock;
    /** Creat footer */
    + (instancetype)footerWithRefreshingTarget:(id)target refreshingAction:(SEL)action;
    
    /** NoticeNoMoreData */
    - (void)noticeNoMoreData;
    /** ResetNoMoreData(Clear the status of NoMoreData ) */
    - (void)resetNoMoreData;
    
    /** Ignored scrollView contentInset bottom */
    @property (assign, nonatomic) CGFloat ignoredScrollViewContentInsetBottom;
    
    /** Automaticlly show or hidden by the count of data(Show-have data,Hidden- no data) */
    @property (assign, nonatomic) BOOL automaticallyHidden;
    @end
    

    MJRefreshAutoFooter.h

    @interface MJRefreshAutoFooter : MJRefreshFooter
    /** Is Automatically Refresh(Default is Yes) */
    @property (assign, nonatomic, getter=isAutomaticallyRefresh) BOOL automaticallyRefresh;
    
    /** When there is much at the bottom of the control is automatically refresh(Default is 1.0,Is at the bottom of the control appears in full, will refresh automatically) */
    @property (assign, nonatomic) CGFloat triggerAutomaticallyRefreshPercent;
    @end
    

    Reference

    * Due to there are more functions of this framework,Don't write specific text describe its usage
    * You can directly reference examples MJTableViewController、MJCollectionViewController、MJWebViewController,More intuitive and fast.
    

    The drop-down refresh 01-Default

    self.tableView.header = [MJRefreshNormalHeader headerWithRefreshingBlock:^{
       // 设置回调(一旦进入刷新状态就会调用这个refreshingBlock)
    }];
    或
    
    self.tableView.header = [MJRefreshNormalHeader headerWithRefreshingTarget:self refreshingAction:@selector(loadNewData)];
    
    // 马上进入刷新状态
    [self.tableView.mj_header beginRefreshing];
    
    //...
    // 获取到数据后刷新列表
    [self.tableView reloadData];
    // 拿到当前的下拉刷新控件,结束刷新状态
    [self.tableView.mj_header endRefreshing];
    
    (下拉刷新01-普通)

    The drop-down refresh 02-Animation image

    // 设置回调(一旦进入刷新状态,就调用target的action,也就是调用self的loadNewData方法)
    MJRefreshGifHeader *header = [MJRefreshGifHeader headerWithRefreshingTarget:self refreshingAction:@selector(loadNewData)];
    
    // 设置普通状态的动画图片
    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];
    }
     [header 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];
    }
    [header setImages:refreshingImages forState:MJRefreshStatePulling];
    
    // 设置正在刷新状态的动画图片
    [header setImages:refreshingImages forState:MJRefreshStateRefreshing];
    
    // 设置header
    self.tableView.mj_header = header;
    
    (下拉刷新02-动画图片)

    The drop-down refresh 03-Hide the time

    // 隐藏时间
    header.lastUpdatedTimeLabel.hidden = YES;
    
    (下拉刷新03-隐藏时间)

    The drop-down refresh 04-Hide status and time

    // 隐藏时间
    header.lastUpdatedTimeLabel.hidden = YES;
    
    // 隐藏状态
    header.stateLabel.hidden = YES;
    
    (下拉刷新04-隐藏状态和时间)

    The drop-down refresh 05-DIY title

    // 设置回调(一旦进入刷新状态,就调用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;
    
    (下拉刷新05-自定义文字)

    The drop-down refresh 06-DIY the control of refresh

    self.tableView.mj_header = [MJDIYHeader headerWithRefreshingTarget:self refreshingAction:@selector(loadNewData)];
    // Implementation reference to MJDIYHeader.h和MJDIYHeader.m
    
    (下拉刷新06-自定义刷新控件)

    The pull to refresh 01-Default

    self.tableView.mj_footer = [MJRefreshAutoNormalFooter footerWithRefreshingBlock:^{
        //Call this Block When enter the refresh status automatically
    }];
    或
    // 设置回调(一旦进入刷新状态,就调用target的action,也就是调用self的loadNewData方法)
    self.tableView.mj_footer = [MJRefreshAutoNormalFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadMoreData)];
    
    (上拉刷新01-默认)

    The pull to refresh 02-Animation image

    // 设置回调(一旦进入刷新状态,就调用target的action,也就是调用self的loadMoreData方法)
    MJRefreshAutoGifFooter *footer = [MJRefreshAutoGifFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadMoreData)];
    
    // 设置正在刷新状态的动画图片
    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];
    }
    [footer setImages:refreshingImages forState:MJRefreshStateRefreshing];
    
    // 设置上拉刷新控件
    self.tableView.mj_footer = footer;
    
    (上拉刷新02-动画图片)

    The pull to refresh 03-Hide the title of refresh status

    // 当上拉刷新控件出现50%时(出现一半),就会自动刷新。这个值默认是1.0(也就是上拉刷新100%出现时,才会自动刷新)
    //    footer.triggerAutomaticallyRefreshPercent = 0.5; 
    
    // 隐藏刷新状态的文字
    footer.refreshingTitleHidden = YES;
    // If does have not above method,then use footer.stateLabel.hidden = YES;
    
    (上拉刷新03-隐藏刷新状态的文字)

    The pull to refresh 04-All loaded

    //...
    // 刷新表格
    [tableView reloadData];
    // 拿到当前的上拉刷新控件,文字变为没有更多数据的状态
    [tableView.mj_footer endRefreshingWithNoMoreData];
    
    (上拉刷新04-全部加载完毕)

    The pull to refresh 05-DIY title

    // 添加默认的上拉刷新
    // 设置回调(一旦进入刷新状态,就调用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;
    
    (上拉刷新05-自定义文字)

    The pull to refresh 06-Hidden After loaded

    //...
    // 刷新表格
    [tableView reloadData];
    // 隐藏当前的上拉刷新控件
    tableView.mj_footer.hidden = YES;
    
    (上拉刷新06-加载后隐藏)

    The pull to refresh 07-Automatic back of the pull01

    // 设置回调(一旦进入刷新状态,就调用target的action,也就是调用self的loadMoreData方法)
    self.tableView.mj_footer = [MJRefreshBackNormalFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadMoreData)];
    // 设置了底部inset
    self.tableView.contentInset = UIEdgeInsetsMake(0, 0, 30, 0);
    // 忽略掉底部inset
    self.tableView.mj_footer.ignoredScrollViewContentInsetBottom = 30;
    
    (上拉刷新07-自动回弹的上拉01)

    The pull to refresh 08-Automatic back of the pull02

    MJRefreshBackGifFooter *footer = [MJRefreshBackGifFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadMoreData)];
    
    // Set the normal state of the animated image
    [footer setImages:idleImages forState:MJRefreshStateIdle];
    //  Set the pulling state of animated images(Enter the status of refreshing as soon as loosen)
    [footer setImages:pullingImages forState:MJRefreshStatePulling];
    // Set the refreshing state of animated images
    [footer setImages:refreshingImages forState:MJRefreshStateRefreshing];
    
    // Set footer
    self.tableView.mj_footer = footer;
    
    (上拉刷新07-自动回弹的上拉02)

    The pull to refresh 09-DIY the control of refresh(Automatic refresh)

    self.tableView.mj_footer = [MJDIYAutoFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadMoreData)];
    // Implementation reference to MJDIYAutoFooter.h和MJDIYAutoFooter.m
    
    (上拉刷新09-自定义刷新控件(自动刷新))

    The pull to refresh 10-DIY the control of refresh(Automatic back)

    self.tableView.mj_footer = [MJDIYBackFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadMoreData)];
    // Implementation reference to MJDIYBackFooter.h和MJDIYBackFooter.m
    
    (上拉刷新10-自定义刷新控件(自动回弹))

    UICollectionView01-The pull and drop-down refresh

    // 下拉刷新
    self.collectionView.mj_header = [MJRefreshNormalHeader headerWithRefreshingBlock:^{
       //Call this Block When enter the refresh status automatically 
       
      //...
       [weakSelf.collectionView reloadData];
       // 结束刷新
       [weakSelf.collectionView.mj_header endRefreshing];
    }];
    
    
    // 上拉刷新
    self.collectionView.mj_footer = [MJRefreshAutoNormalFooter footerWithRefreshingBlock:^{
       //Call this Block When enter the refresh status automatically
       
       // ...
       [weakSelf.collectionView reloadData];
       // 结束刷新
       [weakSelf.collectionView.mj_footer endRefreshing];
    }];
    
    // 默认先隐藏footer
    self.collectionView.mj_footer.hidden = YES;
    
    (UICollectionView01-上下拉刷新)

    UIWebView01-The drop-down refresh

    // 添加下拉刷新控件
    self.webView.scrollView.mj_header = [MJRefreshNormalHeader headerWithRefreshingBlock:^{
       //Call this Block When enter the refresh status automatically
    }];
    
    (UICollectionView01-上下拉刷新)

    相关文章

      网友评论

        本文标题:MJRefresh——下拉刷新控件

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