如何将 RecyclerView 放在 Toolbar 下方以及 TabLayout 和 ViewPager 上方还以自定义方式处理对滚动的响应？答案

【问题标题】：How to put RecyclerView below Toolbar and above TabLayout and ViewPager also handling responses to scrolls in a custom manner?如何将 RecyclerView 放在 Toolbar 下方以及 TabLayout 和 ViewPager 上方还以自定义方式处理对滚动的响应？
【发布时间】：2016-05-27 09:28:24
【问题描述】：

我想创建一个如下图所示的布局：

一个 CoordinatorLayout，其中包含：

CollapsingToolbarLayout(包含 ImageView & Toolbar)
回收站视图
标签布局
ViewPager（它的每个片段都包含一个 RecyclerView）

我想以这种方式响应滚动事件：

CollapsingToolbarLayout 通过滚动展开和折叠
工具栏一直停留在顶部，直到 TabLayout 到达顶部
在该工具栏向上滚动并且 TabLayout 粘在顶部之后

我在使用 CollapsingToolbarLayout 和 TabLayout 之间的 RecyclerView 时遇到问题。我可以在没有 RecyclerView 的情况下实现此布局（我将 CollapsingToolbarLayout 和 TabLayout 放在 AppBarLayout 内，将 ViewPager 放在 CoordinatorLayout 内）。

我的问题：

我应该把 RecyclerView 放在哪里？
我应该为每个布局设置哪个和位置layout_scrollFlags 和layout_behavior？

似乎 AppBarLayout 的高度有限。当我将 RecyclerView 放入 AppBarLayout 时，只有 RecyclerView 的一部分可见，并且 TabLayout 也消失了。

我阅读了很多类似this one 的教程和很多类似this one 和this one 的问题，但没有一个对我有帮助。

【问题讨论】：

到目前为止你有什么尝试？老实说，如果您要同时拥有回收站视图和视图分页器/选项卡布局，则很可能您的回收站视图将是动态的，因为项目内容会发生变化，因此您最终可能会遇到滚动问题。跨度>
我已经尝试过这 2 个滚动视图会让你发疯最佳解决方案将第一个布局限制为 3 个，并使用显示更多按钮创建一个弹出窗口，或者如果数字不大，则将它们添加到衬里中，然后添加选项卡和滚动视图

标签： android android-recyclerview android-toolbar android-coordinatorlayout android-collapsingtoolbarlayout

【解决方案1】：

将其用作主要布局

activity_main

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/swipe_refresh_layout_profile"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:ignore="RtlHardcoded">
        <android.support.design.widget.CoordinatorLayout
            android:id="@+id/co_profile_activity_root_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/white"
            android:visibility="visible">
            <android.support.design.widget.AppBarLayout
                android:id="@+id/appbar_profile"
                android:layout_width="match_parent"
                android:layout_height="@dimen/profile_img_placeholder_height"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
                <android.support.design.widget.CollapsingToolbarLayout
                    android:id="@+id/collapse_toolbar_profile"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
                    <RelativeLayout
                        android:id="@+id/rel_top"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:scaleType="centerCrop">
                        <ImageView
                            android:id="@+id/img_bg_placeholder_profile"
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:scaleType="centerCrop"
                            android:tint="#11000000"
                            app:layout_collapseMode="parallax"
                            app:layout_collapseParallaxMultiplier="0.9" />

                        <LinearLayout
                            android:id="@+id/lin_top_inner"
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:background="#BF473e6b"
                            android:orientation="vertical"
                            android:scaleType="centerCrop">
                        </LinearLayout>

                    </RelativeLayout>

                    <FrameLayout
                        android:id="@+id/frame_detail_profile"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center|center_horizontal"
                        android:orientation="vertical"
                        app:layout_collapseMode="parallax"
                        app:layout_collapseParallaxMultiplier="0.3">
                        <android.support.v7.widget.RecyclerView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content">
                        </android.support.v7.widget.RecyclerView>
                    </FrameLayout>

                    <android.support.v7.widget.Toolbar
                        android:id="@+id/toolbar_profile"
                        android:layout_width="match_parent"
                        android:layout_height="@dimen/profile_toolbar_height"
                        android:gravity="top|center"
                        app:layout_anchor="@id/frame_detail_profile"
                        app:layout_collapseMode="pin"
                        app:theme="@style/ThemeOverlay.AppCompat.Dark"
                        app:title="">

                        <LinearLayout
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:orientation="horizontal">

                            <TextView
                                android:id="@+id/tv_toolbar_title"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_marginLeft="@dimen/profile_toolbar_title_left_margin"
                                android:gravity="center_vertical|center"
                                android:ellipsize="end"
                                android:singleLine="true"
                                android:layout_gravity="center"
                                android:textColor="@android:color/white"
                                android:textSize="20sp" />
                        </LinearLayout>
                    </android.support.v7.widget.Toolbar>

                    <android.support.design.widget.TabLayout
                        android:id="@+id/tab_layout_profile"
                        android:layout_width="match_parent"
                        android:layout_height="?attr/actionBarSize"
                        android:layout_gravity="bottom"
                        android:layout_marginTop="@dimen/profile_tab_layout_top_margin"
                        android:background="@color/white"
                        app:tabIndicatorColor="@color/colorPrimary"
                        app:tabSelectedTextColor="@color/colorPrimary"
                        app:tabTextColor="@color/charcoal_grey" />
                </android.support.design.widget.CollapsingToolbarLayout>
            </android.support.design.widget.AppBarLayout>

            <android.support.v4.view.ViewPager
                android:id="@+id/view_pager_profile"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_behavior="@string/appbar_scrolling_view_behavior" />
        </android.support.design.widget.CoordinatorLayout>
    </RelativeLayout>
