明確需求
現在有較多的商城類app有如下需求,界面上帶有headerView,並且有一個barView可懸停,最下方為多個可左右滑動的tableView,具體可參考下圖
另類實現
在網上關於此類需求的實現較多,大多數為使用UIScrollView手勢穿透(多個視圖響應一個手勢)來達到效果。
此前筆者也是用類似方法實現,最近想到了另一種實現方案(實現和學習成本很低)。
界面層次
實現方案
通過界面層次就很容易明白筆者的思路了,在界面上只有一個tableView存在,同時在tableView之上還有一個HeaderView(包含廣告和按鈕位),當使用手勢滑動時,再做動畫切換對應的tableView視圖(此種方式沒有復用效果,當然如果有追求極致者也可去實現),HeaderView保持不變。當tableView滑動的同時,改變HeaderView坐標,這樣就可以保證手勢絲滑,不存在任何卡頓。
具體思路
- 協議類
遵循此協議的UIViewController都可以成為界面上的tableView。自定義的tableView只需要關心標示符即可
@protocol SwipTableViewDelegate <NSObject>
@property (nonatomic, strong) UITableView * tableView;
@property (nonatomic, copy) NSString * itemTitle; ///< 子視圖標示符,也可用其他類型代替
@property (nonatomic, assign) CGFloat headerHeight; ///< 頭部視圖高度(包含廣告位和按鈕位)
@property (nonatomic, assign) BOOL needScrollBlock; ///< 滑動時是否需要回調
/* 更新數據源方法 */
- (void)reloadWithDatas:(NSArray *)datas;
/* 當tableView上下滑動時需回調此方法中的block */
- (void)scrollViewDidScrollBlock:(void(^)(CGFloat offsetY))block;
@end
- SwipeSubTableVc(主容器)
此處創建SwipeSubTableVc,自定義headerView和barView,傳入自己配置的UIViewController(需遵守SwipTableViewDelegate協議)
@interface SwipeSubTableVc : UIViewController
@property (nonatomic, strong) UIView * headerView;
@property (nonatomic, strong) UIView * barView;
@property (nonatomic, strong) NSArray<UIViewController<SwipTableViewDelegate> *> * tabArrs;
- (void)resetTabArrs:(NSArray<UIViewController<SwipTableViewDelegate> *> *)tabArrs;
- (void)switchToTabVc:(NSInteger)index;
- (void)tabVcWillSwitchToIndex:(void(^)(NSInteger index))changeBlock;
@end
- 內部實現思路
- 1.添加headerView和barView,並保證在最上層
- 2.添加對應的tableView視圖,並給tableView一個空的頭部視圖
- 3.在tableView滾動同時改變上層頭視圖frame
- 4.左右滑動時,切換為對應tableView做出動畫效果
整體思路如上所述,有思路了代碼就不貼了。如有需要下載demo
如有錯誤之處請指出,謝謝