Tab + Swipe+ RecyclerView + Collapsed

Posted 2020-12-21 zhengxiang88

随着android的不断更新，老旧的布局页面已经过时，这就使得复杂的布局实现起来有些难度，在此记录一下手机中最常见的复杂界面实现方法。

最终效果
本文主要通过分析最新版AS下new project的Srolling Activity和Tabbed Activity布局方式，并查阅网上资料得以实现。其最终的样子类似于

Fig1
布局逻辑
AS自带的布局树，展示不全，没有显示CollapsingToolbarLayout部分

Component Tree

自行手动分析：

Fig3.png

其中的ViewPager里面装有recyclerView
坑点
下拉联动
本文中的组合布局最难搞的就是多个可滚动的组件联动问题，下拉时可能触发折叠栏、RecyclerView和下拉刷新。这三项的顺序通过以下步骤控制

app:layout_scrollFlags属性规定了折叠过程中的行为，本文将其设置为"scroll|snap">，意思是启用滚动和实现吸附。此外该属性常用的标签还有
scroll :
下面几项存在的必要条件
enterAlways :
决定向下滚动时Scrolling View和Child View之间的滚动优先级问题。如最终效果，Fig1绿色部分先滚动，recyclerview（Fig1白色部分）再滚动
enterAlwaysCollapsed
与enterAlways一起使用，不同点为recyclerview（Fig1白色部分）滚动到底，Child View（Fig1绿色标题部分）完全隐藏
exitUntilCollapsed
滚动到底，ChildView（Fig1绿色标题部分）不会完全隐藏

SwipeRefreshLayout的放置位置问题
SwipeRefreshLayout的位置特别关键，因嵌套层次较多，开始时没有设对位置，导致联动出现了问题。经过上网查阅资料发现，很多人也有同样的问题，然而网上方法很多都是通过在Fragment文件中，判断RecyclerView的位置，决定何时调用下拉刷新。这样做显然是违背了设计者一开始的意思。
经过多次尝试，找到SwipeRefreshLayout应囊括在recyclerView之外。代码如下所示，该部分为Fig3的ViewPager里面的内容

<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
android:id="@+id/swipe_refresh_layout_inActivity"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recylerview_activity"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>

注意点
该tab布局，官方提供了FragmentPagerAdapter 和 FragmentStatePagerAdapter两种适配器进行管理。这两种的主要区别为

Fragment的生命周期
FragmentPagerAdapter 中Fragment 实例常驻内存，当其不可见时，仅仅销毁视图结构，其中的内容仍在内存之中。也就是调用到了OndestroyView（）
FragmentStatePagerAdapter 不仅视图层次销毁，实例也被销毁。即Fragment在生命周期中走到了Ondestroy（）
所以，在数据量较小的应用场景中适合用FragmentPagerAdapter进行管理，而当涉及大量图片视频缓存时最好采用FragmentPagerAdapter