UIScrollView嵌套滑动手势冲突的简易实现

本文介绍一种新颖的商城类App界面实现方案,利用单一TableView与HeaderView结合动画,替代传统ScrollView手势穿透方法,提升手势操作流畅度,降低实现与学习成本。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

明确需求

现在有较多的商城类app有如下需求,界面上带有headerView,并且有一个barView可悬停,最下方为多个可左右滑动的tableView,具体可参考下图

swipTableView-1.gif

另类实现

在网上关于此类需求的实现较多,大多数为使用UIScrollView手势穿透(多个视图响应一个手势)来达到效果。
此前笔者也是用类似方法实现,最近想到了另一种实现方案(实现和学习成本很低)。

界面层次

swipTableView-2.jpg

实现方案

通过界面层次就很容易明白笔者的思路了,在界面上只有一个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
如有错误之处请指出,谢谢

转载于:https://www.cnblogs.com/purple-sweet-pottoes/p/10517294.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值