开发中我们经常会遇到这样一件事情,比如我的这个界面有3个Tab,三个Tab对应着不同的列表,同时共享一个header。
常规的做法就是设计一个recyclerview或者listview将header添加进去。
但这样存在一个问题就是如果切换不同的数据源,这个recyclerview或者listview在数据量少的情况下会发生界面的跳动,可以看到当点击第三个按钮由于数据量少,界面跳动到了头部位置,这种情况会造成不好的用户体验。
更好的做法是将header布局和list分开,这样切换list的时候就不会造成这种问题。但是要解决嵌套滑动的问题,自己写事件分发非常麻烦。
接下来介绍一种google官方的方法来解决嵌套滑动的问题。
首先我们要引入Coordinatorlayout和AppBarLayout
在app的build.gradle中添加
implementation 'com.android.support:design:28.0.0'
另外值得注意的是,AppBarLayout实际上现在已经从google.support.design包中移除了,放到了Google2018年推出的com.google.android.material:material:1.0.0包中,但是在引入这个包的时候,会存在与AndroidX的编译冲突,我无法解决。
google的推荐做法是引入com.android.support:design:28.0.0这个包,注意你的编译sdk也要选择28
If you don't want to switch over to the newandroidxandcom.google.android.material packages yet, you can use Material Components via the com.android.support:design:28.0.0dependency.
下面是主要的布局文件
你的头布局文件一定要放在AppBarLayout中,这里有一个问题如果直接使用include标签使用layout属性加入头布局并设置app:layout_scrollFlags="scroll"属性会存在无效的问题,原因不明,可以使用在外层包裹一个Framlayout并设置app:layout_scrollFlags="scroll"属性的做法解决
同时在recyclerview中添加属性app:layout_behavior="@string/appbar_scrolling_view_behavior"即可
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<FrameLayout
app:layout_scrollFlags="scroll"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<include layout="@layout/header" />
</FrameLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
app:layout_behavior="@string/appbar_scrolling_view_behavior"
android:id="@+id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</android.support.design.widget.CoordinatorLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="@+id/btn_1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<Button
android:id="@+id/btn_2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<Button
android:id="@+id/btn_3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"/>
</LinearLayout>
</FrameLayout>
最终效果