Material Design 中 CoordinatorLayout 的使用与优化-JavaScript中文网-JavaScript教程资源分享门户

前言

Material Design 是 Google 推出的一种全新的设计语言，它提出了许多新概念和新能力，其中最受欢迎的是 CoordinatorLayout。 CoordinatorLayout 是一个可以协调子控件之间的交互行为，例如当你的 RecyclerView 滚动时，使用该布局的 AppBarLayout 将自动滚动到屏幕外，并展现出一个固定的 Toolbar。

CoordinatorLayout 的基本使用

引入依赖

使用前需要在模块的 build.gradle 文件中添加以下依赖：

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

布局文件结构

在布局文件中，使用 CoordinatorLayout 作为根布局，然后添加我们需要的子布局，这里以 AppBarLayout 和 RecyclerView 为例：

// javascriptcn.com 代码示例
<androidx.coordinatorlayout.widget.CoordinatorLayout
        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_width="match_parent"
                android:layout_height="match_parent"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">

                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="220dp"
                    android:src="@drawable/image"
                    android:scaleType="centerCrop"
                    app:layout_collapseMode="parallax" />

                <androidx.appcompat.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    app:layout_collapseMode="pin" />

            </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:scrollbars="vertical"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    </androidx.coordinatorlayout.widget.CoordinatorLayout>

在上述布局文件中：

CoordinatorLayout 是根布局；
AppBarLayout 和 RecyclerView 是其直接子布局；
CollapsingToolbarLayout 是 AppBarLayout 的直接子布局，并且它的布局属性 app:layout_scrollFlags="scroll|exitUntilCollapsed" 指定当 RecyclerView 滚动时，该布局将同时滚动并最终会折叠，其中 exitUntilCollapsed 表示在完全折叠之前该布局会保持在视图范围内；
ImageView 和 Toolbar 是 CollapsingToolbarLayout 的直接子布局，并且它们都有一个布局属性，app:layout_collapseMode，其值分别为 parallax 和 pin。parallax 表示当 CollapsingToolbarLayout 折叠时，ImageView 仍然可以移动并产生视差效果，而 pin 表示当 CollapsingToolbarLayout 完全折叠时，Toolbar 将固定在顶部不动。

实现效果

在运行代码之前，先看一下上述布局实现的效果：

CoordinatorLayout 的优化

虽然 CoordinatorLayout 很好用，但是在实现复杂布局的时候，它有时也会出现一些卡顿的现象，尤其是当子控件非常多的时候。下面我们来介绍一些优化 CoordinatorLayout 的方法。

避免不必要的嵌套

当然，一个更好的方法是尽可能减少使用 CoordinatorLayout，因为不必要的嵌套会导致性能下降。例如，我们可以使用 FrameLayout 替代 CoordinatorLayout + AppBarLayout 实现折叠效果。

使用 @Keep 注解

因为 CoordinatorLayout 中有很多自定义的 View，所以当遇到混淆时，可能会出现问题。为了解决这个问题，我们需要在自定义的 View 上添加 @Keep 注解，如下所示：

// javascriptcn.com 代码示例
import androidx.annotation.Keep;

@Keep
public class MyCustomView extends View {

    public MyCustomView(Context context, AttributeSet attrs) {
        super(context, attrs);
        // ...
    }

    // ...
}

使用滑动顺滑模式

在设置 CoordinatorLayout 的滑动效果时，有两种模式：SMOOTH 和 SNAPSHOT。SMOOTH 模式会使布局滑动更加顺畅，因此建议优先使用 SMOOTH 模式。如下所示：

// javascriptcn.com 代码示例
<androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        app:layout_scrollMode="scroll">

        <!-- ... -->

    </androidx.coordinatorlayout.widget.CoordinatorLayout>

总结

通过本文的介绍，我们学习了 CoordinatorLayout 的基本使用和优化方法。当然，该技术还有很多使用场景和用法，读者可以在实际工作中不断进行学习和实践。

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