CollapsingToolbarLayout 具有 fixed/pinned 工具栏和 "enterAlways" 的功能

Question

我有一个基于 material design guidelines 的标准 "CollapsingToolbarLayout" 实现。

通过下面的设置，我能够实现图片中描述的行为：

<CoordinatorLayout ...>
    <AppBarLayout ...>
        <CollapsingToolbarLayout
            app:layout_scrollFlags="scroll|enterAlways"
            ...>
            <Toolbar
                app:layout_collapseMode="pin">
            </Toolbar>
            <MyCustomContent01 ... />
        </CollapsingToolbarLayout>
    </AppBarLayout>
    <MyCustomContent02 ... />
</CoordinatorLayout>

问题

如何实现以下行为？：

向上滚动： 始终完全展开工具栏，即使我们不在列表的顶部。
向下滚动：仅折叠工具栏，但不隐藏它。

换句话说：如何在保留第 4 步的条件的同时去掉第 3 步？

研究

For me the best article on this topic seems to be this one，但是 none 所提供的配置符合我的需要。

尝试一：

<CollapsingToolbarLayout
    app:layout_scrollFlags="scroll|enterAlways"
 ...>

永远不要完全隐藏工具栏（去掉第 3 步）：FAIL
展开工具栏，即使我们不在顶部：确定

尝试两次

<CollapsingToolbarLayout
    app:layout_scrollFlags="scroll|exitUntilCollapsed"
 ...>

永远不要完全隐藏工具栏（去掉第 3 步）：确定
展开工具栏，即使我们不在顶部：失败

Answer 1

您必须将两个标志结合起来才能获得该效果

试试这个

app:layout_scrollFlags="scroll|exitUntilCollapsed|enterAlways"

Answer 2

Material 库提供的默认 CollapsingToolbarLayout 过于局限于一组预定义的动画。要创建我们自己的自定义效果，假设您想在 RecyclerView/NestedScrollView 上向上滚动时完全展开 header 布局，即使您不在滚动视图的顶部，您也可以使用强大的 MotionLayout这是用于构建动画的 ConstraintLayout 的子类。如果您乐于用平面 Constraint-layout 等价物替换现有的视图层次结构，请阅读下面给出的详细答案。

在这里，我将向您展示如何使用始终固定的 header 布局创建 "enterAlways" 效果，只需三个简单的步骤。

在编写任何代码之前，请查看下面给出的 gif 图像以更好地理解我们正在尝试创建的内容。

1.添加 ConstraintLayout 依赖项：

要在项目中使用 MotionLayout，请将 ConstraintLayout 2.0 依赖项添加到应用的 build.gradle 文件中。如果您使用的是 AndroidX，请添加以下依赖项：

dependencies {
    implementation 'androidx.constraintlayout:constraintlayout:2.0.0-beta2'
}

如果您没有使用 AndroidX，请添加以下支持库依赖项：

dependencies {
    implementation 'com.android.support.constraint:constraint-layout:2.0.0-beta2'
}

2。创建 MotionLayout 文件：

MotionLayout 是 ConstraintLayout 的子类，因此您可以将任何现有的 ConstraintLayout 转换为 MotionLayout。因此创建一个布局文件，如下所示。

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.motion.widget.MotionLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:motion="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
motion:layoutDescription="@xml/motionscene"
tools:showPaths="false">


<View
    android:id="@+id/toolbar_image"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:background="#345634"
    android:fitsSystemWindows="true"
    motion:layout_constraintBottom_toBottomOf="@id/toolbar"
    motion:layout_constraintEnd_toEndOf="parent"
    motion:layout_constraintStart_toStartOf="parent"
    motion:layout_constraintTop_toTopOf="parent" />

<ImageView
    android:id="@+id/home"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:layout_marginTop="16dp"
    android:src="@drawable/abc_ic_ab_back_material"
    android:tint="?android:attr/textColorPrimaryInverse"
    motion:layout_constraintStart_toStartOf="parent"
    motion:layout_constraintTop_toTopOf="parent" />

<LinearLayout
    android:id="@+id/customHeader"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    motion:layout_constraintEnd_toEndOf="parent"
    motion:layout_constraintStart_toEndOf="@id/home"
    motion:layout_constraintTop_toTopOf="parent">

    <LinearLayout
        android:id="@+id/row1"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        android:padding="8dp">

        <View
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:background="#345678" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="16dp"
            android:text="some text"
            android:textColor="#ffffff" />
    </LinearLayout>


    <LinearLayout
        android:id="@+id/row2"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="8dp"
        android:layout_marginRight="16dp"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        android:padding="8dp">

        <View
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:background="#345678" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="16dp"
            android:text="some text"
            android:textColor="#ffffff" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/row3"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="8dp"
        android:layout_marginRight="16dp"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        android:padding="8dp">

        <View
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:background="#345678" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="16dp"
            android:text="some text"
            android:textColor="#ffffff" />
    </LinearLayout>


