滚动时隐藏包含在片段中的RecyclerView的工具栏

Question

滚动时隐藏包含在片段中的RecyclerView的工具栏

androidandroid-layoutandroid-toolbarandroid-coordinatorlayoutandroid-appbarlayout

30

我正在尝试使工具栏在滚动时折叠，当一个嵌套在片段中的 RecyclerView 被滚动时。首先，这是我的主要布局：

<DrawerLayout>

     <RelativeLayout
        android:id="@+id/mainRelativeLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >

        <android.support.design.widget.CoordinatorLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"  
            >

            <android.support.design.widget.AppBarLayout
                android:id="@+id/appBarLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                >

                <Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    android:elevation="5dp"
                    app:layout_scrollFlags="scroll|enterAlways"
                    >

                </Toolbar>

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

            <FrameLayout
                android:id="@+id/container"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                />

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

    </RelativeLayout>

<!-- ignore -->
<drawercontents>
</DrawerLayout>

所以你可能已经猜到我的片段被加载到@id/container中。我的第一个片段包含了recyclerview，我在该recyclerview上设置了app:layout_behavior="@string/appbar_scrolling_view_behavior"。这确实起作用，工具栏在滚动时折叠。问题是当它没有折叠时，工具栏覆盖了片段的顶部内容。将片段容器的顶部边距添加到工具栏大小相等只会在工具栏折叠时留下空白（显然）。

缺少什么？有什么想法吗？

编辑：根据要求，这里是包含recyclerview的片段布局：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.RecyclerView
    android:id="@+id/feed"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#00000000"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

- Orbit

你能同时发布你的碎片布局吗？ - saeed

@saeed 添加了，检查一下修改。 - Orbit

让我检查一下，我有相同的问题...但我已经解决了...我需要点时间。 - saeed

你尝试过在线性布局中使用帧布局吗？ - saeed

1

