下拉刷新、上拉加载是业务中常用的组件,一款好的下拉刷新组件,能显著提高用户操作时的使用体验。下面让我来介绍一下XZRefresh这款新发现的下拉刷新组件吧。与别的组件相比,一是它本身内置了两个相当不错的刷新效果,二是它的流畅性、稳定性和可拓展性都十分的强大。
安装使用
推荐使用CocoaPods安装XZRefresh组件。
pod 'XZRefresh'
效果
XZRefresh内置了两种刷新效果。
- XZRefreshStyle1View:默认下拉刷新效果,也可作为上拉加载效果。
- XZRefreshStyle2View:默认上拉加载效果,也可作为下拉刷新效果。
如何使用
一行代码实现下拉刷新或上拉加载。
// 使用默认的下拉刷新控件
[self.tableView xz_headerRefreshingView];
// 使用默认的上拉加载控件
[self.tableView xz_footerRefreshingView];
实现XZRefreshDelegate协议即可接收事件,默认情况下 UIScrollView 的 delegate 即为下拉刷新或上拉加载的事件接收者。
- (void)scrollView:(UIScrollView *)scrollView headerRefreshingViewDidBeginAnimating:(XZRefreshView *)headerRefreshingView {
// handle the pull down refreshing
[headerRefreshingView endAnimating];
}
- (void)scrollView:(UIScrollView *)scrollView footerRefreshingViewDidBeginAnimating:(XZRefreshView *)footerRefreshingView {
// handle the pull up refreshing
[footerRefreshingView endAnimating];
}
也可以指定事件接收者。
self.tableView.xz_headerRefreshingView.delegate = self;
self.tableView.xz_footerRefreshingView.delegate = self;
主动唤起刷新状态。
[self.tableView.xz_headerRefreshingView beginAnimating];
[self.tableView.xz_footerRefreshingView beginAnimating:YES completion:^(BOOL finished) {
// the footer refreshing view is animating now
}];
通过XZRefreshView的adjustment属性,可以设置适配UIScrollView边距的方式,支持三种模式:
- XZRefreshAdjustmentAutomatic:自动适配由 contentInsetAdjustmentBehavior 影响的边距
- XZRefreshAdjustmentNormal:仅适配 UIScrollView 自身的边距。
- XZRefreshAdjustmentNone:不适配边距。
self.tableView.xz_footerRefreshingView.adjustment = XZRefreshAdjustmentNone;
除适配模式外,还可以通过offset属性,来调整刷新视图的位置。
self.tableView.xz_headerRefreshingView.offset = 50; // 向上偏移 50 点
self.tableView.xz_footerRefreshingView.offset = 50; // 向下偏移 50 点
另外,底部刷新视图,始终布局在UIScrollView的底部,即使在contentSize.height < bounds.size.height时也是。
自定义
1、XZRefreshView提供了完整的刷新过程事件,继承它即可自定义刷新效果,具体可参考内置的XZRefreshStyle1View和XZRefreshStyle2View两款刷新效果。
2、实现二楼思路,由于不同的业务,需要的二楼效果不一定相同,所以暂没有内置二楼效果。
- (void)scrollView:(UIScrollView *)scrollView didScrollDistance:(CGFloat)distance {
if (distance < 50) {
// 展示下拉刷新的过程
} else if (distance < 100) {
// 松手进入刷新,或继续下拉进入二楼
} else if (distance < 150) {
// 松手进入二楼
} else {
// 直接进入二楼
[self.delegate enterSecondFloor:YES];
}
}
- (BOOL)scrollView:(UIScrollView *)scrollView shouldBeginRefreshing:(CGFloat)distance {
if (distance < 50) {
return NO;
}
if (distance < 100) {
return YES; // 进入刷新状态
}
if (distance < 150) {
[self.delegate enterSecondFloor:NO]; // 松手进入二楼
return NO;
}
return NO; // 直接进入二楼
}
/// 处理事件
- (void)enterSecondFloor:(BOOL)type {
UIViewController *vc = UIViewController.new;
if (type) { // 如有必要,可以为两种不同交互方式,设计不同的转场效果
[self presentViewController:vc animated:YES completion:nil];
} else {
[self.navigationController pushViewController:vc animated:YES];
}
}
示例工程
要运行示例工程,请在拉取代码后,先在Pods目录下执行pod install命令。
To run the example project, clone the repo, and run pod install from the Pods directory first.
环境需求 Requirements
iOS 11.0, Xcode 14.0
Author
Xezun, developer@xezun.com
License
XZRefresh is available under the MIT license. See the LICENSE file for more info.
本文介绍了XZRefresh下拉刷新组件,包括内置的两种刷新效果、安装方法、使用示例以及如何自定义刷新过程。适用于iOS11.0及以上,开发者可以通过CocoaPods轻松集成。
1406





