刷新控件-MJRefresh

一、簡介

MJRefresh是一款強(qiáng)大可定制的刷新控件,支持UIScrollView婿崭、UITableView俭嘁、UICollectionView躺枕、UIWebView這四類滾動(dòng)視圖控件

二、框架圖


注意:無論是上拉加載還是下拉刷新供填,不需要完全自定義的話拐云,用分支最后面的類

三、使用

1近她、通用方法

/*
    __unsafe_unretained __typeof(self) weakSelf = self;
    // 下拉刷新
    self.tableView.mj_header= [MJRefreshNormalHeader headerWithRefreshingBlock:^{
    // 模擬延遲加載數(shù)據(jù)叉瘩,因此2秒后才調(diào)用(真實(shí)開發(fā)中,可以移除這段gcd代碼)
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
    // 結(jié)束刷新
    [weakSelf.tableView.mj_header endRefreshing];
    });
    }];
    // 馬上進(jìn)入刷新狀態(tài)
    [self.tableView.mj_header beginRefreshing];
    
    // 設(shè)置自動(dòng)切換透明度(在導(dǎo)航欄下面自動(dòng)隱藏)
    self.tableView.mj_header.automaticallyChangeAlpha = YES;
    
    // 上拉刷新
    self.tableView.mj_footer = [MJRefreshBackNormalFooter footerWithRefreshingBlock:^{
    // 模擬延遲加載數(shù)據(jù)粘捎,因此2秒后才調(diào)用(真實(shí)開發(fā)中薇缅,可以移除這段gcd代碼)
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
    // 結(jié)束刷新
    [ self.tableView.mj_footer endRefreshing];
    });
    }];
    */

2、下拉刷新

/***********************************GIF******************************************/
    /*
     1.  繼承與MJRefreshGifHeader
     2.  重寫- (void)prepare 方法  設(shè)置動(dòng)畫圖片
     */
    /*
     // 設(shè)置回調(diào)(一旦進(jìn)入刷新狀態(tài)攒磨,就調(diào)用target的action泳桦,也就是調(diào)用self的loadNewData方法)
     self.tableView.mj_header = [MSHChiBaoZiHeader headerWithRefreshingTarget:self refreshingAction:@selector(loadNewData)];
     
     // 馬上進(jìn)入刷新狀態(tài)
     [self.tableView.mj_header beginRefreshing];
     */
    /***********************************隱藏時(shí)間******************************************/
    // 設(shè)置回調(diào)(一旦進(jìn)入刷新狀態(tài),就調(diào)用target的action娩缰,也就是調(diào)用self的loadNewData方法)
    /*
     MJRefreshNormalHeader *header = [MJRefreshNormalHeader headerWithRefreshingTarget:self refreshingAction:@selector(loadNewData)];
     // 設(shè)置自動(dòng)切換透明度(在導(dǎo)航欄下面自動(dòng)隱藏)
     header.automaticallyChangeAlpha = YES;
     
     // 隱藏時(shí)間
     header.lastUpdatedTimeLabel.hidden = YES;
     // 馬上進(jìn)入刷新狀態(tài)
     [header beginRefreshing];
     
     // 設(shè)置header
     self.tableView.mj_header = header;
     */
    
    /***********************************隱藏時(shí)間******************************************/
    
    // 設(shè)置回調(diào)(一旦進(jìn)入刷新狀態(tài)灸撰,就調(diào)用target的action,也就是調(diào)用self的loadNewData方法)
    /*
     MJRefreshNormalHeader *header = [MJRefreshNormalHeader headerWithRefreshingTarget:self refreshingAction:@selector(loadNewData)];
     
     // 隱藏時(shí)間
     header.lastUpdatedTimeLabel.hidden = YES;
     
     // 隱藏狀態(tài)
     header.stateLabel.hidden = YES;
     
     // 馬上進(jìn)入刷新狀態(tài)
     [header beginRefreshing];
     
     // 設(shè)置header
     self.tableView.mj_header = header;
     */
    /***********************************自定義文字******************************************/
    
    /*
     // 設(shè)置回調(diào)(一旦進(jìn)入刷新狀態(tài)拼坎,就調(diào)用target的action梧奢,也就是調(diào)用self的loadNewData方法)
     MJRefreshNormalHeader *header = [MJRefreshNormalHeader headerWithRefreshingTarget:self refreshingAction:@selector(loadNewData)];
     
     // 設(shè)置文字
     [header setTitle:@"Pull down to refresh" forState:MJRefreshStateIdle]; // 箭頭向下時(shí)文字
     [header setTitle:@"Release to refresh" forState:MJRefreshStatePulling]; // 箭頭向上時(shí)文字
     [header setTitle:@"Loading ..." forState:MJRefreshStateRefreshing]; // 松手刷新
     
     // 設(shè)置字體
     header.stateLabel.font = [UIFont systemFontOfSize:15];
     header.lastUpdatedTimeLabel.font = [UIFont systemFontOfSize:14];
     
     // 設(shè)置字體顏色
     // 狀態(tài)文字
     header.stateLabel.textColor = [UIColor yellowColor];
     // 時(shí)間字體的顏色
     header.lastUpdatedTimeLabel.textColor = [UIColor blueColor];
     
     // 馬上進(jìn)入刷新狀態(tài)
     [header beginRefreshing];
     
     // 設(shè)置刷新控件
     self.tableView.mj_header = header;
     
     */
    
    /**********************************自定義刷新控件******************************************/
    /* : MSHDIYHeader
     1.  繼承與MJRefreshHeader
     2.  重寫- (void)prepare 方法  設(shè)置內(nèi)部控件 設(shè)置尺寸
     */
    
    /*
     // 設(shè)置回調(diào)(一旦進(jìn)入刷新狀態(tài),就調(diào)用target的action演痒,也就是調(diào)用self的loadNewData方法)
     self.tableView.mj_header = [MSHDIYHeader headerWithRefreshingTarget:self refreshingAction:@selector(loadNewData)];
     self.tableView.mj_header.backgroundColor = [UIColor greenColor];
     [self.tableView.mj_header beginRefreshing];
     */

