Question

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.

My layout is like that:

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

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

If I put content area below Toolbar nothing scrolls...

Answer 1

如果我将内容区域放在工具栏上方，我就可以获得所需的内容效果，但显然它处于错误的位置。

当然，由于：http://www.google.com/design/spec/layout/structure.html#structure-app-bar

，它处于错误的位置

应用栏，以前称为作为Android中的操作栏，是一个特殊的一种工具栏，用于品牌推广，导航，搜索和动作。

因此，您需要添加CollapsingToolbarLayout及其内容。

和

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

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

Answer 2

<强>更新

由于我的原始建议不起作用，另一种实现预期结果的方法是从CoordinatorLayout中分离工具栏。您可以按如下方式构建布局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）。如果您需要其他帮助，请在OP中发布content_main布局XML的内容。

原始回复：

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

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

AppBarLayout scrolling content below Toolbar

2 个答案: