logo标签列表

AppBarLayout可以让工具栏下方的内容滚动

androidandroid-toolbarandroid-coordinatorlayoutandroid-appbarlayout
7
我希望在我的工具栏下面添加一个内容区域，它的行为应该是向上滚动时滚动，向下滚动时立即进入。 工具栏应该保持在原位而不滚动。
我的布局如下：
<?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>

如果我将内容区域放置在工具栏之上，我就能够获得期望的效果，但这显然是错误的位置。
如果我将内容区域放置在工具栏之下，就无法滚动内容...
2个回答
3
如果我将内容区域放在工具栏上方，我就能获得期望的效果，但显然它的位置不正确。
当然，它的位置不正确，因为：http://www.google.com/design/spec/layout/structure.html#structure-app-bar 应用栏（以前称为Android中的操作栏）是一种特殊的工具栏，用于品牌、导航、搜索和操作。
因此，您需要添加一个CollapsingToolbarLayout和其上的内容。
并且：
我想在我的工具栏下方有一个内容区域。它的行为应该在向上滚动时滚动，在向下滚动时立即进入，而工具栏应该保持在原地，不进行任何滚动。
为了在添加CollapsingToolbarLayout后不滚动Toolbar，您可能希望将app:layout_collapseMode="pin"添加到该Toolbar中。
刚试了一下，所有东西都崩溃了，包括工具栏（即使设置了app:layout_collapseMode="pin"）... :( - Alessandro
我猜你在使用错误的标志来处理 CollapsingToolbarLayout，请查看此链接：http://guides.codepath.com/android/Handling-Scrolls-with-CoordinatorLayout。但是我想说的是，这是最好的解决方法！ - ʍѳђઽ૯ท
我正在使用app:layout_scrollFlags="scroll|enterAlways"。感谢您的帮助，我知道这是正确的方法，但我就是做不到... - Alessandro
就像我猜测的那样，请查看以下内容：https://guides.codepath.com/android/Handling-Scrolls-with-CoordinatorLayout#creating-collapsing-effects 并尝试在CollapsingToolbarLayout中使用app:layout_scrollFlags="scroll|exitUntilCollapsed"。当然，它将与您的代码一起折叠。 - ʍѳђઽ૯ท
那种方式可以运作，但我必须将列表滚动到最上方才能再次显示工具栏下的内容。我希望即使只有轻微的滚动也能展开它...这就是为什么我想使用enterAlways的原因。 - Alessandro
1
耶！！！正确的组合是：scroll|exitUntilCollapsed|enterAlways。感谢您的帮助！！！ - Alessandro
1

更新：

由于我的原始建议没有起作用，实现所需结果的另一种方法是将工具栏从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下（对此NestedScrollView应用app:layout_behavior="@string/appbar_scrolling_view_behavior"）。如果需要额外帮助，请在您的OP中发布content_main layout XML的内容。 原始回复： 确保为主要内容定义了app:layout_behavior，该定义指定主要内容的滚动应影响AppBarLayout。具体来说，请尝试以下操作：
<include layout="@layout/content_main"
     app:layout_behavior="@string/appbar_scrolling_view_behavior" />
从AppBarLayout中提取工具栏会产生糟糕的结果，工具栏会被内容覆盖... - Alessandro
请发布您的content_main布局内容。让我们看看你有什么。 - Travis Yim
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接