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