AppBarLayout 在 Toolbar 下方滚动内容

Question

我希望在我的工具栏下方有一个内容区域。它的行为应该是向上滚动时滚动，向下滚动时立即进入。工具栏应保持原位，无需任何滚动。

我的布局是这样的：

<?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:id="@+id/coordinator_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ui.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

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

        <RelativeLayout
            android:id="@+id/box_search"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="16dp"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            app:layout_scrollFlags="scroll|enterAlways">

            <TextView
                android:id="@+id/text_search_filter"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Line 1"
                android:textColor="#FFF" />

            <TextView
                android:id="@+id/text_search_category"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/text_search_filter"
                android:text="Line 2"
                android:textColor="#FFF" />

            <TextView
                android:id="@+id/text_search_location"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/text_search_category"
                android:text="Line 3"
                android:textColor="#FFF" />
        </RelativeLayout>
    </android.support.design.widget.AppBarLayout>

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

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@drawable/ic_add_white_24dp" />
</android.support.design.widget.CoordinatorLayout>

如果我将内容区域放在工具栏上方，我可以获得预期的效果，但显然它的位置不对。

如果我将内容区域放在工具栏下方，则不会滚动...

Answer 1

更新：

由于我最初的建议没有奏效，另一种实现预期结果的方法是从 CoordinatorLayout 中分离出 Toolbar。您可以按如下方式构建布局 XML：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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:orientation="vertical">
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay" />
    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/coordinator_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".ui.MainActivity">
        <android.support.design.widget.AppBarLayout
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:theme="@style/AppTheme.AppBarOverlay">
            <RelativeLayout
                android:id="@+id/box_search"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="16dp"
                android:layout_marginRight="16dp"
                android:layout_marginBottom="16dp"
                app:layout_scrollFlags="scroll|enterAlways">
                <TextView
                    android:id="@+id/text_search_filter"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="Line 1"
                    android:textColor="#FFF" />
                <TextView
                    android:id="@+id/text_search_category"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/text_search_filter"
                    android:text="Line 2"
                    android:textColor="#FFF" />
                <TextView
                    android:id="@+id/text_search_location"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/text_search_category"
                    android:text="Line 3"
                    android:textColor="#FFF" />
            </RelativeLayout>
        </android.support.design.widget.AppBarLayout>
        <include layout="@layout/content_main"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />
        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_margin="@dimen/fab_margin"
            android:src="@drawable/ic_add_white_24dp" />
    </android.support.design.widget.CoordinatorLayout>
</LinearLayout>

如果它仍然不起作用，您应该考虑不使用 include 语句，因为这可能是问题的根源。相反，将布局定义直接引入此布局并放置在 NestedScrollView 下（将 app:layout_behavior="@string/appbar_scrolling_view_behavior" 应用于此 NestedScrollView）。如果您需要其他帮助，post OP 中 content_main 布局 XML 的内容。

原回复：

确保您为主要内容定义了 app:layout_behavior，它定义了主要内容的滚动应该影响 AppBarLayout。具体来说，试试这个：

<include layout="@layout/content_main"
     app:layout_behavior="@string/appbar_scrolling_view_behavior" />

Answer 2

If I put content area above Toolbar I am able to get the desired effect, but obviously it's in the wrong position.

当然是错误的位置因为：http://www.google.com/design/spec/layout/structure.html#structure-app-bar

The app bar, formerly known as the action bar in Android, is a special kind of toolbar that’s used for branding, navigation, search, and actions.

所以，你需要加一个CollapsingToolbarLayout和上面的内容

并且：

I'd like to have a content area below my Toolbar. Its behavior should be to scroll while scrolling up and to enter immediately while scrolling down, Toolbar should stay on its place without any scrolling.

为了在添加 CollapsingToolbarLayout 后不滚动 Toolbar，您可能需要将 app:layout_collapseMode="pin" 添加到 Toolbar。

AppBarLayout 在 Toolbar 下方滚动内容

AppBarLayout scrolling content below Toolbar

android

android-toolbar

android-coordinatorlayout

android-appbarlayout