IOS MJRefresh的使用

當我們使用上拉或著下拉的時候,自己實現的話, 往往會耗費很多的時候來計算縮進。我們可以選擇第三方的刷新控件,MJRefresh,這個也是現在使用的比較多的一個刷新,集成的話可以到github上面下載https://github.com/CoderMJLee/MJRefresh,也可以使用cocoapods集成 pod 'MJRefresh'

  • 1 最簡單添加方法 有狀態,時間 默認顏色


UITableView *mytableView = [[UITableView alloc] initWithFrame:self.view.bounds]; 

mytableView.mj_header = [MJRefreshNormalHeader headerWithRefreshingTarget:self refreshingAction:@selector(headerAction)];
    [self.view addSubview:mytableView];

- (void)headerAction
{
    
}

//手動進入刷新狀態
    [mytableView.mj_header beginRefreshing];
    //手動結束刷新狀態
    [mytableView.mj_header endRefreshing];

 //根據拖拽比例自動切換透明度
    mytableView.mj_header.automaticallyChangeAlpha = YES;
//2使用block

mytableView.mj_header = [MJRefreshNormalHeader headerWithRefreshingBlock:^{
        //刷新代碼
    }];
下拉默認2.gif

  • 下拉刷新有動畫圖片

我們在github下載框架,是可以動態展示刷新動畫的,如果我們自己公司的項目,要提前準備好,三組動畫圖片,這樣在不同的狀態我們要顯示,這里我演示了一下如何添加,并顯示刷新狀態的圖片。圖片資源可以從下載的MJRefresh例子找到!

 //有動畫圖片
    MJRefreshGifHeader *header = [MJRefreshGifHeader headerWithRefreshingTarget:self refreshingAction:@selector(headerAction)];
    //普通狀態下的圖片
    NSMutableArray *idleImages = [NSMutableArray array];
    for (int i = 0; i < 44; i++)
    {
        UIImage *img = [UIImage imageNamed:[NSString stringWithFormat:@"dropdown_anim__000%d", i+1]];
        NSLog(@"%@", [NSString stringWithFormat:@"dropdown_anim__000%02d", i+1]);
        if (img) {
            [idleImages addObject:img];

        }
    }
    [header setImages:idleImages forState:MJRefreshStateIdle];
    
    NSMutableArray *pullingImages = [NSMutableArray array];
       for (int i = 45; i < 60; i++)
       {
           UIImage *img = [UIImage imageNamed:[NSString stringWithFormat:@"dropdown_anim__000%d", i+1]];
           NSLog(@"%@", [NSString stringWithFormat:@"dropdown_anim__000%d", i+1]);
           if (img) {
               [pullingImages addObject:img];
           }
           
       }
    [header setImages:pullingImages forState:MJRefreshStatePulling];
    
    //刷新d中的動畫圖片
    NSMutableArray *refreshingImages = [NSMutableArray array];
    for (int i = 0; i < 2; i++)
    {
        UIImage *img = [UIImage imageNamed:[NSString stringWithFormat:@"dropdown_loading_0%i", i + 1]];
        if (img) {
            [refreshingImages addObject:img];
        }
    }
    [header setImages:refreshingImages forState:MJRefreshStateRefreshing];
    
    mytableView.mj_header = header;
下拉可愛動畫.gif

如果我們想要控制是否顯示時間之類

MJRefreshNormalHeader *header = [MJRefreshNormalHeader headerWithRefreshingTarget:self refreshingAction:@selector(headerAction)];
//是否隱藏時間
      header.lastUpdatedTimeLabel.hidden = YES;
      //文字顏色
      header.stateLabel.textColor = [UIColor redColor];
      //普通狀態的文字
      [header setTitle:@"下拽刷新" forState:MJRefreshStateIdle];
      //松開可以刷新
      [header setTitle:@"你刷開" forState:MJRefreshStatePulling];
      //正在刷新
      [header setTitle:@"刷新中sll" forState:MJRefreshStateRefreshing];

  • 隱藏時間
MJRefreshNormalHeader *header = [MJRefreshNormalHeader headerWithRefreshingTarget:self refreshingAction:@selector(headerAction)];
header.lastUpdatedTimeLabel.hidden = YES;
mytableView.mj_header = header;

隱藏時間2.gif

  • 隱藏時間和狀態
 MJRefreshNormalHeader *header = [MJRefreshNormalHeader headerWithRefreshingTarget:self refreshingAction:@selector(headerAction)];
//    //是否隱藏時間
    header.lastUpdatedTimeLabel.hidden = YES;
    //隱藏狀態
    header.stateLabel.hidden = YES;
   mytableView.mj_header = header;
隱藏時間和狀態2.gif

