Android:将TabLayout固定在滚动视图顶部

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

推特应用

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

我想也许他们只是把应用程序的所有顶部(configuration文件图片,自行车的轮廓壁纸,文本),到一个CollapsingToolBarLayout和AppBarLayout,但实际上,只有configuration文件壁纸与草地上的自行车是CollapsingToolBarLayout和AppBarLayout的一部分,因为这是实际折叠的唯一部分。 文本部分只是向上滚动,tabLayout只是引脚到工具栏下方的顶部。

我读了twitter的应用程序的信用,似乎他们使用SlidingTabLayout来达到他们的效果。 SlidingTabLayout类似于tabLayout,后者在支持库中被支持。

它看起来像现在主stream应用程序使用的一个相当常见的模式 –

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

谷歌+

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

facebook时刻

任何想法他们怎么做都设法做到这一点?

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

我的要求是:

  1. 有一个collapsingToolBarLayout,当你向上滚动时会崩溃
  2. 在collapsingToolBarLayout下面有一个textview,当它完全崩溃时,它将滚动并“隐藏”在toolBar下面。
  3. 在textview下面有一个tabLayout,当你滚动collapsingToolBarLayout下的textview时,它会“粘”到tabLayout。
  4. 在tabLayout下有一个recyclerview,当你点击tabLayout中的每个标签时,recyclerview将在“Tweets”,“Photos”,“Favorites”等列表之间切换。

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

滚动时,TabLayout的标签select指示可以固定在屏幕的顶部吗? 。 这里的答案似乎改变了tabLayout的行为,但我怀疑改变行为实际上会产生什么叽叽喳喳应用程序。 正如我所提到的,tabLayout似乎位于CollapsingToolBarLayout和AppBarLayout之外,只有当它位于CollapsingToolBarLayout和AppBarLayout中时,该行为才有效。

如何将TabLaout固定在ScrollView的顶部? 。 这个问题与我所问的问题类似,但没有提供足够的细节,也没有答案。

对于前3个问题,请看这里

至于第四个,您需要为每个选项卡创build片段,并在为简单方法select片段时加载它们,或者您可以创build一个片段并与之通信以在select选项卡时显示特定内容。

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

  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> 

默认情况下可能没有支持的库。 但是你确实可以通过一些编程来实现它。 通过ViewTreeObserver收听scrollview事件,并操纵其他事件。 如果你还不确定,那就让我们为它做一个图书馆吧。 你做了一个应用程序,并发布在github,我将协作,使其工作。

实现上面提到的最接近的解决scheme是MaterialViewPager 。 这是一个很好的起点,你可以根据自己的偏好进行修改和修改,并且可以通过多种方式进行自定义。