Android：将 TabLayout 固定到 Scrollview 的顶部

Question

我正在查看手机上的 twitter 应用程序。

您可以看到，当用户向上滚动时，tabLayout 实际上只是将自己很好地固定在工具栏的底部，并且根本不会移动。

我想也许他们只是将应用程序的所有顶部部分（个人资料图片、草地上自行车的个人资料壁纸、文本）放入 CollapsingToolBarLayout 和 AppBarLayout 中，但实际上，只有个人资料草地上的自行车壁纸是 CollapsingToolBarLayout 和 AppBarLayout 的一部分，因为这是唯一实际折叠的部分。文本部分只是向上滚动，tabLayout 只是固定在工具栏下方的顶部。

我阅读了 twitter 应用程序上的字幕，看来他们使用 SlidingTabLayout 来实现其效果。 SlidingTabLayout 与 tabLayout 类似，支持库支持后者。

这看起来是当今主流应用程序使用的相当普遍的模式 -

Google+ 应用在应用的个人资料视图中使用它：

Facebook Moments 在他们的应用中使用它：

知道他们是如何做到这一点的吗？

我正在寻找与所有这些应用程序类似的东西。

我的要求是：

1. 有一个 collapsingToolBarLayout，当您向上滚动时会折叠
2. 在 collapsingToolBarLayout 下方有一个 textview，当它完全折叠时，它会滚动并“隐藏”在 toolBar 下方。
3. 在 textview 下方有一个 tabLayout，当您在 collapsingToolBarLayout 下滚动 textview 时，它会“粘”到 tabLayout。
4. 在 tabLayout 下方有一个 recyclerview，这样当您单击 tabLayout 中的每个选项卡时，recyclerview 将在“推文”、“照片”、“收藏夹”等列表之间切换。

我查看了在 SO 上发布的另外两个问题：

Can the tab selection indicator of TabLayout be pinned to the top of the screen while scrolling?。这里的答案似乎是改变 tabLayout 的行为，但我怀疑改变行为实际上会产生 twitter 应用程序所做的事情。正如我所提到的，tabLayout 似乎位于 CollapsingToolBarLayout 和 AppBarLayout 之外，并且该行为只有在位于 CollapsingToolBarLayout 和 AppBarLayout 之内时才有效。

How to pin TabLaout at top of ScrollView?。这个问题提出的问题与我所问的类似，但没有提供足够的细节，也没有答案。

Answer 1

对于前 3 个问题，请查看 here（链接似乎已死）所以 this wayback machine link。它指向 https://github.com/slidenerd/Android-Design-Support-Library-Demo

的 github 演示库

至于第4个，您需要为每个选项卡创建片段并在选择它们时加载它们以用于一种简单的方法，或者您可以创建一个片段并与其通信以在选择选项卡时显示特定内容..

编辑 找不到更新的链接，所以这里是答案

1. 使用 CoordinaterLayout。
2. 您想使用工具栏折叠（或隐藏）的任何内容都放在 collapsingToolBarLayout 中。
3. CollapsingToolbarLayout 后折叠工具栏后保留的任何内容都会进入 AppBarLayout。

前-

<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:background="@android:color/background_light"
    android:fitsSystemWindows="true"
    >

    <android.support.design.widget.AppBarLayout
        android:id="@+id/main.appbar"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:fitsSystemWindows="true"
        >

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/main.collapsing"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleMarginEnd="64dp"
            >

            <ImageView
                android:id="@+id/main.backdrop"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:fitsSystemWindows="true"
                android:src="@drawable/material_flat"
                app:layout_collapseMode="parallax"
                />

            <android.support.v7.widget.Toolbar
                android:id="@+id/main.toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="pin"
                />
         <!-- ADD ANY THING THAT GETS SCROLLED ALL THE WAY UP WITH TOOLBAR -->
        </android.support.design.widget.CollapsingToolbarLayout>

     <!--- ADD TAB_LAYOUT HERE---> 

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

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        >

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:lineSpacingExtra="8dp"
            android:text="@string/lorem"
            android:padding="@dimen/activity_horizontal_margin"
            />
    </android.support.v4.widget.NestedScrollView>

    <android.support.design.widget.FloatingActionButton
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_margin="@dimen/activity_horizontal_margin"
        android:src="@drawable/ic_comment_24dp"
        app:layout_anchor="@id/main.appbar"
        app:layout_anchorGravity="bottom|right|end"
        />
</android.support.design.widget.CoordinatorLayout>

Answer 2

默认情况下，可能没有支持它的库。但是你确实可以通过一点编程来实现它。通过 ViewTreeObserver 监听 scrollview 事件，并操纵其他事件。如果您仍然不确定，让我们为它制作一个库。您制作一个应用并在 github 上发布，我将合作使其正常运行。

Answer 3

实现上述最接近的解决方案是MaterialViewPager。这是一个很好的起点，您可以根据自己的喜好对其进行 fork 和修改，并且可以通过多种方式对其进行自定义。