Android：将TabLayout固定在ScrollView的顶部

Question

我在手机上查看了 Twitter 应用。

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

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

我阅读了 Twitter 应用上的制作人员名单，发现他们使用 SlidingTabLayout 来实现效果。SlidingTabLayout 与 tabLayout 相似，后者受支持库支持。

它看起来是现今主流应用程序中经常使用的模式 -

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

Facebook Moments 在其应用程序中使用它：

你有任何想法如何实现这些效果吗？

我想要做与所有这些应用程序类似的东西。

我的要求是：

1. 拥有 CollapsingToolBarLayout，在向上滚动时折叠
2. 在 collapsingToolBarLayout 下方有一个 TextView，当它完全折叠时会滚动并“隐藏”在工具栏下面。

在TextView下方添加一个TabLayout，当你滚动CollapsingToolBarLayout下的TextView时，TabLayout会“粘”在TabLayout上。

在TabLayout下面加入RecyclerView，这样当您单击TabLayout中的每个标签时，RecyclerView将在“推文”、“照片”、“收藏夹”等列表之间切换。

我查看了Stack Overflow上发布的另外两个问题：

可以在滚动时将TabLayout的选项卡选择指示器固定在屏幕顶部吗？ 这里的答案似乎是改变tabLayout的行为，但我怀疑改变行为是否能真正生成Twitter应用程序实现的效果。如我所提到的，TabLayout似乎位于CollapsingToolBarLayout和AppBarLayout之外，只有当它位于CollapsingToolBarLayout和AppBarLayout内时才有效。

如何在ScrollView顶部固定TabLaout？ 这个问题与我提出的类似，但没有足够的细节，并且没有答案。

- Simon

Answer 1

针对前三个问题，请查看此链接（链接已失效），可以使用这个wayback machine的链接。它指向一个GitHub演示库，位于https://github.com/slidenerd/Android-Design-Support-Library-Demo

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

编辑 找不到更新的链接，以下是答案

1. 使用CoordinaterLayout。
2. 任何要折叠（或隐藏）到工具栏中的内容都放在CollapsingToolBarLayout内。
3. 折叠后仍保留的任何内容都放在AppBarLayout之后的CollapsingToolbarLayout中。

例如 -

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

- Sulabh Deep Puri

---

这很有趣，但我昨晚确实看了那个Slidenerds视频，并认为如果我创建两个单独的Collapsingtoolbarlayout，它实际上会起作用。稍后会尝试一下。 - Simon

它实际上并没有完全做到我想要的。当我查看slidenerd示例时，示例会向上滑动，tabLayout和工具栏都会从屏幕上消失。我可以通过将scrollFlag更改为exitUntilCollapsed来使其固定在顶部，但是这样文本视图和tabLayout都将粘在工具栏的顶部，这不是我想要的。我希望文本视图可以滚动到屏幕外，而tabLayout则保持固定。 - Simon

如果您不想让tabStrip折叠，只需将其放在CollapsingBarLayout之外即可。 - Sulabh Deep Puri

谢谢 - 这已经接近我想要的效果了。只有一个问题，如果你想让它滚动而没有视差效果，你需要将textview属性设置为collapseMode="none"。 - Simon

链接已损坏。 - wizcheu

Answer 2

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

- Muktadir

---

嘿，Muktadar，你能否请看一下这个问题吗？https://dev59.com/2broa4cB1Zd3GeqPrtD7 - hushed_voice

Answer 3

最接近实现上述功能的解决方案是 MaterialViewPager。它是一个很好的起点，您可以fork它并根据自己的偏好进行修改，并且您还可以以许多方式进行自定义。

- daniel.keresztes

---

该库并不能满足我的需求，需要进行大量的重构。因为该库似乎是用于显示信息列表而不适用于典型的“社交”应用程序。我想在可折叠工具栏布局下方添加一个TextView，这样我就可以像Twitter应用程序一样提供有关个人资料的信息，而无需要求用户单击任何地方即可查看实际信息。应该有一种方法可以在代码中实现它-这是一个被广泛使用和有用的概念。 - Simon