Material Design 组件之 AppBarLayout - 为您的应用增添灵动之美

Android

2024-01-08 09:54:14

AppBarLayout - 您的应用必备的灵动导航栏

想让您的应用更具沉浸感、更符合 Material Design 设计规范？AppBarLayout 组件将成为您的不二之选！这个神奇的垂直方向 LinearLayout 能够让您的应用导航栏随手势滑动而动，赋予用户丝滑顺畅的交互体验。

什么是 AppBarLayout？

AppBarLayout 顾名思义，就是位于应用顶部的布局，通常包含标题、导航栏、工具栏等元素。它的主要作用是协调这些元素在滚动时产生的视觉效果，比如标题和导航栏的淡入淡出、工具栏的隐藏和显示等。

AppBarLayout 的重要属性

AppBarLayout 提供了丰富的属性，让我们可以轻松实现各种效果。

scrollFlags ：这个属性决定了 AppBarLayout 在滚动时如何响应手势。它有两种主要模式：
- SCROLL_FLAG_SCROLL ：这意味着 AppBarLayout 将随着内容一起滚动。
- SCROLL_FLAG_SNAP ：这意味着 AppBarLayout 将在滚动到一定距离时自动隐藏或显示。
targetElevation ：这个属性设置了 AppBarLayout 在完全展开时的海拔高度。海拔高度越高，阴影就越明显。

AppBarLayout 的使用

AppBarLayout 的使用非常简单，只需要将其作为父布局，然后将子布局添加到其中即可。子布局可以是标题、导航栏、工具栏等任何元素。

<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    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"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|snap"
            app:contentScrim="?attr/colorPrimary"
            app:toolbarId="@+id/toolbar">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:scaleType="centerCrop"
                android:src="@drawable/image" />

            <com.google.android.material.toolbar.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

        </com.google.android.material.appbar.CollapsingToolbarLayout>

    </com.google.android.material.appbar.AppBarLayout>

    <androidx.recyclerview.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>