Android:将 TabLayout 固定到 Scrollview 的顶部 [英] Android: pin TabLayout to top of Scrollview

问题描述

我正在看手机上的推特应用.

I was looking at the twitter app on my phone.

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

You can see that when a user scrolls up, the tabLayout actually just pins itself onto the bottom of the toolbar nicely and does not move at all.

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

I thought maybe they did it by just putting all of the top part of the app (the profile picture, the profile wallpaper of the bicycle on the grass, the text), into a CollapsingToolBarLayout and AppBarLayout but actually, only the profile wallpaper with the bicycle on the grass is part of the CollapsingToolBarLayout and AppBarLayout as that is the only part that actually collapses. The text part just scrolls up and the tabLayout just pins to the top below the toolbar.

我在 twitter 应用程序上阅读了积分，似乎他们使用了 SlidingTabLayout 来实现他们的效果.SlidingTabLayout 与 tabLayout 类似，支持库中支持后者.

I read the credits on the twitter app and it appears that they used the SlidingTabLayout to achieve their effect. SlidingTabLayout is similar to tabLayout with the latter being supported in the support library.

这看起来是一种相当普遍的模式，现在也被主流应用程序使用 -

It looks like a fairly common pattern that is used by mainstream apps nowadays as well -

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

Google+ app uses it in their profile view on the app:

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

Facebook Moments uses it in their app:

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

Any idea how they did all managed to do this?

我希望做一些类似于所有这些应用的事情.

I'm looking to do something similar to all these apps.

我的要求是:

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

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

I looked at two other questions that were posted on SO:

TabLayout 的选项卡选择指示器可以在滚动时固定在屏幕顶部吗?.这里的答案似乎正在改变 tabLayout 的行为，但我怀疑改变行为实际上会产生 twitter 应用程序所做的事情.正如我所提到的，tabLayout 似乎位于 CollapsingToolBarLayout 和 AppBarLayout 之外，只有当它位于 CollapsingToolBarLayout 和 AppBarLayout 内时，该行为才会有效.

Can the tab selection indicator of TabLayout be pinned to the top of the screen while scrolling?. The answer here appears to be changing the behavior of the tabLayout but I doubt changing the behavior would actually generate what the twitter app does. As I mentioned, the tabLayout appears to sit outside the CollapsingToolBarLayout and AppBarLayout and the behavior should only be effective if it is sitting within the CollapsingToolBarLayout and AppBarLayout.

如何将 TabLaout 固定在 ScrollView 的顶部?.这个问题问的和我问的很相似，但没有提供足够的细节，也没有答案.

How to pin TabLaout at top of ScrollView?. This question asks something similar to what I asked, but does not give enough detail and has no answers.

推荐答案

对于前 3 个问题，请查看 这里(链接似乎已失效)所以 本机链接.它指向 https://github.com/的 github 演示存储库Slidenerd/Android-Design-Support-Library-Demo

for those first 3 questions look here (link seems dead) so this wayback machine link. it points to a github demo repo at https://github.com/slidenerd/Android-Design-Support-Library-Demo

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

As for the 4th you need to create fragments for each tab and load them when they are selected for a simple approach, or you can create one fragment and communicate with it to show specific content when a tab is selected..

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

EDIT couldn't find an updated link so here are the answers

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>

这篇关于Android:将 TabLayout 固定到 Scrollview 的顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！