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

Question

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

一个 CoordinatorLayout，其中包含:

1. CollapsingToolbarLayout(包含 ImageView & Toolbar)
2. 回收站 View
3. 标签布局
4. ViewPager(它的每个 fragment 都包含一个 RecyclerView)

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

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

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

我的问题:

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

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

我阅读了很多教程，例如 this one还有很多问题，例如 this one和 this one ，但没有一个能帮助我。

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

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