Android:将TabLayout固定到Scrollview的顶部

时间:2015-10-13 19:11:17

标签: android android-layout twitter google-plus android-tablayout

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

twitter app

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

我想也许他们通过将应用程序的所有顶部部分(个人资料图片,自行车的配置文件壁纸,草地)放入CollapsingToolBarLayout和AppBarLayout来实现,但实际上只有配置文件在草地上自行车的壁纸是CollapsingToolBarLayout和AppBarLayout的一部分,因为这是实际崩溃的唯一部分。文本部分向上滚动,tabLayout只是固定在工具栏下方的顶部。

我在twitter应用程序上阅读了这些信用,看起来他们使用SlidingTabLayout来实现它们的效果。 SlidingTabLayout类似于tabLayout,后者在支持库中受支持。

它看起来像现在主流应用程序使用的相当常见的模式 -

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

google+

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

facebook moments

知道他们是怎么做的都设法做到了吗?

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

我的要求是:

  1. 在向上滚动时崩溃,崩溃的工具栏会崩溃
  2. 在collapsingToolBarLayout下面有一个textview,它会滚动并隐藏"在完全崩溃的工具栏下方。
  3. 在textview下面有一个tabLayout,它会"坚持"在collapsingToolBarLayout下滚动textview时到tabLayout。
  4. 在tabLayout下面有一个recyclerview,这样当你点击tabLayout中的每个标签时,recyclerview将在"推文","照片","收藏夹& #34;等
  5. 我查看了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?。这个问题与我提出的问题类似,但没有给出足够的细节,也没有答案。

3 个答案:

答案 0 :(得分:6)

前三个问题看起来here(链接似乎已经死了)所以this wayback machine link。它指向 https://github.com/slidenerd/Android-Design-Support-Library-Demo

的github演示回购

对于第4个,您需要为每个选项卡创建片段并在选择它们时进行简单方法加载它们,或者您可以创建一个片段并与其通信以在选择选项卡时显示特定内容。

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

  1. 使用CoordinaterLayout。
  2. 您想要使用工具栏折叠(或隐藏)的任何内容都会进入collapsingToolBarLayout。
  3. 在CollapsingToolbarLayout之后,在折叠的toolBar之后停留的任何内容都会进入AppBarLayout。
  4. 前 -

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

答案 1 :(得分:1)

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

答案 2 :(得分:0)

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