3亲轨、上拉刷新

/**********************************下拉刷新 默認(rèn)******************************************/
    /*
    __unsafe_unretained __typeof(self) weakSelf = self;
    
    // 設(shè)置回調(diào)(一旦進(jìn)入刷新狀態(tài)就會調(diào)用這個(gè)refreshingBlock)
    self.tableView.mj_footer = [MJRefreshAutoNormalFooter footerWithRefreshingBlock:^{
        [weakSelf loadOnceData];
    }];
    */
/**********************************上拉刷新 動(dòng)畫圖片******************************************/
    // 繼承與 MJRefreshAutoGifFooter
    // 重寫 - (void)prepare
    
    /*
    // 設(shè)置回調(diào)(一旦進(jìn)入刷新狀態(tài),就調(diào)用target的action鸟顺,也就是調(diào)用self的loadMoreData方法)
    self.tableView.mj_footer = [MSHChiBaoZiFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadMoreData)];
     */
    
/**********************************上拉刷新 隱藏刷新狀態(tài)的文字******************************************/
    
    /*
    // 設(shè)置回調(diào)(一旦進(jìn)入刷新狀態(tài)惦蚊,就調(diào)用target的action,也就是調(diào)用self的loadMoreData方法)
    MSHChiBaoZiFooter *footer = [MSHChiBaoZiFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadMoreData)];
    
    // 當(dāng)上拉刷新控件出現(xiàn)50%時(shí)(出現(xiàn)一半)讯嫂,就會自動(dòng)刷新蹦锋。這個(gè)值默認(rèn)是1.0(也就是上拉刷新100%出現(xiàn)時(shí),才會自動(dòng)刷新)
    //    footer.triggerAutomaticallyRefreshPercent = 0.5;
    
    // 隱藏刷新狀態(tài)的文字
    footer.refreshingTitleHidden = YES;
    
    // 設(shè)置footer
    self.tableView.mj_footer = footer;
    */

