背景

支持/设计库允许使用 AppBarLayout 和 CollapsingToolbarLayout 来实现滚动时调整大小的效果:

http://material-design.storage.googleapis.com/publish/material_v_3/material_ext_publish/0B0NGgBg38lWWcFhaV1hiSlB4aFU/patterns-scrollingtech-scrolling-070801_Flexible_Space_xhdpi_003.webm

问题

我见过的所有示例都是在您滚动时固定工具栏的。

我想要实现的是自定义 View 将固定在工具栏的大小中，而其上方的内容(一些其他 View )将在您滚动时缩小。

类似的东西:

事实是，无论我尝试什么，都无法以这种方式工作。有时工具栏替换的内容会被截断，有时不会被固定，等等......

我尝试过的

由于某种原因，工具栏似乎是唯一可以与 app:layout_collapseMode="pin" 属性配合使用的工具栏，我尝试将 View 放入其中，或将 View 与它一起放置.

这是我尝试过的当前 XML 布局:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".ScrollingActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/app_bar_height"
        android:background="#fff"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            android:padding="0px"
            app:contentScrim="#eeeeee"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/AppTheme.PopupOverlay"
                app:title="">
            </android.support.v7.widget.Toolbar>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="bottom"
                android:layout_marginBottom="0px"
                android:background="#33ff0000"
                android:gravity="center"
                android:orientation="horizontal">

                <TextView
                    android:id="@+id/titleTextView"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    android:layout_gravity="bottom"
                    android:background="#33ffff00"
                    android:gravity="center"
                    android:text="someText"
                    android:textColor="#000"/>

            </LinearLayout>


        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_scrolling"/>

</android.support.design.widget.CoordinatorLayout>

遗憾的是，尽管布局编辑器显示它看起来不错，但我实际看到的是工具栏替换 View 的截断文本:

我也尝试过使用 layout_anchor，如如何使用它的示例所示 (here)，但即便如此，应该替换工具栏的 View 似乎与内容重叠它应该在它下面和它上面，甚至它上面的 View 在它下面也有一些不应该存在的空间:

下面是这个尝试的 XML 布局:

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#3300ff00"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="200dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">

            <FrameLayout
                android:id="@+id/title"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom|center_horizontal"
                android:orientation="vertical"
                android:paddingBottom="?attr/actionBarSize"
                app:layout_collapseMode="none">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom"
                    android:text="need to be right above 'someText'"
                    android:textColor="#ff000000"/>

            </FrameLayout>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>


    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="none"
        app:behavior_overlapTop="0dp"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/lorem"/>

    </android.support.v4.widget.NestedScrollView>

    <android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="#33ff0000"
        app:layout_anchor="@id/title"
        app:layout_anchorGravity="bottom"
        app:theme="@style/ThemeOverlay.AppCompat.Dark"
        app:title="">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="horizontal">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:gravity="center_vertical"
                android:text="someText"
                android:textColor="@android:color/white"
                android:textSize="20sp"/>

        </LinearLayout>
    </android.support.v7.widget.Toolbar>

</android.support.design.widget.CoordinatorLayout>

问题

如何放置自定义 View ，使工具栏内容保持在底部和上部区域之间，不与它们重叠，并使工具栏上方的区域在滚动时缩小？

最佳答案

目前，我正在使用一种解决方法来解决此问题，即使用可防止 View 重叠的填充。我仍然不明白为什么 View 会重叠，但这有助于防止重叠。

问题在于，当我滚动足够多时，工具栏现在没有阴影，因此它是唯一出现在顶部的东西。

这是一个示例 XML 布局，以防有人想尝试:

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#3300ff00"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="200dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <FrameLayout
                android:id="@+id/title"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="bottom|center_horizontal"
                android:orientation="vertical"
                android:paddingBottom="24dp"
                app:layout_collapseMode="none">

                <View
                    android:layout_width="match_parent"
                    android:layout_height="1dp"
                    android:layout_gravity="bottom"
                    android:background="#f00"/>

            </FrameLayout>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>


    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingTop="24dp"
        android:scrollbars="none"
        app:behavior_overlapTop="0dp"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/lorem"/>

    </android.support.v4.widget.NestedScrollView>

    <android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:background="#33ff0000"
        app:layout_anchor="@id/title"
        app:layout_anchorGravity="bottom"
        app:theme="@style/ThemeOverlay.AppCompat.Dark"
        app:title="">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="horizontal">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:gravity="center_vertical"
                android:text="someText"
                android:textColor="@android:color/white"
                android:textSize="20sp"/>

        </LinearLayout>
    </android.support.v7.widget.Toolbar>

</android.support.design.widget.CoordinatorLayout>

关于android - 如何将自定义 View /布局固定在 CollapsingToolbarLayout 中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43569465/