ios 下拉刷新開源框架 MJRefresh

gitHub

下載框架

• 搜索MJExampleViewController.h
  • 下拉刷新 MJTableViewController
  • 上拉刷新 MJTableViewController
  • CollectionView的使用參考 MJCollectionViewController
  • UIWebView的使用參考 MJWebViewViewController

普通

/* __unsafe_unretained __typeof(self) weakSelf = self; // 下拉刷新 self.tableView.mj_header= [MJRefreshNormalHeader headerWithRefreshingBlock:^{ // 模擬延遲加載數據，所以2秒後才調用（真實開發中，能夠移除這段gcd代碼） dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{ // 結束刷新 [weakSelf.tableView.mj_header endRefreshing]; }); }]; // 立刻進入刷新狀態 [self.tableView.mj_header beginRefreshing]; // 設置自動切換透明度(在導航欄下面自動隱藏) self.tableView.mj_header.automaticallyChangeAlpha = YES; // 上拉刷新 self.tableView.mj_footer = [MJRefreshBackNormalFooter footerWithRefreshingBlock:^{ // 模擬延遲加載數據，所以2秒後才調用（真實開發中，能夠移除這段gcd代碼） dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{ // 結束刷新 [ self.tableView.mj_footer endRefreshing]; }); }]; */ 

下拉刷新

/***********************************GIF******************************************/ /* 1. 繼承與MJRefreshGifHeader 2. 重寫- (void)prepare 方法 設置動畫圖片 */ /* // 設置回調（一旦進入刷新狀態，就調用target的action，也就是調用self的loadNewData方法） self.tableView.mj_header = [MSHChiBaoZiHeader headerWithRefreshingTarget:self refreshingAction:@selector(loadNewData)]; // 立刻進入刷新狀態 [self.tableView.mj_header beginRefreshing]; */ /***********************************隱藏時間******************************************/ // 設置回調（一旦進入刷新狀態，就調用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; */ /***********************************隱藏時間******************************************/ // 設置回調（一旦進入刷新狀態，就調用target的action，也就是調用self的loadNewData方法） /* MJRefreshNormalHeader *header = [MJRefreshNormalHeader headerWithRefreshingTarget:self refreshingAction:@selector(loadNewData)]; // 隱藏時間 header.lastUpdatedTimeLabel.hidden = YES; // 隱藏狀態 header.stateLabel.hidden = YES; // 立刻進入刷新狀態 [header beginRefreshing]; // 設置header self.tableView.mj_header = header; */ /***********************************自定義文字******************************************/ /* // 設置回調（一旦進入刷新狀態，就調用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 yellowColor]; // 時間字體的顏色 header.lastUpdatedTimeLabel.textColor = [UIColor blueColor]; // 立刻進入刷新狀態 [header beginRefreshing]; // 設置刷新控件 self.tableView.mj_header = header; */ /**********************************自定義刷新控件******************************************/ /* : MSHDIYHeader 1. 繼承與MJRefreshHeader 2. 重寫- (void)prepare 方法 設置內部控件 設置尺寸 */ /* // 設置回調（一旦進入刷新狀態，就調用target的action，也就是調用self的loadNewData方法） self.tableView.mj_header = [MSHDIYHeader headerWithRefreshingTarget:self refreshingAction:@selector(loadNewData)]; self.tableView.mj_header.backgroundColor = [UIColor greenColor]; [self.tableView.mj_header beginRefreshing]; */ 

上拉刷新