/**********************************上拉刷新 自定義文字******************************************/
    
    /*
    // 添加默認(rèn)的上拉刷新
    // 設(shè)置回調(diào)(一旦進(jìn)入刷新狀態(tài)欧芽,就調(diào)用target的action莉掂,也就是調(diào)用self的loadMoreData方法)
    MJRefreshAutoNormalFooter *footer = [MJRefreshAutoNormalFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadMoreData)];
    
    // 設(shè)置文字
    [footer setTitle:@"Click or drag up to refresh" forState:MJRefreshStateIdle];
    [footer setTitle:@"Loading more ..." forState:MJRefreshStateRefreshing];
    [footer setTitle:@"No more data" forState:MJRefreshStateNoMoreData];

    // 設(shè)置字體
    footer.stateLabel.font = [UIFont systemFontOfSize:17];
    
    // 設(shè)置顏色
    footer.stateLabel.textColor = [UIColor blueColor];
    
    // 設(shè)置footer
    self.tableView.mj_footer = footer;
     
    */
    
/**********************************上拉刷新 加載后隱藏******************************************/
    /*
    // 設(shè)置回調(diào)(一旦進(jìn)入刷新狀態(tài),就調(diào)用target的action千扔,也就是調(diào)用self的loadOnceData方法)
    self.tableView.mj_footer = [MJRefreshAutoNormalFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadOnceData)];
    */
    
    
/**********************************自動(dòng)回彈的上拉01******************************************/
    /*
    // 設(shè)置回調(diào)(一旦進(jìn)入刷新狀態(tài)憎妙,就調(diào)用target的action库正,也就是調(diào)用self的loadMoreData方法)
    self.tableView.mj_footer = [MJRefreshBackNormalFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadMoreData)];
    // 設(shè)置了底部inset
    self.tableView.contentInset = UIEdgeInsetsMake(0, 0, 30, 0);
    // 忽略掉底部inset
    self.tableView.mj_footer.ignoredScrollViewContentInsetBottom = 30;
     /*
 /**********************************自動(dòng)回彈的上拉02******************************************/
    /*
    // 設(shè)置回調(diào)(一旦進(jìn)入刷新狀態(tài),就調(diào)用target的action厘唾,也就是調(diào)用self的loadLastData方法)
    self.tableView.mj_footer = [MSHChiBaoZiFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadLastData)];
    self.tableView.mj_footer.automaticallyChangeAlpha = YES;
    */
    
 /**********************************自定義刷新控件(自動(dòng)刷新)******************************************/
    /*
    // 繼承 MJRefreshAutoFooter
    
    // 設(shè)置回調(diào)(一旦進(jìn)入刷新狀態(tài)褥符,就調(diào)用target的action,也就是調(diào)用self的loadMoreData方法)
    self.tableView.mj_footer = [DiYFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadMoreData)];
    
    */
  /**********************************自定義刷新控件(自動(dòng)回彈)******************************************/
    
     // 繼承 MJRefreshBackFooter
    
    // 設(shè)置回調(diào)(一旦進(jìn)入刷新狀態(tài)抚垃,就調(diào)用target的action喷楣,也就是調(diào)用self的loadMoreData方法)
    self.tableView.mj_footer = [MSHDIYBackFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadMoreData)];

4、數(shù)據(jù)加載方法


#pragma mark 上拉加載更多數(shù)據(jù)
- (void)loadMoreData
{
    // 2.模擬2秒后刷新表格UI(真實(shí)開發(fā)中鹤树,可以移除這段gcd代碼)
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(MJDuration * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        // 刷新表格
        [self.tableView reloadData];
        
        // 拿到當(dāng)前的上拉刷新控件铣焊,結(jié)束刷新狀態(tài)
        [self.tableView.mj_footer endRefreshing];
    });
}

#pragma mark 加載最后一份數(shù)據(jù)
- (void)loadLastData
{

    // 2.模擬2秒后刷新表格UI(真實(shí)開發(fā)中,可以移除這段gcd代碼)
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(MJDuration * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        // 刷新表格
        [self.tableView reloadData];
        
        // 拿到當(dāng)前的上拉刷新控件罕伯,變?yōu)闆]有更多數(shù)據(jù)的狀態(tài)
        [self.tableView.mj_footer endRefreshingWithNoMoreData];
    });
}

