效果展示:
[图片上传中...(cc8b9348-3fcd-4080-9a6f-678a90ecb483.gif-417203-1668759774931-0)]
<img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/236eb3d07e264fa8bb43a7e3c7318ba0~tplv-k3u1fbpfcp-watermark.image?" alt="潮汐首页.gif" width="30%" />
<img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a96f4544bfbb457d8aa566a998008d51~tplv-k3u1fbpfcp-watermark.image?" alt="仿写.gif" width="30%" />
技术要点:
- 潮汐App的首页布局分为两层,背景为ViewPager的横向场景切换,上层主要为RecyclerView的纵向GridLayout布局。
<p align=center><img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/38f94c2f32784d69bb60dfe6cc993591~tplv-k3u1fbpfcp-watermark.image?" alt="WechatIMG186.png" width="30%" /></p>
- 当Touch事件落在红框内,上层布局不处理,由下层ViewPager捕获事件,当Touch事件落在绿框内,按正常逻辑处理。
- 在下层ViewPager捕获到事件时,需要记录滑动的距离,并判断滑动方向,如果为横向,则由ViewPager处理,如果为纵向,则触发上层布局滑动,覆盖住事件透传区域。
- RecyclerView需要与TitleBar嵌套滑动,此处用的CoordinatorLayout结合AppBarLayout实现,由于AppbarLayout没有暴露setTopAndBottomOffset接口,只能通过setExpanded实现RecyclerView的自动滑动,所以Demo相较于潮汐App首页仍有一些瑕疵。