阿里云首页 移动开发平台 mPaaS

下拉刷新组件

AURefreshView 为新版下拉刷新小蚂蚁样式,目前有两种色值,见效果图。

效果图

添加组件

要使用 AURefreshView,需要添加 通用 UI 以及 Lottie 组件。根据您采用的接入方式,请选择相应的添加方式。

  • 使用 mPaaS Xcode Extension。
    此方式适用于采用了 基于 mPaaS 框架接入基于已有工程且使用 mPaaS 插件接入 的接入方式。
    1. 点击 Xcode 菜单项 Editor > mPaaS > 编辑工程,打开编辑工程页面。
    2. 选择 通用 UILottie,保存后点击 开始编辑,即可完成添加。
      add lottie
  • 使用 cocoapods-mPaaS 插件。
    此方式适用于采用了 基于已有工程且使用 CocoaPods 接入 的接入方式。
    1. 在 Podfile 文件中,使用 mPaaS_pod "mPaaS_CommonUI"mPaaS_pod "mPaaS_Lottie" 命令添加 通用 UI 以及 Lottie 组件依赖。
    2. 在命令行中执行 pod install 即可完成添加。

接口说明

  1. typedef NS_ENUM(NSUInteger, AURefreshViewState) {
  2. AURefreshViewStateNomal = 0, // 列表恢复为初始指定位置
  3. AURefreshViewStateBeginPulling = 1, // 用户开始下拉
  4. AURefreshViewStateLoading = 2, // 触发用户RPC加载,列表 contentInset 设置在默认地方
  5. AURefreshViewStateFinishedLoading = 3, // RPC加载结束,列表 contentInset 即将恢复为原始默认的
  6. AURefreshViewStateBeginResetting = 4, // 列表 contentInset 正在开始恢复原始默认 inset
  7. };
  8. typedef NS_ENUM(NSUInteger, AURefreshViewType) {
  9. AURefreshViewDefault, // 页面内的刷新样式
  10. AURefreshViewTypeFeature1 // 用在带有一定背景的 titlebar 如首页或者财富 tab
  11. };
  12. @protocol AURefreshViewDelegate;
  13. /**
  14. mPaaS 下拉刷新动画 View
  15. */
  16. @interface AURefreshView : UIView
  17. @property (nonatomic, readonly) AURefreshViewState state;
  18. @property (nonatomic, weak) id <AURefreshViewDelegate> delegate;
  19. /**
  20. 下拉刷新动画 Lottie 控件
  21. */
  22. @property (nonatomic, strong) UIView /*LOTAnimationView */ *lottieAnimationView;
  23. /* 指定下拉刷新所在的父 view,下拉刷新初始默认高度是 scrollView 的高度;默认将 refreshView 添加到父 scrollView 上
  24. * 默认初始frame为(0, 0 - scrollView.height, scrollView.width, scrollView.height)) */
  25. - (instancetype)initWithSuperView:(UIScrollView *)scrollView
  26. type:(AURefreshViewType)type
  27. bizType:(NSString *)bizType;
  28. // 下拉刷新文案
  29. - (void)setupLabelText:(NSString *)text;
  30. // UIScrollView的delegate 里面回调以下方法
  31. - (void)auRefreshScrollViewWillBeginDragging:(UIScrollView *)scrollView;
  32. - (void)auRefreshScrollViewDidScroll:(UIScrollView *)scrollView;
  33. - (void)auRefreshScrollViewDidEndDragging:(UIScrollView *)scrollView;
  34. // 结束动画收起列表请调用以下方法
  35. - (void)auRefreshScrollViewDidFinishedLoading:(UIScrollView *)scrollView;
  36. // 需要业务方先滚动到初始位置,然后再调用自动下拉刷新,否则滚动会异常
  37. - (void)autoPullRefreshScrollView:(UIScrollView *)scrollView;
  38. //
  39. - (void)pauseAnimation;
  40. // 页面展开
  41. - (void)resumeAnimation;
  42. @end
  43. @protocol AURefreshViewDelegate <NSObject>
  44. @optional
  45. // 刚刚下拉到默认位置即 (Lottie)View 的高度时触发该协议
  46. - (void)auRefreshViewDidTriggerloading:(AURefreshView *)view;
  47. // 下拉刷新完成复位操作
  48. - (void)auRefreshViewDidDidFinishAnimation:(AURefreshView *)view;
  49. @end

代码示例

本部分提供标准样式及自定义样式的刷新组件示例代码。

标准样式

以下代码展示标准样式的下拉刷新组件。

  1. _refreshView = [[AURefreshView alloc] initWithSuperView:self.tableView type:AURefreshViewDefault bizType:@"demo"];
  2. [_refreshView setupLabelText:@"正在刷新"];
  3. [self.tableView addSubview:_refreshView];
  4. - (void)viewDidAppear:(BOOL)animated
  5. {
  6. [super viewDidAppear:animated];
  7. [_refreshView resumeAnimation];
  8. }
  9. - (void)viewDidDisappear:(BOOL)animated
  10. {
  11. [super viewDidDisappear:animated];
  12. [_refreshView pauseAnimation];
  13. }
  14. - (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
  15. {
  16. [_refreshView auRefreshScrollViewWillBeginDragging:scrollView];
  17. }
  18. - (void)scrollViewDidScroll:(UIScrollView *)scrollView
  19. {
  20. [_refreshView auRefreshScrollViewDidScroll:scrollView];
  21. }
  22. - (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
  23. {
  24. [_refreshView auRefreshScrollViewDidEndDragging:scrollView];
  25. }

自定义样式

自定义样式需使用 Lottie,并重写 AUThemeManagerCategory

代码示例如下:

  1. + (NSString *)au_defaultTheme_refresh_lottie_path{
  2. NSString *path = [[NSBundle mainBundle] pathForResource:@"ani" ofType:@"json"];
  3. return path;
  4. }