全部產品
Search
文件中心

Mobile Platform as a Service:下拉重新整理組件

更新時間:Jul 13, 2024

AURefreshView 為新版下拉重新整理小螞蟻樣式,目前有兩種色值,見效果圖。

效果圖

添加組件

使用 cocoapods-mPaaS 外掛程式添加通用 UI 以及 Lottie 組件 SDK。操作步驟如下:

  1. 在 Podfile 檔案中,使用 mPaaS_pod "mPaaS_CommonUI"mPaaS_pod "mPaaS_Lottie" 命令添加 通用 UI 以及 Lottie 組件依賴。

  2. 在命令列中執行 pod install 即可完成添加。

介面說明

typedef NS_ENUM(NSUInteger, AURefreshViewState) {
    AURefreshViewStateNomal = 0,           // 列表恢複為初始指定位置
    AURefreshViewStateBeginPulling = 1,    // 使用者開始下拉
    AURefreshViewStateLoading = 2,         // 觸發使用者 RPC 載入,列表 contentInset 設定在預設地方
    AURefreshViewStateFinishedLoading = 3, // RPC 載入結束,列表 contentInset 即將恢複為原始預設的
    AURefreshViewStateBeginResetting = 4,  // 列表 contentInset 正在開始恢複原始預設 inset
};
typedef NS_ENUM(NSUInteger, AURefreshViewType) {
    AURefreshViewDefault,       // 頁面內的重新整理樣式
    AURefreshViewTypeFeature1   // 用在帶有一定背景的 titlebar 如首頁或者財富 tab
};
@protocol AURefreshViewDelegate;
/**
 mPaaS 下拉重新整理動畫 View
 */
@interface AURefreshView : UIView
@property (nonatomic, readonly) AURefreshViewState state;
@property (nonatomic, weak) id <AURefreshViewDelegate> delegate;
/**
 下拉重新整理動畫 Lottie 控制項
 */
@property (nonatomic, strong) UIView /*LOTAnimationView */ *lottieAnimationView;
/* 指定下拉重新整理所在的父 view,下拉重新整理初始預設高度是 scrollView 的高度;預設將 refreshView 添加到父 scrollView 上
 * 預設初始 frame 為(0, 0 - scrollView.height, scrollView.width, scrollView.height)) */
- (instancetype)initWithSuperView:(UIScrollView *)scrollView
                             type:(AURefreshViewType)type
                          bizType:(NSString *)bizType;
// 下拉重新整理文案
- (void)setupLabelText:(NSString *)text;
// UIScrollView的delegate 裡面回調以下方法
- (void)auRefreshScrollViewWillBeginDragging:(UIScrollView *)scrollView;
- (void)auRefreshScrollViewDidScroll:(UIScrollView *)scrollView;
- (void)auRefreshScrollViewDidEndDragging:(UIScrollView *)scrollView;
// 結束動畫收合列表請調用以下方法
- (void)auRefreshScrollViewDidFinishedLoading:(UIScrollView *)scrollView;
// 需要業務方先滾動到初始位置,然後再調用自動下拉重新整理,否則滾動會異常
- (void)autoPullRefreshScrollView:(UIScrollView *)scrollView;
//
- (void)pauseAnimation;
// 頁面展開
- (void)resumeAnimation;
@end
@protocol AURefreshViewDelegate <NSObject>
@optional
// 剛剛下拉到預設位置即 (Lottie)View 的高度時觸發該協議
- (void)auRefreshViewDidTriggerloading:(AURefreshView *)view;
// 下拉重新整理完成複位操作
- (void)auRefreshViewDidDidFinishAnimation:(AURefreshView *)view;
@end

程式碼範例

標準樣式

以下代碼展示標準樣式的下拉重新整理組件。

_refreshView = [[AURefreshView alloc] initWithSuperView:self.tableView type:AURefreshViewDefault bizType:@"demo"];
[_refreshView setupLabelText:@"正在重新整理"];
[self.tableView addSubview:_refreshView];
- (void)viewDidAppear:(BOOL)animated
{
    [super viewDidAppear:animated];
    [_refreshView resumeAnimation];
}
- (void)viewDidDisappear:(BOOL)animated
{
    [super viewDidDisappear:animated];
    [_refreshView pauseAnimation];
}
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
    [_refreshView auRefreshScrollViewWillBeginDragging:scrollView];
}
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    [_refreshView auRefreshScrollViewDidScroll:scrollView];
}
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
    [_refreshView auRefreshScrollViewDidEndDragging:scrollView];
 }

自訂樣式

自訂樣式需使用 Lottie,並重寫 AUThemeManager 的 Category。程式碼範例如下:

+ (NSString *)au_defaultTheme_refresh_lottie_path{

    NSString *path = [[NSBundle mainBundle] pathForResource:@"ani" ofType:@"json"];
    return path;

}