自定義文字

  MJRefreshNormalHeader *header = [MJRefreshNormalHeader headerWithRefreshingTarget:self refreshingAction:@selector(headerAction)];

//    //文字顏色
    header.stateLabel.textColor = [UIColor redColor];
    header.lastUpdatedTimeLabel.textColor = [UIColor blueColor];
    //字體
    header.stateLabel.font = [UIFont systemFontOfSize:15];
    header.lastUpdatedTimeLabel.font = [UIFont systemFontOfSize:14];
//菊花的顏色
    header.loadingView.color = [UIColor whiteColor];

//    //普通
    [header setTitle:@"往下拉刷新數據" forState:MJRefreshStateIdle];
    //松開可以刷新
    [header setTitle:@"松開加載數據" forState:MJRefreshStatePulling];
    //正在刷新
    [header setTitle:@"拼命加載中..." forState:MJRefreshStateRefreshing];
  //文字慢慢的顯現
    mytableView.mj_header.automaticallyChangeAlpha = YES;
    
    [self.view addSubview:mytableView];
    mytableView.mj_header = header;
自定義文字.gif

完全自定義內部刷新控件

這是我們創建的類要繼承于MJRefreshHeader,可以根據里面設置狀態的時候,處理我們自己的控件。


@implementation MyDiyRefreshHeader

- (instancetype)initWithFrame:(CGRect)frame
{
    if (self = [super initWithFrame:frame])
    {
       /* 如果我們a在拖拽的時候希望上面要現實一張圖片,廣告,公司的標志等,可以在這個空間上面添加,只不過位置要改成負數的
        */
        UILabel *label = [[UILabel alloc] init];
        label.backgroundColor = [UIColor orangeColor];
        label.hidden = YES;
        [self addSubview:label];
        self.label = label;

        UIImageView *ad = [[UIImageView alloc] init];
        
        ad.image = [UIImage imageNamed:@"dropdown_anim__00024"];
        [self addSubview:ad];
        self.adImageView = ad;
        
        
    }
    return self;
}

- (void)layoutSubviews
{
    [super layoutSubviews];
    self.label.frame = CGRectMake(0, 0, 220, 50);
self.adImageView.frame = CGRectMake((self.bounds.size.width -50) / 2, -50, 50, 50);
}

- (void)setState:(MJRefreshState)state
{
    [super setState:state];
    self.label.hidden = NO;

  if (state == MJRefreshStateIdle) //正常
    {
        self.label.backgroundColor = [UIColor redColor];
    }
    else if (state == MJRefreshStatePulling) { //松開可以刷新
        self.label.backgroundColor = [UIColor blueColor];

    }
    else if (state == MJRefreshStateRefreshing){ //正在刷新
        self.label.backgroundColor = [UIColor orangeColor];

    }
}

很方便的使用,我們不需要去關心滾動的計算了

 //添加方法
    self.tableView.mj_header = [MyDiyRefreshHeader headerWithRefreshingTarget:self refreshingAction:@selector(headerAction)];

//block方式添加
    self.tableView.mj_header = [MyDiyRefreshHeader   headerWithRefreshingBlock:^{
        
    }];
完全自定義內部控件.gif

上拉加載更多的使用

//默認方式
    //block
//    self.tableView.mj_footer = [MJRefreshAutoNormalFooter footerWithRefreshingBlock:^{
//    }];
//
    self.tableView.mj_footer = [MJRefreshAutoNormalFooter footerWithRefreshingTarget:self refreshingAction:@selector(footerAction)];

//結束刷新
  [mytableView.mj_footer endRefreshing];
  //如果提醒他沒有更多的數據了
    [mytableView.mj_footer endRefreshingWithNoMoreData];
上拉默認.gif

上拉帶動畫圖片

//上拉加載帶動畫
    MJRefreshAutoGifFooter *footer = [MJRefreshAutoGifFooter footerWithRefreshingTarget:self refreshingAction:@selector(footerAction)];
    //刷新d中的動畫圖片
    NSMutableArray *refreshingImages = [NSMutableArray array];
    for (int i = 0; i < 2; i++)
    {
        UIImage *img = [UIImage imageNamed:[NSString stringWithFormat:@"dropdown_loading_0%i", i + 1]];
        if (img) {
            [refreshingImages addObject:img];

        }
    }
    [footer setImages:refreshingImages forState:MJRefreshStateRefreshing];

    self.tableView.mj_footer = footer;
上拉帶動畫.gif

上拉隱藏刷新的文字