</LinearLayout>


<LinearLayout
    android:id="@+id/toolbar"
    android:layout_width="0dp"
    android:layout_height="40dp"
    android:layout_marginStart="16dp"
    android:layout_marginLeft="16dp"
    android:layout_marginTop="8dp"
    android:background="#345634"
    android:gravity="center_vertical"
    android:orientation="horizontal"
    android:padding="8dp"
    motion:layout_constraintEnd_toEndOf="parent"
    motion:layout_constraintStart_toEndOf="@id/home"
    motion:layout_constraintTop_toBottomOf="@id/customHeader">

    <View
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:background="#F44336" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="16dp"
        android:text="Toolbar Title"
        android:textColor="#ffffff" />

    <View
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_marginLeft="16dp"
        android:background="#F44336" />
</LinearLayout>

<androidx.core.widget.NestedScrollView
    android:id="@+id/scrollView"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="#ffffff"
    motion:layout_constraintBottom_toBottomOf="parent"
    motion:layout_constraintEnd_toEndOf="parent"
    motion:layout_constraintStart_toStartOf="parent"
    motion:layout_constraintTop_toBottomOf="@+id/toolbar_image">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/text_margin"
        android:text="@string/large_text" />

</androidx.core.widget.NestedScrollView>

</androidx.constraintlayout.motion.widget.MotionLayout>

3。创建一个 MotionScene：

在上一步中，motion:layoutDescription 属性引用了一个 MotionScene。 MotionScene 是一个 XML 资源文件，其中包含相应布局的所有运动描述。为了使布局信息与运动描述分开，每个 MotionLayout 引用一个单独的 MotionScene。请注意，MotionScene 中的定义优先于 MotionLayout 中的任何类似定义。

以下是创建具有 'enterAlways' 效果的所需 fixed/pinned 工具栏的示例 MotionScene 文件：

将文件放在res目录下的xml文件夹中

motionscene.xml

<?xml version="1.0" encoding="utf-8"?>
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:motion="http://schemas.android.com/apk/res-auto">

<Transition
    motion:constraintSetEnd="@id/collapsed"
    motion:constraintSetStart="@id/expanded">

    <OnSwipe
        motion:dragDirection="dragUp"
        motion:moveWhenScrollAtTop="false"
        motion:touchAnchorId="@id/scrollView"
        motion:touchAnchorSide="top" />

</Transition>

<ConstraintSet android:id="@+id/expanded">
    <Constraint android:id="@id/toolbar_image" />
    <Constraint android:id="@id/toolbar" />
    <Constraint android:id="@id/customHeader">
        <PropertySet android:alpha="1" />
    </Constraint>
</ConstraintSet>

<ConstraintSet android:id="@+id/collapsed">
    <Constraint
        android:id="@id/toolbar_image"
        android:layout_height="?attr/actionBarSize"
        motion:layout_constraintEnd_toEndOf="parent"
        motion:layout_constraintStart_toStartOf="parent"
        motion:layout_constraintTop_toTopOf="parent">

    </Constraint>
    <Constraint
        android:id="@id/customHeader"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        motion:layout_constraintEnd_toEndOf="parent"
        motion:layout_constraintStart_toEndOf="@id/home"
        motion:layout_constraintTop_toTopOf="parent">
        <PropertySet android:alpha="0" />
    </Constraint>

    <Constraint
        android:id="@id/toolbar"
        android:layout_height="?attr/actionBarSize"
        android:layout_marginStart="16dp"
        android:layout_marginTop="0dp"
        motion:layout_constraintEnd_toEndOf="parent"
        motion:layout_constraintStart_toEndOf="@id/home"
        motion:layout_constraintTop_toTopOf="parent">

    </Constraint>

</ConstraintSet>


</MotionScene>

就是这样。您无需编写任何 java/kotlin 代码就创建了一个惊人的自定义动画。 MotionLayout 是完全声明式的，这意味着您可以在 XML 中描述任何转换，无论多么复杂。

Google 的以下回购包括更多样本。

https://github.com/googlesamples/android-ConstraintLayoutExamples

CollapsingToolbarLayout 具有 fixed/pinned 工具栏和 "enterAlways" 的功能

CollapsingToolbarLayout with fixed/pinned Toolbar and functionality of "enterAlways"

android

android-collapsingtoolbarlayout

问题

研究