#pragma mark 只加載一次數(shù)據(jù)
- (void)loadOnceData
{

    // 2.模擬2秒后刷新表格UI(真實(shí)開發(fā)中曲伊,可以移除這段gcd代碼)
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(MJDuration * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        // 刷新表格
        [self.tableView reloadData];
        
        // 隱藏當(dāng)前的上拉刷新控件
        self.tableView.mj_footer.hidden = YES;
    });
}

6、自定義下拉刷新控件 MSHDIYHeader
MSHDIYHeader.h

#import "MJRefreshHeader.h"

@interface MSHDIYHeader : MJRefreshHeader

@end

MSHDIYHeader.m

#import "MSHDIYHeader.h"

@interface MSHDIYHeader()
@property (weak, nonatomic) UILabel *label;
@property (weak, nonatomic) UISwitch *s;
@property (weak, nonatomic) UIImageView *logo;
@property (weak, nonatomic) UIActivityIndicatorView *loading;
@end

@implementation MSHDIYHeader

- (void)prepare
{
    [super prepare];
    
    // 設(shè)置控件的高度
    self.mj_h = 50;
    
    // 添加label
    UILabel *label = [[UILabel alloc] init];
    label.textColor = [UIColor colorWithRed:1.0 green:0.5 blue:0.0 alpha:1.0];
    label.font = [UIFont boldSystemFontOfSize:16];
    label.textAlignment = NSTextAlignmentCenter;
    [self addSubview:label];
    self.label = label;
    
    // 打醬油的開關(guān)
    UISwitch *s = [[UISwitch alloc] init];
    [self addSubview:s];
    self.s = s;
    
    // logo
    UIImageView *logo = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"logo.jpg"]];
    logo.contentMode = UIViewContentModeScaleAspectFit;
    [self addSubview:logo];
    self.logo = logo;
    
    // loading
    UIActivityIndicatorView *loading = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];
    [self addSubview:loading];
    self.loading = loading;
}

#pragma mark 在這里設(shè)置子控件的位置和尺寸
- (void)placeSubviews
{
    [super placeSubviews];
    
    self.label.frame = self.bounds;
    
    self.logo.bounds = CGRectMake(0, 0, 50, 50);
    self.logo.center = CGPointMake(self.mj_w * 0.5, - self.logo.mj_h + 20);
    
    self.loading.center = CGPointMake(self.mj_w - 30, self.mj_h * 0.5);
}

#pragma mark 監(jiān)聽控件的刷新狀態(tài)
- (void)setState:(MJRefreshState)state
{
    MJRefreshCheckState;
    
    switch (state) {
        case MJRefreshStateIdle:
            [self.loading stopAnimating];
            [self.s setOn:NO animated:YES];
            self.label.text = @"趕緊下拉吖(開關(guān)是打醬油滴)";
            break;
        case MJRefreshStatePulling:
            [self.loading stopAnimating];
            [self.s setOn:YES animated:YES];
            self.label.text = @"趕緊放開我吧(開關(guān)是打醬油滴)";
            break;
        case MJRefreshStateRefreshing:
            [self.s setOn:YES animated:YES];
            self.label.text = @"加載數(shù)據(jù)中(開關(guān)是打醬油滴)";
            [self.loading startAnimating];
            break;
        default:
            break;
    }
}

#pragma mark 監(jiān)聽拖拽比例(控件被拖出來的比例)
- (void)setPullingPercent:(CGFloat)pullingPercent
{
    [super setPullingPercent:pullingPercent];
    
    // 1.0 0.5 0.0
    // 0.5 0.0 0.5
    CGFloat red = 1.0 - pullingPercent * 0.5;
    CGFloat green = 0.5 - 0.5 * pullingPercent;
    CGFloat blue = 0.5 * pullingPercent;
    self.label.textColor = [UIColor colorWithRed:red green:green blue:blue alpha:1.0];
}