MJRefreshAutoGifFooter *footer = [MJRefreshAutoGifFooter footerWithRefreshingTarget:self refreshingAction:@selector(footerAction)];
    //刷新d中的動畫圖片
    NSMutableArray *refreshingImages = [NSMutableArray array];
    for (int i = 0; i < 2; i++)
    {
        UIImage *img = [UIImage imageNamed:[NSString stringWithFormat:@"dropdown_loading_0%i", i + 1]];
        if (img) {
            [refreshingImages addObject:img];

        }
    }
    
    [footer setImages:refreshingImages forState:MJRefreshStateRefreshing];
    //隱藏刷新的文字
    footer.refreshingTitleHidden = YES;
    self.tableView.mj_footer = footer;
上拉隱藏文字.gif

上拉全部加載完畢

//全部加載完畢
    self.tableView.mj_footer = [MJRefreshAutoNormalFooter footerWithRefreshingTarget:self refreshingAction:@selector(footerAction)];


//刷新結束的時候要調用
 [self.tableView.mj_footer endRefreshingWithNoMoreData];

上拉全部加載完畢.gif

上拉自定義文字

/上拉自定義文字
    
    MJRefreshAutoNormalFooter *footer = [MJRefreshAutoNormalFooter footerWithRefreshingTarget:self refreshingAction:@selector(footerAction)];
    [footer setTitle:@"點擊或拖拽加載" forState:MJRefreshStateIdle];
    [footer setTitle:@"加載中 ..." forState:MJRefreshStateRefreshing];
    [footer setTitle:@"沒有更多數據" forState:MJRefreshStateNoMoreData];

    // Set font
    footer.stateLabel.font = [UIFont systemFontOfSize:17];

    // Set textColor
    footer.stateLabel.textColor = [UIColor blueColor];
    
    self.tableView.mj_footer = footer;
上拉自定義文字.gif

上拉自動回彈在最底部

 self.tableView.tableFooterView = [[UIView alloc] init];
    self.tableView.mj_footer = [MJRefreshBackNormalFooter footerWithRefreshingTarget:self refreshingAction:@selector(footerAction)];
上拉自動回彈.gif

上拉加載回彈帶圖片動畫

//自動回彈2帶h動畫圖片
    
    MJRefreshBackGifFooter *footer = [MJRefreshBackGifFooter footerWithRefreshingTarget:self refreshingAction:@selector(footerAction)];

    // 普通狀態下的圖片
    NSMutableArray *idleImages = [NSMutableArray array];
    for (int i = 0; i < 44; i++)
    {
        UIImage *img = [UIImage imageNamed:[NSString stringWithFormat:@"dropdown_anim__000%d", i+1]];
        NSLog(@"%@", [NSString stringWithFormat:@"dropdown_anim__000%02d", i+1]);
        if (img) {
            [idleImages addObject:img];

        }
    }
    [footer setImages:idleImages forState:MJRefreshStateIdle];
    //  松開刷開的時候
    NSMutableArray *pullingImages = [NSMutableArray array];
    for (int i = 45; i < 60; i++)
    {
        UIImage *img = [UIImage imageNamed:[NSString stringWithFormat:@"dropdown_anim__000%d", i+1]];
        NSLog(@"%@", [NSString stringWithFormat:@"dropdown_anim__000%d", i+1]);
        if (img) {
            [pullingImages addObject:img];
        }
        
    }
    [footer setImages:pullingImages forState:MJRefreshStatePulling];
    // 刷新的圖片
    NSMutableArray *refreshingImages = [NSMutableArray array];
    for (int i = 0; i < 2; i++)
    {
        UIImage *img = [UIImage imageNamed:[NSString stringWithFormat:@"dropdown_loading_0%i", i + 1]];
        if (img) {
            [refreshingImages addObject:img];

        }
    }
    [footer setImages:refreshingImages forState:MJRefreshStateRefreshing];

    // Set footer
    self.tableView.mj_footer = footer;
  
    self.tableView.tableFooterView = [[UIView alloc] init];
上拉自動回彈帶圖片動畫.gif

自定義刷新控件

#import "MyDIYAutoFooter.h"

@interface MyDIYAutoFooter ()
@property (nonatomic, weak)  UILabel *label;
@property (nonatomic, weak)  UIActivityIndicatorView *loading;

@end

@implementation MyDIYAutoFooter


#pragma mark - 添加子控件 -
- (void)prepare
{
    [super prepare];
    
    UILabel *label = [[UILabel alloc] init];
    
    label.backgroundColor = [UIColor orangeColor];
    label.text = @"自定義的刷新";
    label.textAlignment = NSTextAlignmentCenter;
    [self addSubview:label];
    self.label = label;
    
    UIActivityIndicatorView *loading = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];
    
    [self addSubview:loading];
    
    self.loading = loading;
}

#pragma mark - 設置自控件的尺寸和位子 -
- (void)placeSubviews
{
    [super placeSubviews];
    self.label.frame = CGRectMake((self.bounds.size.width - 200) / 2, 0, 200, 50);
    self.loading.center = CGPointMake(35, 25);
}



