CoordinatorLayout、AppBarLayout、CollapsingToolbarLayout的使用

最新推荐文章于 2025-05-28 10:50:24 发布

在下嗷呜

最新推荐文章于 2025-05-28 10:50:24 发布

阅读量2.3k

点赞数 33

CC 4.0 BY-SA版权

文章标签： android java

本文链接：https://blog.csdn.net/m0_57150356/article/details/135552280

本文介绍了 Android 中 CoordinatorLayout、AppBarLayout 和 CollapsingToolbarLayout 的使用。CoordinatorLayout 用于处理子视图协调交互，可与 AppBarLayout 等配合创建隐藏工具栏；AppBarLayout 用于制作折叠头部效果；CollapsingToolbarLayout 可实现可折叠式工具栏效果，三者结合能实现复杂 UI 交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、CoordinatorLayout

二、AppBarLayout

三、CollapsingToolbarLayout

CoordinatorLayout(协调布局)常与AppBarLayout和CollapsingToolbarLayout配合使用，常用于创建隐藏工具栏。

一、CoordinatorLayout

CoordinatorLayout 是一个高级的FrameLayout，旨在处理子视图之间的协调交互。它的设计目的是为了实现复杂的 UI 动画和交互效果。CoordinatorLayout可以包含各种子视图，而这些子视图可以通过指定的Behavior进行协调。

Behavior：

Behavior 是 CoordinatorLayout 的子 View 之间交互的一个插件，它指定了 CoordinatorLayout 的直接子View（必须是直接的，间接的即使指定了也无效）在交互时的行为，如拖动、滑动、闪动或任何其它手势，并且是以非侵入式的方式实现这种交互。

指定 CoordinatorLayout 直接子 View 的 Behavior 通常有三种方式：通过代码绑定（LayoutParams 的 setBehavior()）、通过 XML 绑定、通过注解自动绑定（在类上打 @CoordinatorLayout.DefaultBehavior(Behavior.class) 注解）。通常我们使用 XML 绑定的方式指定，如 app:layout_behavior=“@string/appbar_scrolling_view_behavior” 其实就是指定了对应 AppBarLayout.ScrollingViewBehavior 这个类的行为。

<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- 包含在CoordinatorLayout中的其他子视图，例如AppBarLayout -->

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

</androidx.coordinatorlayout.widget.CoordinatorLayout>

在CoordinatorLayout中，可添加AppBarLayout、RecyclerView等控件组成头部和其他部分。

二、AppBarLayout

AppBarLayout 是 LinearLayout 的子类，用于制作折叠头部效果。必须在它的子 View 上设置 app:layout_scrollFlags 属性或者是在代码中调用 setScrollFlags()方法 设置这个属性。

子控件scrollFlags属性常见属性值：

scroll ：表示子视图将随着滚动而滚动。这是基本的滚动标志，用于启用子视图的滚动，如果子控件未设置该属性则无法滚动。
enterAlways ：表示在向下滚动时，子视图会立即进入，即使滚动距离很小。这通常用于隐藏工具栏，以提供更大的屏幕空间。
enterAlwaysCollapsed ：类似于enterAlways ，但在向下滚动时，子视图只是以最小高度进入。
exitUntilCollapsed ：表示在向上滚动时，子视图会折叠，直到达到最小高度后再进行滚动。这通常与 enterAlways 结合使用，以在向下滚动时展开，向上滚动时折叠。
snap ：表示当子视图的滚动范围未完全进入或退出时，会根据滚动距离自动选择是展开还是折叠。通常与 enterAlways 和 exitUntilCollapsed 结合使用。
scrollEnterAlways ：与 enterAlways 类似，但在向上滚动时，子视图会重新展开。
scrollEnterAlwaysCollapsed ：类似于 enterAlwaysCollapsed ，但在向上滚动时，子视图会重新以最小高度展开。

<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">

        <!-- 包含在AppBarLayout中的其他子视图，例如CollapsingToolbarLayout-->

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

    <!-- 包含在CoordinatorLayout中的其他子视图，例如AppBarLayout -->

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

</androidx.coordinatorlayout.widget.CoordinatorLayout>

监听器

除了以上属性，还可以给 AppBarLayout 设置监听器 AppBarLayout.OnOffsetChangedListener ，根据 AppBarLayout 内部的位移变化设置不同的 UI 效果。比如在完全折叠的情况下才显示标题，否则就隐藏标题：

mAppBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {

    public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
        // verticalOffset 取值范围[0,-appBarLayout.getTotalScrollRange()]
        // 展开时取 0
        // 折叠时取 -appBarLayout.getTotalScrollRange()

        if(verticalOffset==0-appBarLayout.getTotalScrollRange()){
            //全折叠
            collapsingToolbarLayout.setTitle("hello");
        }
        else {
            collapsingToolbarLayout.setTitle("");
        }

    }
});

在AppBarLayout中，可添加CollapsingToolbarLayout 等可折叠控件或不可折叠控件。

三、CollapsingToolbarLayout

CollapsingToolbarLayout 是用于实现可折叠式工具栏效果的容器。它通常包裹在 AppBarLayout 中，并允许你创建一个具有折叠和展开效果的工具栏。CollapsingToolbarLayout 可以包含标题、副标题和其他视图，并在滚动时实现相应的折叠效果。

当CollapsingToolbarLayout中添加了ToolBar控件，折叠后高度与ToolBar一致且minHeight属性失效；未添加ToolBar控件时，折叠高度与minHeight属性值一致，如未设置minHeight属性则折叠高度为0。

可使用app:contentScrim属性设置折叠后用于覆盖在折叠部分上的颜色。

可使用app:titleEnable属性设置是否启用CollapsingToolbarLayout标题。未使用app:title属性设置标题时，若包含ToolBar控件则标题使用ToolBar的标题。

可使用app:expandedTitleGravity属性设置扩展状态下标题的对齐方式。

CollapsingToolbarLayout 的子布局有3种折叠模式，通过 app:layout_collapseMode属性 设置：

off ：默认属性，布局将正常显示，无折叠行为。
pin ：CollapsingToolbarLayout 折叠后，此布局将固定在顶部。
parallax ：CollapsingToolbarLayout 折叠时，此布局也会有视差折叠效果。如果设置了此值，还可以使用 app:layout_collapseParallaxMultiplier属性 设置视差滚动因子，即折叠的时候上部先被遮挡(0)还是下部先被遮挡(1)，值为 0~1，默认为0.5。

<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">

        <!-- 包含在AppBarLayout中的其他子视图，例如CollapsingToolbarLayout-->

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"

            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
            android:minHeight="10dp"
            app:contentScrim="@color/~"
            app:title="hello"
            app:titleEnable="true"
            app:expandedTitleGravity="center" >

            <!-- 包含在CollapsingToolbarLayout中的其他子视图，例如Toolbar -->

            <ImageView
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.5"
                ... ... />

            <androidx.appcompat.widget.Toolbar
                ... .../>

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

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

    <!-- 包含在CoordinatorLayout中的其他子视图，例如AppBarLayout -->

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

</androidx.coordinatorlayout.widget.CoordinatorLayout>