CollapsingToolbarLayout和TabLayout

Question

我想创建一个带有折叠式工具栏布局、图片和工具栏的活动页面（就像在cheesesquare示例中的CheeseDetailActivity一样，这里），它还需要在下方拥有一个选项卡布局。

你有什么实现方法吗？

当尝试将其添加到CollapsingToolbarLayout或AppBarLayout时，结果是选项卡布局位于屏幕顶部。

- Roi Divon

Answer 1

尝试使用这个结构：

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="SPECIFIC HEIGHT HERE!"
        android:fitsSystemWindows="true"
        android:theme="ADD A STYLE HERE IF YOU WANT">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            >

            <ImageView
                android:id="@+id/backdrop"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:src="YOUR SOURCE"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="YOUR MULTIPLIER"
                />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:popupTheme="YOUR POPUP THEME">

            </android.support.v7.widget.Toolbar>

            <android.support.design.widget.TabLayout
                android:id="@+id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                app:tabGravity="YOUR TAB GRAVITY"
                app:tabIndicatorColor="YOUR TAB INDICATOR COLOR"
                app:tabMode="YOUR TAB MODE">

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

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

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

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

关键属性是TabLayout的layout_gravity应设置为bottom。

对于API 21及以下版本，我遇到了TabLayout消失的问题。如果您遇到了同样的问题，请在API低于21的情况下使用以下代码：

<android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true"
    android:translationY="YOU HAVE TO EXPERIMENT WITH THIS ATTRIBUTE - (in dps)"
    app:tabGravity="YOUR TAB GRAVITY"
    app:tabIndicatorColor="YOUR TAB INDICATOR COLOR"
    app:tabMode="YOUR TAB MODE"
    >

你需要根据你的应用程序栏大小尝试使用translationY属性。你会输入一个dp值，在几分钟内就可以掌握它。

希望这对你有用，就像对我一样！

- TheoK

---

嘿，你能让固定选项卡使用重力填充吗？我只有两个选项卡，想让它们填满整个宽度，但它们总是居中显示，宽度由最长的标签决定... 你有什么想法吗？ - Tim Strehlow

我还没有时间进行更多的实验。一旦我查找到了，如果有任何结果，我会尽快回复您。 - TheoK

@PeiyongYang，你能否发布一个模型链接，以便了解你想要实现什么？ - TheoK

这个布局的行为能否被改变，以便当我向上滚动时，选项卡布局会停留在工具栏下面？https://drive.google.com/file/d/0B3twBzbq00qfdW82TWZaRWJER2c/view?usp=sharing 这是我想要实现的屏幕截图。在这种情况下，我不想能够将选项卡滚动得更高，只想保持它们在那个位置。 - Lubos Mudrak

@XOOLOOO 请尝试更改 layout_scrollFlags。 - TheoK

Answer 2

另外还可以查看这个示例，它解决了相同的问题。

经过API 14-23测试，运行良好，没有任何问题。

- Vito Valov

---

谢谢，我花了很多时间寻找可行的解决方案，这正是我所需要的。 - Georgy Gobozov

Answer 3

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".MainActivity">

<android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="230dp"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/header"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/header"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/anim_toolbar"
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:gravity="top"
                android:minHeight="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:titleMarginTop="15dp" />

            <android.support.design.widget.TabLayout
                android:id="@+id/tabs"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:layout_gravity="bottom" />

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

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

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />


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

<android.support.design.widget.NavigationView

    android:id="@+id/navigation_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:fitsSystemWindows="true"
    app:headerLayout="@layout/header" />

尝试这个...

- TysonSubba