#pragma mark - 監聽狀態的改變 -

- (void)setState:(MJRefreshState)state
{
    MJRefreshCheckState;
    switch (state) {
        case MJRefreshStateIdle:
            self.label.text = @"拖動加載更多";
            [self.loading stopAnimating];
            break;
        case MJRefreshStatePulling:
            self.label.text = @"松開加載更多";
            [self.loading stopAnimating];
            break;
        case MJRefreshStateRefreshing:
            self.label.text = @"加載數據中!!!";
            [self.loading startAnimating];
            break;
        case MJRefreshStateNoMoreData:
            self.label.text = @"沒有更多的數據!!!";
            [self.loading stopAnimating];
            break;
        default:
            break;
    }
}

使用
    self.tableView.mj_footer = [MyDIYAutoFooter footerWithRefreshingTarget:self refreshingAction:@selector(footerAction)];

自定義上拉加載控件1.gif

上拉自動回彈,自定義視圖

#import "MJRefreshBackFooter.h"



@interface MyDIYBackFooter : MJRefreshBackFooter

@end


#import "MyDIYBackFooter.h"

@interface MyDIYBackFooter ()


@property (nonatomic, weak)  UILabel *label;
@property (nonatomic, weak)  UIActivityIndicatorView *loading;

@end


@implementation MyDIYBackFooter

#pragma mark - 添加子控件 -
- (void)prepare
{
    [super prepare];
    
    UILabel *label = [[UILabel alloc] init];
    
    label.backgroundColor = [UIColor orangeColor];
    label.text = @"自定義的刷新";
    label.textAlignment = NSTextAlignmentCenter;
    [self addSubview:label];
    self.label = label;
    
    UIActivityIndicatorView *loading = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];
    
    [self addSubview:loading];
    
    self.loading = loading;
}

#pragma mark - 設置自控件的尺寸和位子 -
- (void)placeSubviews
{
    [super placeSubviews];
    self.label.frame = CGRectMake((self.bounds.size.width - 200) / 2, 0, 200, 50);
    self.loading.center = CGPointMake(35, 25);
}



#pragma mark - 監聽狀態的改變 -

- (void)setState:(MJRefreshState)state
{
    MJRefreshCheckState;
    switch (state) {
        case MJRefreshStateIdle:
            self.label.text = @"拖動加載更多";
            [self.loading stopAnimating];
            break;
        case MJRefreshStatePulling:
            self.label.text = @"松開加載更多";
            [self.loading stopAnimating];
            break;
        case MJRefreshStateRefreshing:
            self.label.text = @"加載數據中!!!";
            [self.loading startAnimating];
            break;
        case MJRefreshStateNoMoreData:
            self.label.text = @"沒有更多的數據!!!";
            [self.loading stopAnimating];
            break;
        default:
            break;
    }
}

@end

//使用
self.tableView.mj_footer = [MyDIYBackFooter footerWithRefreshingTarget:self refreshingAction:@selector(footerAction)];
    
    
    self.tableView.tableFooterView = [[UIView alloc] init];
上拉回彈自定義視圖.gif

如果我們的刷新控件自已的很多地方都需要使用,需要對刷新控件進行調整,需要自己定義一個類來完成操作

//是否隱藏時間
   header.lastUpdatedTimeLabel.hidden = YES;
   //文字顏色
   header.stateLabel.textColor = [UIColor redColor];

 //文字顏色
   header.stateLabel.textColor = [UIColor redColor];
   //普通
   [header setTitle:@"下拽刷新" forState:MJRefreshStateIdle];
   //松開可以刷新
   [header setTitle:@"你刷開" forState:MJRefreshStateIdle];
   //正在刷新
   [header setTitle:@"刷新中sll" forState:MJRefreshStateIdle];

如果很多的地方都需要使用到這些屬性的人話,我們可以自己定義一個類,讓他繼承于MJRefreshNormalHeader

#import "MyRefreshHeader.h"

@implementation MyRefreshHeader

- (instancetype)initWithFrame:(CGRect)frame
{
    if (self = [super initWithFrame:frame]) {
        
        //是否隱藏時間
        self.lastUpdatedTimeLabel.hidden = YES;
        //文字顏色
        self.stateLabel.textColor = [UIColor redColor];
        //普通
        [self setTitle:@"下拽刷新" forState:MJRefreshStateIdle];
        //松開可以刷新
        [self setTitle:@"你刷開" forState:MJRefreshStatePulling];
        //正在刷新
        [self setTitle:@"刷新中sll" forState:MJRefreshStateRefreshing];
        return self;
    }
}

@end
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。