Material Design 中 FloatingActionButton 配合 CoordinatorLayout 实现可折叠 Toolbar-JavaScript中文网-JavaScript教程资源分享门户

前言

在移动应用开发中，UI 设计是十分关键的一环。而 Material Design 是 Google 推出的一种视觉设计规范，它倡导简洁、轻盈、有深度和有层次的设计风格。其中 FloatingActionButton 是 Material Design 中必不可少的组件之一，而 CoordinatorLayout 则是用来实现可折叠 Toolbar 的关键。

在本文中，将会详细介绍如何使用 FloatingActionButton 和 CoordinatorLayout 实现可折叠 Toolbar。

实现步骤

1. 添加依赖

在项目的 build.gradle 文件中添加以下依赖：

implementation 'com.google.android.material:material:1.4.0'

2. 创建布局文件

在布局文件中，需要包含以下几个组件：

CoordinatorLayout：用来实现 Toolbar 的折叠效果；
AppBarLayout：用来包含 Toolbar 和 CollapsingToolbarLayout；
CollapsingToolbarLayout：用来实现 Toolbar 的折叠效果；
Toolbar：用来显示标题和操作；
NestedScrollView：用来显示内容；
FloatingActionButton：悬浮按钮。

示例代码如下：

// javascriptcn.com 代码示例
<?xml version="1.0" encoding="utf-8"?>
<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:id="@+id/app_bar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fitsSystemWindows="true">

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                android:title="Collapsible Toolbar"/>

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

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

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="?attr/actionBarSize"
        android:clipToPadding="false"
        android:fillViewport="true"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend luctus dui vel bibendum. Aenean molestie rhoncus magna in egestas. Nullam commodo efficitur mi vitae ultricies. Nam convallis hendrerit leo, id bibendum ex vestibulum id. Vestibulum pulvinar consectetur blandit. In vulputate efficitur euismod."
            android:textSize="20sp"/>

    </androidx.core.widget.NestedScrollView>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_add"
        android:layout_margin="16dp"
        app:layout_anchor="@id/app_bar_layout"
        app:layout_anchorGravity="bottom|end"/>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

3. 实现折叠效果

在 Toolbar 的布局文件中，将 CollapsingToolbarLayout 的 app:layout_scrollFlags 属性设置为 scroll|exitUntilCollapsed。这样，当用户向上滚动内容时，Toolbar 会向上折叠，并且在完全折叠之前不会消失。

<com.google.android.material.appbar.CollapsingToolbarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true"
    app:layout_scrollFlags="scroll|exitUntilCollapsed">

在 AppBarLayout 的布局文件中，将 NestedScrollView 的 app:layout_behavior 属性设置为 @string/appbar_scrolling_view_behavior，这样，当用户向上滚动内容时，Toolbar 会折叠并滑出视图。

<androidx.core.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="?attr/actionBarSize"
    android:clipToPadding="false"
    android:fillViewport="true"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

4. 实现悬浮按钮

在 FloatingActionButton 的布局文件中，将 app:layout_anchor 属性设置为 @id/app_bar_layout，将 app:layout_anchorGravity 属性设置为 bottom|end。这样，悬浮按钮会出现在可折叠 Toolbar 的底部。

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_add"
    android:layout_margin="16dp"
    app:layout_anchor="@id/app_bar_layout"
    app:layout_anchorGravity="bottom|end"/>

总结

通过本文的介绍，相信大家已经了解了如何使用 FloatingActionButton 和 CoordinatorLayout 实现可折叠 Toolbar。这种布局方式可以让应用更加美观、更有层次感。如果你有其他关于前端开发的问题，欢迎在下方留言，我会尽快回复。

参考代码：https://github.com/catchonme/CoordinatorLayoutDemo

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