你尝试过asc42的解决方案(https://dev59.com/AVsV5IYBdhLWcg3w-jCl#37975782)吗？将layout_behavior移动到FrameLayout中应该可以解决问题！ - user1185087

如果您找到了解决方案，能否分享一下？ - Trancer

10个回答

6

你可以通过在 layout_scrollFlags 属性中添加第三个标志 - snap 来解决这个问题。

<Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:elevation="5dp"
    app:layout_scrollFlags="scroll|enterAlways|snap" />

使用此选项将确定在视图仅部分缩小时要执行的操作。如果滚动结束并且视图大小已经缩小到原始大小的50％以下，则该视图会返回其原始大小。如果尺寸大于其大小的50％，则它将完全消失。

检查这个链接。

- pavle

5

我还没有测试过，但是这是你必须做的：

将 app:layout_behavior="@string/appbar_scrolling_view_behavior" 移动到 id 为 container 的 FrameLayout 中。
在你的 AppBarLayout 中添加 android:fitsSystemWindows = "true"。

这正是我在我的应用程序中所做的，它可以工作。如果这对您无效，请尝试清除（在 Android Studio 中，选择 Build -> Clean Project）项目并再次运行应用程序。

- adhirajsinghchauhan

4

将一个布局命名为toolbar.xml并在您想要使用的代码中引用它，但请注意一件事情，请不要在上面使用任何其他布局，如RelativeLayout、LinearLayout等。

- patel135

3

你需要类似于Play商店应用的东西。将布局粘贴到这里。这段代码很容易编写，你可以自己编码。使用上面的布局层次结构，你可以实现以下内容：

- Swathin

3

我的朋友今天做了这个，非常完美，我有两个片段都有RecyclerView并且可以滚动Toolbar。我看了chrisbanes's的CheeseSquare：CheeseSquare

如果你看一下MainActivity，在TabLayout中有3个片段，它们都可以滚动Toolbar。所以我准备了这个布局，也许你会看一下：

我的activity_home.xml：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

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

    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        android:layout_gravity="start"
        app:menu="@menu/homepage_leftdrawer">


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

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

而 content_home.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"
    android:id="@+id/root"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme3.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:layout_scrollFlags="scroll|enterAlways|snap" />


<android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabTextColor="@color/Transparent_few_white"
    app:tabIndicatorColor="@color/White"
    app:tabTextAppearance="@style/TabLayoutTextStyle"
    app:tabIndicatorHeight="3dp"
    app:tabSelectedTextColor="@color/White"
    android:background="@color/ColorPrimary"
    app:tabPaddingStart="0dp"
    app:tabPaddingEnd="0dp"/>

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

<android.support.v4.view.ViewPager
    android:id="@+id/pager2"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

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

这里的关键在哪里：

如果你看一下我的ViewPager，它有一个app:layout_behavior="@string/appbar_scrolling_view_behavior"属性。那么就是这样。在fragment中不要添加任何其他的behavior。请尝试这样做并告诉我结果！

- Yasin Kaçmaz

你可以尝试为你的RecyclerView添加行为吗？ - Yasin Kaçmaz

3

您可以使用折叠布局，如下所示：

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapse_toolbar"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:fitsSystemWindows="true"
            app:contentScrim="@color/zxing_transparent"
            android:paddingBottom="2dip"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:expandedTitleGravity="bottom|center_horizontal"
            app:expandedTitleMarginBottom="50dip"
            app:collapsedTitleGravity="top|center_vertical"
            app:collapsedTitleTextAppearance="@style/collapseTitle">

            <Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    android:elevation="5dp"
                    app:layout_scrollFlags="scroll|enterAlways"
                    >
                </Toolbar>



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

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

  <FrameLayout
            android:id="@+id/container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            />


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

- Uma Achanta

2

我使用了SwipeRefreshLayout或者只是一个LinearLayout或RelativeLayout作为Fragment布局的根，并且它可以正常工作。

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/swipe_refresh_layout_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/mycustomcolor"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" 
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

使用RelativeLayout：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/fragment2"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view_android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true" 
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</RelativeLayout>

然后就可以开始了。

- ʍѳђઽ૯ท

0

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:contentScrim="?attr/colorPrimary"
        >
        <android.support.v7.widget.Toolbar
            android:id="@+id/appBar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:layout_collapseMode="pin" />

    </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:layout_below="@+id/app_bar_layout"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    android:weightSum="1">
    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/colorAccent"
        >
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent" 
            android:text="Your recycler view should go here"/>
        </FrameLayout>
</LinearLayout>

- Arif Nouman Khan

抱歉，但如果您研究此代码，您将获得可折叠的工具栏。如果您不想要ImageView，请将其删除。此代码的工作方式类似于WhatsApp个人资料布局。因此，如果您不想要图像，请将其删除。只需尝试一下，您就会发现它可以正常工作。 - Arif Nouman Khan

现在检查一下，我已经删除了ImageView，只需在您的代码中使用它，并请删除-1票。 - Arif Nouman Khan

再次强调，你的回答与所述问题无关。请重新阅读原始问题。如果您愿意，可以随时删除此答案。 - Orbit

这确实回答了问题，但是以另一种方式，当然在某些时候OP可以使用代码，但问题在于另一件事。 - ʍѳђઽ૯ท

蓝色矩形是您的框架布局，现在您可以在其中放置任何东西 :) 如果您同意，请接受它作为答案。 - Arif Nouman Khan

显示剩余3条评论

-1

在你的帧布局中设置

android:layout_below="@+id/appBarLayout"

如果那个方法不行，那就试试这个：

android:layout_below="@+id/toolbar"

- Parsania Hardik

2

android:layout_below 可以用于 RelativeLayout 的子元素。CoordinatorLayout 基本上是 FrameLayout 的高级版本，因此这没有任何作用。 - Orbit

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Laurence Pardz · Accepted Answer

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/tabanim_appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/tabanim_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways|snap"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

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

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>