Question

背景

使用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

问题

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

我想要实现的是，自定义视图将以工具栏的大小固定，而其上方的内容（其他一些视图）会在您滚动时缩小。

类似的东西：

事情是，无论我尝试什么，事情都不会这样。有时工具栏替换的内容会被截断，有时它不会被固定等等......

我尝试了什么

由于某些原因，工具栏是唯一似乎与app:layout_collapseMode="pin"属性兼容的东西，我尝试将视图放入其中，或者使用它放置视图。

以下是我尝试过的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>

可悲的是，即使布局编辑器显示它看起来没问题，我实际看到的是工具栏替换视图的截断文本：

我也尝试使用layout_anchor，如下所示（here）示例，但即便如此，应该替换工具栏的视图似乎与＆＃39;应该低于它，高于它的那个，甚至它上面的视图在它下面还有一些不应该存在的空间：

这是此尝试的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>

问题

如何放置自定义视图以使工具栏内容保持在底部和上部区域之间，而不是重叠任何部分，并且滚动时工具栏上方的区域会缩小？

Answer 1

目前，我正在使用解决方法来解决此问题，方法是使用填充来防止视图重叠。我仍然不知道为什么视图重叠，但这有助于反对它。

问题在于，当我滚动到足以使其成为唯一出现在顶部的东西时，工具栏现在没有阴影。

这是一个示例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>

如何将自定义视图/布局固定在CollapsingToolbarLayout中？

背景

问题

我尝试了什么

问题

1 个答案: