XZRefresh - 迄今为止最流畅丝滑的iOS下拉刷新控件

Xezun

已于 2024-05-30 18:22:02 修改

阅读量96

点赞数

分类专栏： iOS 文章标签： ios

于 2023-08-16 19:41:10 首次发布

本文链接：https://blog.csdn.net/Xezun/article/details/132326239

版权

iOS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

下拉刷新、上拉加载是业务中常用的组件，一款好的下拉刷新组件，能显著提高用户操作时的使用体验。下面让我来介绍一下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];
    }
}