Material Design 风格下如何实现折叠式 toolbar

Material Design 是 Google 提出的一套设计风格，旨在为用户提供更加直观、更加具有层次感的用户体验。其中，折叠式 toolbar 是一种常见的设计手段，它可以将页面上方的大面积空白区域利用起来，同时提升用户交互的可用性。

本文将介绍在 Material Design 风格下如何实现折叠式 toolbar，并提供完整的示例代码，帮助读者更好地理解和掌握这一技术。

实现基本原理

折叠式 toolbar 的实现基于两个核心元素：CollapsingToolbarLayout 和 Toolbar。其中，CollapsingToolbarLayout 是一个可以实现折叠效果的容器视图，而 Toolbar 则是用于承载标题和图标等元素的工具栏。

具体来说，CollapsingToolbarLayout 中包含两层 container，分别用于承载 toolbar 和背景图片。当页面滚动时，CollapsingToolbarLayout 将根据用户的滚动行为来不断减少 toolbar 的高度，从而实现折叠效果。

实现示例

首先，需要在 module 的 build.gradle 文件中添加如下依赖：

implementation 'com.google.android.material:material:1.2.0-alpha05'

接下来，在布局文件中添加以下代码：

<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
 
        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_height="300dp"
            android:layout_width="match_parent"
            android:background="@color/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
 
            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"/>
 
            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:padding="16dp"
                app:layout_collapseMode="parallax">
                
                <!-- 此处添加需要展示的界面元素 -->
            
            </RelativeLayout>
        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>
    
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="300dp"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
 
</androidx.coordinatorlayout.widget.CoordinatorLayout>

其中，布局文件主要采用了 CoordinatorLayout 作为容器视图，用于实现 CollapsingToolbarLayout 和 RecyclerView 之间的联动。AppBarLayout 则是将 Toolbar 和 CollapsingToolbarLayout 进行包装，用于扩展滚动效果。

具体来说，CollapsingToolbarLayout 中包含 Toolbar 和背景图两个 container。Toolbar 设置了 layout_collapseMode 为 pin，表示在折叠过程中将一直保持在屏幕上方。RelativeLayout 则是用于承载需要展示的界面元素，并设置了 layout_collapseMode 为 parallax，从而在滚动过程中实现纵向视差效果。

最后，在 Activity 或 Fragment 中添加以下代码：

Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

RecyclerView recyclerView = findViewById(R.id.recyclerView);
recyclerView.setLayoutManager(new LinearLayoutManager(this));
recyclerView.setAdapter(new RecyclerView.Adapter<ViewHolder>() {
    // 此处添加 RecyclerView 的适配器代码
});

至此，折叠式 toolbar 的实现已经完成。在运行应用时，用户可以通过滚动屏幕来体验 toolbar 折叠的效果。

总结

本文介绍了在 Material Design 风格下实现折叠式 toolbar 的基本原理，同时提供了完整的示例代码，帮助读者更好地理解和掌握这一技术。在实际开发过程中，开发者可以根据具体需求对示例代码进行修改，从而实现更加丰富和个性化的界面效果。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a887e0add4f0e0ff1aa860