android tab吸顶,Android 顶部带Banner的TabLayout吸顶实现方案

前言

本文实现了多列表下banner可上滑，条目可吸顶的效果。

欢迎加入学习小组QQ群: 193765960。

技术方案

场景：

使用自定义的Titlebar

多tab多列表切换

顶部有公用的view,要求在列表上滑时，顶部View要滑出屏幕，tabs吸顶

选型：

其实项目之初，是没有明确要求顶部view是可上下跟随滑动的，所以开始开发时自然而然的选择了：TabLayout+Viewpager+fragment的方案。其中fragment的内容为列表，可上拉自动加载：RecyclerView实现。

效果如下图：

Banner展开状态

后来产品确认时指出顶部的view要可上下跟随滑动，Tabs要吸顶。

效果如下图：

Banner收起，Tabs吸顶状态

第一反应是使用CollapsingToolbarLayout，但是因为app统一使用的自定义Titlebar,所以认为这个方案可能不合适，毕竟CollapsingToolbarLayout是要搭配AppBarLayout和Toolbar来使用的，目的是为了实现可伸缩的toolbar。

实践证明我还是浅薄的很，对知识的掌握还是不够

CollapsingToolbarLayout远比我想的要灵活，以后再也不要认为CollapsingToolbarLayout就是专用于实现伸缩性Toolbar了。

顶部view可滑动跟随的最终方案：

CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout，熟悉的同学可以发现，我们这里是不带Toolbar玩了。

xmlns:app="http://schemas.android.com/apk/res-auto"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

android:id="@+id/title_bar_view"

layout="@layout/my_title_bar"/>

android:layout_width="match_parent"

android:layout_height="match_parent">

android:visibility="gone"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

android:id="@+id/collapsing_toolbar"

android:layout_width="match_parent"

android:layout_height="match_parent"

app:contentScrim="@android:color/transparent"

app:expandedTitleMarginEnd="64dp"

app:expandedTitleMarginStart="48dp"

app:expandedTitleGravity="top"

app:layout_scrollFlags="scroll|exitUntilCollapsed">

//顶部view

android:scaleType="fitXY"

android:layout_width="match_parent"

android:layout_height="match_parent"

app:layout_collapseMode="parallax"

app:layout_collapseParallaxMultiplier="0.7" />

//正常视图

android:layout_width="match_parent"

android:layout_height="match_parent"

app:layout_behavior="@string/appbar_scrolling_view_behavior"

android:orientation="vertical">

android:id="@+id/deals_header_tab"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_weight="1"

app:tabGravity="fill"

app:tabIndicatorColor="#ffcb05"

app:tabIndicatorHeight="2dp"

app:tabMode="scrollable"

app:tabSelectedTextColor="#ffcb05"

app:tabTextColor="#ffffff"/>

android:id="@+id/page"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="#f5f4ef"/>

//正在加载中视图

app:layout_behavior="@string/appbar_scrolling_view_behavior"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:gravity="center"

android:orientation="vertical"

android:visibility="gone">

//断网时，重新加载视图

app:layout_behavior="@string/appbar_scrolling_view_behavior"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="#f5f4ef"

android:gravity="center"

android:orientation="vertical"

android:visibility="gone">

...

细节处理

收缩的顶部view显示处理：要求整个滑动过程一直可见

android:id="@+id/collapsing_toolbar"

android:layout_width="match_parent"

android:layout_height="match_parent"

app:contentScrim="@android:color/transparent"

app:expandedTitleMarginEnd="64dp"

app:expandedTitleMarginStart="48dp"

app:expandedTitleGravity="top"

app:layout_scrollFlags="scroll|exitUntilCollapsed">

app:contentScrim="@android:color/transparent":view收缩到最后阶段，前景色显示透明，这样就可以显示后面的图片

fragment中显示空界面和异常界面时，也要求整个屏幕可以滑动

使用ScrollView或者NestedScrollview包裹fragment的空界面和异常界面，这样就可以触发系统的滑动机制，将滑动事件交给外层的CollapsingToolbarLayout来协同滑动。

后记

如果原本就允许使用系统的toolbar,选型上不会经历很多的纠结，不过好在还是尝试并成功了。通过这次的尝试，也是对CollapsingToolbarLayout有了更新的认识，举一反三，做吸顶类的项目我们是不是掌握了更加便捷的实现？