#pragma mark 監(jiān)聽scrollView的contentOffset改變
- (void)scrollViewContentOffsetDidChange:(NSDictionary *)change
{
    [super scrollViewContentOffsetDidChange:change];
    
}

#pragma mark 監(jiān)聽scrollView的contentSize改變
- (void)scrollViewContentSizeDidChange:(NSDictionary *)change
{
    [super scrollViewContentSizeDidChange:change];
    
}

#pragma mark 監(jiān)聽scrollView的拖拽狀態(tài)改變
- (void)scrollViewPanStateDidChange:(NSDictionary *)change
{
    [super scrollViewPanStateDidChange:change];
    
}

@end

7捣炬、自定義下拉刷新動(dòng)畫 MSHChiBaoZiHeader

MJRefreshGifHeader.h
#import "MJRefreshGifHeader.h"

@interface MSHChiBaoZiHeader : MJRefreshGifHeader
@end

MJRefreshGifHeader.m
#import "MSHChiBaoZiHeader.h"

@implementation MSHChiBaoZiHeader

#pragma mark - 重寫方法
#pragma mark 基本設(shè)置
- (void)prepare
{
    [super prepare];
    // 設(shè)置普通狀態(tài)的動(dòng)畫圖片
    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];
    
    // 設(shè)置即將刷新狀態(tài)的動(dòng)畫圖片(一松開就會刷新的狀態(tài))
    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];
    
    // 設(shè)置正在刷新狀態(tài)的動(dòng)畫圖片
    [self setImages:refreshingImages forState:MJRefreshStateRefreshing];
}

@end

詳見Github上的Demo

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末熊昌,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子湿酸,更是在濱河造成了極大的恐慌婿屹,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,204評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件推溃,死亡現(xiàn)場離奇詭異昂利,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)铁坎,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,091評論 3 395
  • 文/潘曉璐 我一進(jìn)店門蜂奸,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人硬萍,你說我怎么就攤上這事扩所。” “怎么了朴乖?”我有些...
    開封第一講書人閱讀 164,548評論 0 354
  • 文/不壞的土叔 我叫張陵祖屏,是天一觀的道長。 經(jīng)常有香客問我买羞,道長袁勺,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,657評論 1 293
  • 正文 為了忘掉前任畜普,我火速辦了婚禮期丰,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己钝荡,他們只是感情好街立,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,689評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著化撕,像睡著了一般几晤。 火紅的嫁衣襯著肌膚如雪约炎。 梳的紋絲不亂的頭發(fā)上植阴,一...
    開封第一講書人閱讀 51,554評論 1 305
  • 那天,我揣著相機(jī)與錄音圾浅,去河邊找鬼掠手。 笑死,一個(gè)胖子當(dāng)著我的面吹牛狸捕,可吹牛的內(nèi)容都是我干的喷鸽。 我是一名探鬼主播,決...
    沈念sama閱讀 40,302評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼灸拍,長吁一口氣:“原來是場噩夢啊……” “哼做祝!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起鸡岗,我...
    開封第一講書人閱讀 39,216評論 0 276
  • 序言:老撾萬榮一對情侶失蹤混槐,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后轩性,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體声登,經(jīng)...
    沈念sama閱讀 45,661評論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,851評論 3 336
  • 正文 我和宋清朗相戀三年揣苏,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了悯嗓。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,977評論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡卸察,死狀恐怖脯厨,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情坑质,我是刑警寧澤合武,帶...
    沈念sama閱讀 35,697評論 5 347
  • 正文 年R本政府宣布,位于F島的核電站洪乍,受9級特大地震影響眯杏,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜壳澳,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,306評論 3 330
  • 文/蒙蒙 一岂贩、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦萎津、人聲如沸卸伞。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,898評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽荤傲。三九已至,卻和暖如春颈渊,著一層夾襖步出監(jiān)牢的瞬間遂黍,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,019評論 1 270
  • 我被黑心中介騙來泰國打工俊嗽, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留雾家,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,138評論 3 370
  • 正文 我出身青樓绍豁,卻偏偏與公主長得像芯咧,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子竹揍,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,927評論 2 355

推薦閱讀更多精彩內(nèi)容