介绍
AppBarLayout 是 Android Design Support Library 中的一个控件，它可以实现 Material Design 中的折叠式布局。折叠式布局可以在页面滚动时，动态地展示或隐藏标题栏和工具栏，让用户更加专注于页面内容。AppBarLayout 还可以和 CollapsingToolbarLayout 一起使用，实现更加复杂的折叠式布局效果。
本文将介绍如何在 Android 应用中使用 AppBarLayout 实现折叠式布局，包括基本用法、注意事项和示例代码。
基本用法
添加依赖
在项目的 build.gradle 文件中添加以下依赖：
implementation 'com.google.android.material:material:1.4.0'
布局文件
在布局文件中添加 AppBarLayout 和 Toolbar 控件，如下所示：
// www.javascriptcn.com code example
<com.google.android.material.appbar.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.appbar.MaterialToolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:title="Title" />
</com.google.android.material.appbar.AppBarLayout>其中，AppBarLayout 的高度可以设置为 wrap_content 或具体的数值，Toolbar 的高度可以设置为 ?attr/actionBarSize 或具体的数值。
设置滚动标志
在 AppBarLayout 中添加需要滚动的子控件，并设置它们的滚动标志，如下所示：
// www.javascriptcn.com code example
<com.google.android.material.appbar.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.appbar.MaterialToolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:title="Title" />
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|enterAlways|snap" />
</com.google.android.material.appbar.AppBarLayout>其中，layout_scrollFlags 属性可以设置为以下值：
- scroll：子控件可以滚动。
- enterAlways：当页面向下滚动时，子控件会立即进入折叠状态。
- enterAlwaysCollapsed：当页面向下滚动时，子控件会先进入折叠状态，然后再完全折叠。
- exitUntilCollapsed：当页面向上滚动时，子控件会先完全展开，然后再进入折叠状态。
- snap：当页面滚动过程中，子控件会在某个位置停止滚动。
设置折叠效果
可以使用 CollapsingToolbarLayout 控件来设置折叠效果，如下所示：
// www.javascriptcn.com code example
<com.google.android.material.appbar.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<com.google.android.material.appbar.MaterialToolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:title="Title"
app:layout_collapseMode="pin" />
<ImageView
android:id="@+id/imageview"
android:layout_width="match_parent"
android:layout_height="200dp"
android:scaleType="centerCrop"
app:srcCompat="@drawable/image"
app:layout_collapseMode="parallax" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</com.google.android.material.appbar.AppBarLayout>其中，CollapsingToolbarLayout 的 contentScrim 属性可以设置折叠时的背景色，layout_collapseMode 属性可以设置子控件的折叠模式，包括：
- pin：固定在顶部的位置。
- parallax：滚动时产生视差效果。
设置滚动监听
可以通过 AppBarLayout 的 addOnOffsetChangedListener 方法来设置滚动监听，如下所示：
AppBarLayout appbar = findViewById(R.id.appbar);
appbar.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
// verticalOffset 的值为 0 时，AppBarLayout 完全展开；
// verticalOffset 的值为 -appBarLayout.getTotalScrollRange() 时，AppBarLayout 完全折叠。
}
});注意事项
- AppBarLayout 只能有一个 Toolbar 控件，多个 Toolbar 控件会导致折叠效果失效。
- AppBarLayout 的子控件必须设置 layout_scrollFlags 属性，否则会导致折叠效果失效。
- 在使用 CollapsingToolbarLayout 控件时，Toolbar 控件必须设置 layout_collapseMode 属性，否则会导致折叠效果失效。
示例代码
以下是一个简单的示例代码，展示了如何使用 AppBarLayout 实现基本的折叠式布局效果。
布局文件
// www.javascriptcn.com code example
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="@+id/coordinatorlayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.appbar.MaterialToolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:title="Title" />
<ImageView
android:id="@+id/imageview"
android:layout_width="match_parent"
android:layout_height="200dp"
android:scaleType="centerCrop"
app:srcCompat="@drawable/image"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:layout_collapseMode="parallax" />
</com.google.android.material.appbar.AppBarLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>Java 代码
// www.javascriptcn.com code example
AppBarLayout appbar = findViewById(R.id.appbar);
appbar.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
int totalScrollRange = appBarLayout.getTotalScrollRange();
float percentage = (float) Math.abs(verticalOffset) / (float) totalScrollRange;
ImageView imageview = findViewById(R.id.imageview);
imageview.setAlpha(1 - percentage);
}
});在滚动监听中，根据 AppBarLayout 的 getTotalScrollRange 方法获取最大滚动范围，然后根据当前的滚动偏移量计算出滚动百分比，最后根据滚动百分比设置 ImageView 控件的透明度，实现图片的渐变效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d0e643a941bf71341e87bf