美文网首页
iOS常用刷新控件(下拉、上拉)详解

iOS常用刷新控件(下拉、上拉)详解

作者: 在路上浅谈管理 | 来源:发表于2019-07-23 10:26 被阅读0次

首先说一下:UIActivityIndicator作为刷新控件
主要实现方法如下:

// property
    @property (strong, nonatomic) UIActivityIndicatorView *activityIndicator;

// create UI
   self.activityIndicator = [[UIActivityIndicatorView alloc]initWithActivityIndicatorStyle:(UIActivityIndicatorViewStyleGray)];
    [self.view addSubview:self.activityIndicator];
    //属性值是一个枚举变量,只有三个值:
    //UIActivityIndicatorViewStyleWhite; 白色圆圈
    //UIActivityIndicatorViewStyleWhiteLarge; 白色圆圈 但是要大些
    //UIActivityIndicatorViewStyleGray; 灰色圆圈
    self.activityIndicator.frame= CGRectMake(100, 100, 100, 100);
    //设置小菊花颜色
    self.activityIndicator.color = [UIColor blackColor];
    //设置背景颜色
    self.activityIndicator.backgroundColor = [UIColor cyanColor];
    //刚进入这个界面会显示控件。并且停止旋转也会显示,只是没有在转动而已。
    self.activityIndicator.hidesWhenStopped = NO;
// 控制动作
    [self.activityIndicator startAnimating];
    
    [self.activityIndicator stopAnimating];

MJRefresh

下拉刷新01-默认

self.tableView.header = [MJRefreshNormalHeader headerWithRefreshingBlock:^{
   // 进入刷新状态后会自动调用这个block
}];
或
// 设置回调(一旦进入刷新状态,就调用target的action,也就是调用self的loadNewData方法)
self.tableView.header = [MJRefreshNormalHeader headerWithRefreshingTarget:self refreshingAction:@selector(loadNewData)];

// 马上进入刷新状态
[self.tableView.header beginRefreshing];
效果.gif

下拉刷新02-动画图片

// 设置回调(一旦进入刷新状态,就调用target的action,也就是调用self的loadNewData方法)
MJRefreshGifHeader *header = [MJRefreshGifHeader headerWithRefreshingTarget:self refreshingAction:@selector(loadNewData)];
// 设置普通状态的动画图片
[header setImages:idleImages forState:MJRefreshStateIdle];
// 设置即将刷新状态的动画图片(一松开就会刷新的状态)
[header setImages:pullingImages forState:MJRefreshStatePulling];
// 设置正在刷新状态的动画图片
[header setImages:refreshingImages forState:MJRefreshStateRefreshing];
// 设置header
self.tableView.mj_header = header;
效果.gif

下拉刷新03-隐藏时间

// 隐藏时间
header.lastUpdatedTimeLabel.hidden = YES;
image.png

下拉刷新04-隐藏状态和时间

// 隐藏时间
header.lastUpdatedTimeLabel.hidden = YES;

// 隐藏状态
header.stateLabel.hidden = YES;
image.png

下拉刷新05-自定义文字

// 设置文字
[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];
自定义.gif

下拉刷新06-自定义刷新控件

self.tableView.mj_header = [MJDIYHeader headerWithRefreshingTarget:self refreshingAction:@selector(loadNewData)];
// 具体实现参考MJDIYHeader.h和MJDIYHeader.m
自定义gif

上拉刷新01-默认

self.tableView.mj_footer = [MJRefreshAutoNormalFooter footerWithRefreshingBlock:^{
   // 进入刷新状态后会自动调用这个block
}];
或
// 设置回调(一旦进入刷新状态,就调用target的action,也就是调用self的loadMoreData方法)
self.tableView.mj_footer = [MJRefreshAutoNormalFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadMoreData)];
image.png

上拉刷新02-动画图片

// 设置回调(一旦进入刷新状态,就调用target的action,也就是调用self的loadMoreData方法)
MJRefreshAutoGifFooter *footer = [MJRefreshAutoGifFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadMoreData)];