</android.support.v4.widget.SwipeRefreshLayout>

对于选项卡的网格布局，请使用适配器类。

【讨论】：

不错的解决方案！

【解决方案2】：

从AppBarLayout 开始，在其下添加CollapsingToolbarLayout scrollFlags="scroll|exitUntilCollapsed",

将具有垂直方向的LinearLayout添加到CollapsingToolbarLayout并添加

FrameLayout 与 ImageView + Toolbar
RecyclerView
TabLayout

【讨论】：

我觉得不行，请在github上分享你的代码！

【解决方案3】：

有两件事要做：-

单击搜索按钮时，将回收站视图的可见性设置为可见
按下后退按钮时，将回收站视图的可见性设置为 GONE

以下是实现：

1.将回收站视图的可见性设置为可见：

    public boolean onOptionsItemSelected(MenuItem item) {
        if (item.getItemId() == R.id.searchView) {
            rView.setVisibility(VISIBLE);
        }
        return true;
    }

2。将回收适配器的可见性设置为 GONE

    MenuItem searchMenuItem = menu.findItem(R.id.searchView);
    MenuItemCompat.setOnActionExpandListener(searchMenuItem, new MenuItemCompat.OnActionExpandListener() {
        @Override
        public boolean onMenuItemActionExpand(MenuItem item) {
            return true;
        }

        @Override
        public boolean onMenuItemActionCollapse(MenuItem item) {
            recyclerView.setVisibility(GONE);
            return true;
        }
    });

注意：不要忘记在活动开始时将可见性保持为 GONE

【讨论】：

【解决方案4】：

我知道我可能迟到了这个答案，但我也一直在尝试实现它一段时间。我的解决方案感觉有点老套，但它是尝试让标签粘住的一种选择。在一个更简单的解决方案中，假设我们想要以下内容：

折叠工具栏布局
链接到滚动视图。在该滚动视图中，我们需要以下内容：
一个说水平滚动的回收器视图
在回收站下方查看标签布局
在选项卡布局下方，我们需要一个视图分页器，它将在固定空间内加载动态片段。

activity_scrolling.xml 外部父 xml 文件可能看起来像这样

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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=".temp.ScrollingActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/app_bar_height"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:toolbarId="@+id/toolbar">

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:layout_marginBottom="5dp"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/AppTheme.PopupOverlay" />

        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>

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

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/fab_margin"
        app:layout_anchor="@id/app_bar"
        app:layout_anchorGravity="bottom|end"
        app:srcCompat="@android:drawable/ic_dialog_email" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

那么内部的content_scrolling.xml可能看起来像这样

<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView 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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".temp.ScrollingActivity"
    tools:showIn="@layout/activity_scrolling">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="5dp"
            android:layout_marginTop="20dp"
            android:layout_marginEnd="20dp"
            android:gravity="center"
            android:text="A Heading"
            android:textSize="@dimen/text_xl"
            android:textStyle="bold" />

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recycler_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/title" />

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/recycler_view"
            android:layout_gravity="center"
            android:minHeight="60dp"
            app:tabGravity="fill"
            app:tabIndicatorColor="@color/colorAccent"
            app:tabMode="fixed"
            app:tabSelectedTextColor="@color/colorPrimaryDark" />

        <androidx.viewpager.widget.ViewPager
            android:id="@+id/view_pager"
            android:layout_width="match_parent"
            android:layout_height="680dp"
            android:layout_below="@+id/tabs" />
    </RelativeLayout>

</androidx.core.widget.NestedScrollView>

这将允许您将选项卡布局强制放置在您选择的位置（即使它位于回收器视图之后）。

我不喜欢的 hacky 部分是这条特定的行 android:layout_height="680dp"，它强制 viewpager 的高度是特定的。我不确定为什么 wrap_content 或 match_parent 不起作用。但这是我可以为将 TabLayout 和 ViewPager 放置在特定位置的问题提供的最佳解决方案。

【讨论】：