/**********************************下拉刷新 默認******************************************/ /* __unsafe_unretained __typeof(self) weakSelf = self; // 設置回調（一旦進入刷新狀態就會調用這個refreshingBlock） self.tableView.mj_footer = [MJRefreshAutoNormalFooter footerWithRefreshingBlock:^{ [weakSelf loadOnceData]; }]; */ /**********************************上拉刷新 動畫圖片******************************************/ // 繼承與 MJRefreshAutoGifFooter // 重寫 - (void)prepare /* // 設置回調（一旦進入刷新狀態，就調用target的action，也就是調用self的loadMoreData方法） self.tableView.mj_footer = [MSHChiBaoZiFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadMoreData)]; */ /**********************************上拉刷新 隱藏刷新狀態的文字******************************************/ /* // 設置回調（一旦進入刷新狀態，就調用target的action，也就是調用self的loadMoreData方法） MSHChiBaoZiFooter *footer = [MSHChiBaoZiFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadMoreData)]; // 當上拉刷新控件出現50%時（出現一半），就會自動刷新。這個值默認是1.0（也就是上拉刷新100%出現時，纔會自動刷新） // footer.triggerAutomaticallyRefreshPercent = 0.5; // 隱藏刷新狀態的文字 footer.refreshingTitleHidden = YES; // 設置footer self.tableView.mj_footer = footer; */ /**********************************上拉刷新 自定義文字******************************************/ /* // 添加默認的上拉刷新 // 設置回調（一旦進入刷新狀態，就調用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; */ /**********************************上拉刷新 加載後隱藏******************************************/ /* // 設置回調（一旦進入刷新狀態，就調用target的action，也就是調用self的loadOnceData方法） self.tableView.mj_footer = [MJRefreshAutoNormalFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadOnceData)]; */ /**********************************自動回彈的上拉01******************************************/ /* // 設置回調（一旦進入刷新狀態，就調用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; /* /**********************************自動回彈的上拉02******************************************/ /* // 設置回調（一旦進入刷新狀態，就調用target的action，也就是調用self的loadLastData方法） self.tableView.mj_footer = [MSHChiBaoZiFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadLastData)]; self.tableView.mj_footer.automaticallyChangeAlpha = YES; */ /**********************************自定義刷新控件(自動刷新)******************************************/ /* // 繼承 MJRefreshAutoFooter // 設置回調（一旦進入刷新狀態，就調用target的action，也就是調用self的loadMoreData方法） self.tableView.mj_footer = [DiYFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadMoreData)]; */ /**********************************自定義刷新控件(自動回彈)******************************************/ // 繼承 MJRefreshBackFooter // 設置回調（一旦進入刷新狀態，就調用target的action，也就是調用self的loadMoreData方法） self.tableView.mj_footer = [MSHDIYBackFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadMoreData)]; 

數據加載方法

#pragma mark 上拉加載更多數據 - (void)loadMoreData { // 2.模擬2秒後刷新表格UI（真實開發中，能夠移除這段gcd代碼） dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(MJDuration * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{ // 刷新表格 [self.tableView reloadData]; // 拿到當前的上拉刷新控件，結束刷新狀態 [self.tableView.mj_footer endRefreshing]; }); } #pragma mark 加載最後一份數據 - (void)loadLastData { // 2.模擬2秒後刷新表格UI（真實開發中，能夠移除這段gcd代碼） dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(MJDuration * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{ // 刷新表格 [self.tableView reloadData]; // 拿到當前的上拉刷新控件，變爲沒有更多數據的狀態 [self.tableView.mj_footer endRefreshingWithNoMoreData]; }); } #pragma mark 只加載一次數據 - (void)loadOnceData { // 2.模擬2秒後刷新表格UI（真實開發中，能夠移除這段gcd代碼） dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(MJDuration * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{ // 刷新表格 [self.tableView reloadData]; // 隱藏當前的上拉刷新控件 self.tableView.mj_footer.hidden = YES; }); } 

自定義下拉刷新控件 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]; // 設置控件的高度 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; // 打醬油的開關 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 在這裏設置子控件的位置和尺寸 - (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 監聽控件的刷新狀態 - (void)setState:(MJRefreshState)state { MJRefreshCheckState; switch (state) { case MJRefreshStateIdle: [self.loading stopAnimating]; [self.s setOn:NO animated:YES]; self.label.text = @"趕忙下拉吖(開關是打醬油滴)"; break; case MJRefreshStatePulling: [self.loading stopAnimating]; [self.s setOn:YES animated:YES]; self.label.text = @"趕忙放開我吧(開關是打醬油滴)"; break; case MJRefreshStateRefreshing: [self.s setOn:YES animated:YES]; self.label.text = @"加載數據中(開關是打醬油滴)"; [self.loading startAnimating]; break; default: break; } } #pragma mark 監聽拖拽比例（控件被拖出來的比例） - (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 監聽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]; } @end 

自定義下拉刷新動畫 MSHChiBaoZiHeader

• MJRefreshGifHeader.h

#import "MJRefreshGifHeader.h" @interface MSHChiBaoZiHeader : MJRefreshGifHeader @end 

• MJRefreshGifHeader.m

#import "MSHChiBaoZiHeader.h" @implementation MSHChiBaoZiHeader #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