// 设置刷新图片
[footer setImages:refreshingImages forState:MJRefreshStateRefreshing];

// 设置尾部
self.tableView.mj_footer = footer;
687474703a2f2f696d61676573302e636e626c6f67732e636f6d2f626c6f67323031352f3439373237392f3230313530362f3134313230353134313434353739332e676966.gif

上拉刷新03-隐藏刷新状态的文字

// 隐藏刷新状态的文字
footer.refreshingTitleHidden = YES;
// 如果没有上面的方法,就用footer.stateLabel.hidden = YES;
687474703a2f2f696d61676573302e636e626c6f67732e636f6d2f626c6f67323031352f3439373237392f3230313530362f3134313230353230303938353737342e676966.gif

上拉刷新04-全部加载完毕

// 变为没有更多数据的状态
[footer endRefreshingWithNoMoreData];
687474703a2f2f696d61676573302e636e626c6f67732e636f6d2f626c6f67323031352f3439373237392f3230313530362f3134313230353234383633343638362e676966.gif

上拉刷新05-自定义文字

// 设置文字
[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];
687474703a2f2f696d61676573302e636e626c6f67732e636f6d2f626c6f67323031352f3439373237392f3230313530362f3134313230353239353531313135332e676966.gif

上拉刷新06-加载后隐藏

// 隐藏当前的上拉刷新控件
self.tableView.mj_footer.hidden = YES;
image.png

上拉刷新07-自动回弹的上拉01

self.tableView.mj_footer = [MJRefreshBackNormalFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadMoreData)];
image.png

上拉刷新08-自动回弹的上拉02

MJRefreshBackGifFooter *footer = [MJRefreshBackGifFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadMoreData)];

// 设置普通状态的动画图片
[footer setImages:idleImages forState:MJRefreshStateIdle];
// 设置即将刷新状态的动画图片(一松开就会刷新的状态)
[footer setImages:pullingImages forState:MJRefreshStatePulling];
// 设置正在刷新状态的动画图片
[footer setImages:refreshingImages forState:MJRefreshStateRefreshing];

// 设置尾部
self.tableView.mj_footer = footer;
image.png

上拉刷新09-自定义刷新控件(自动刷新)

self.tableView.mj_footer = [MJDIYAutoFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadMoreData)];
// 具体实现参考MJDIYAutoFooter.h和MJDIYAutoFooter.m
image.png

上拉刷新10-自定义刷新控件(自动回弹)

self.tableView.mj_footer = [MJDIYBackFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadMoreData)];
// 具体实现参考MJDIYBackFooter.h和MJDIYBackFooter.m
687474703a2f2f696d61676573302e636e626c6f67732e636f6d2f626c6f67323031352f3439373237392f3230313530362f3134313230353536303636363831392e676966.gif

UICollectionView01-上下拉刷新

// 下拉刷新
self.collectionView.mj_header = [MJRefreshNormalHeader headerWithRefreshingBlock:^{
   // 进入刷新状态后会自动调用这个block
}];

// 上拉刷新
self.collectionView.mj_footer = [MJRefreshAutoNormalFooter footerWithRefreshingBlock:^{
   // 进入刷新状态后会自动调用这个block
}];
image.png

UIWebView01-下拉刷新

// 添加下拉刷新控件
self.webView.scrollView.mj_header = [MJRefreshNormalHeader headerWithRefreshingBlock:^{
   // 进入刷新状态后会自动调用这个block
}];
image.png
参考文章:https://blog.csdn.net/leonliu070602/article/details/51830286
其他好用的刷新控件:https://www.jianshu.com/p/4cd1ef3986ac
各种刷洗控件汇总:https://www.jianshu.com/p/6bbe0558389b
iOS 常用的 上下左右 拉刷新控件:https://blog.csdn.net/weixin_33711647/article/details/87044511

相关文章

网友评论

      本文标题:iOS常用刷新控件(下拉、上拉)详解

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