带有 Toolbar 和 TabLayout 的 Android CollapsingToolbarLayout答案

【问题标题】：Android CollapsingToolbarLayout with Toolbar and TabLayout带有 Toolbar 和 TabLayout 的 Android CollapsingToolbarLayout
【发布时间】：2016-02-11 12:35:53
【问题描述】：

我正在制作一个将 CollapsingToolbarLayout 与 Toolbar 和 TabLayout 结合使用的应用程序。

当标题折叠时，我想将 TabLayout 放在工具栏下方。

但是，当我尝试滚动视图时，TabLayout 会像链接图片一样覆盖工具栏：

我想在滚动时让它像这个链接的图片：

我的布局代码如下：

<?xml version="1.0" encoding="utf-8"?>
<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: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:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fitsSystemWindows="true"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <include
                android:id="@+id/header"
                layout="@layout/partial_mypage_header"
                android:layout_width="match_parent"
                android:layout_height="@dimen/mypage_header_height"
                app:layout_collapseMode="parallax"/>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="@color/orange"
                android:gravity="top"
                android:minHeight="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:titleTextColor="@android:color/white">

                <FrameLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <ImageButton
                        android:id="@+id/button_back"
                        android:layout_width="@dimen/icon_size_medium"
                        android:layout_height="@dimen/icon_size_large"
                        android:layout_gravity="center_vertical"
                        android:background="@android:color/transparent"
                        android:scaleType="centerCrop"
                        android:src="@drawable/btn_back"
                        />

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:orientation="vertical">

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center_horizontal"
                            android:text="@string/mypage_toolbar"
                            android:textColor="@android:color/white"
                            android:textSize="@dimen/text_size_medium"
                            android:textStyle="bold"/>
                    </LinearLayout>
                </FrameLayout>
            </android.support.v7.widget.Toolbar>

            <android.support.design.widget.TabLayout
                android:id="@+id/tab"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:layout_gravity="bottom"
                android:background="@android:color/white"
                android:fitsSystemWindows="true"
                app:tabIndicatorColor="@color/orange"
                app:tabIndicatorHeight="5dp"
                app:tabSelectedTextColor="@color/orange"
                app:tabTextAppearance="@style/tab_text_appearance"
                app:tabTextColor="@android:color/black"/>

        </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="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

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

我该如何解决这个问题？

【问题讨论】：

如果下方有Toolbar和TabLayout，什么是折叠？如果您不希望 Toolbar 和 TabLayout 即使在滚动内容时也留在那里，请将 Toolbar 放在 CollapsingToolbarLayout 之外，您不需要那个
我用垂直 LinearLayout 尝试过，但是当我滚动时，工具栏会覆盖 tablayout

标签： android toolbar android-collapsingtoolbarlayout

【解决方案1】：

试试：

<?xml version="1.0" encoding="utf-8"?>
<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: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">

        <include
            android:id="@+id/header"
            layout="@layout/partial_mypage_header"
            android:layout_width="match_parent"
            app:layout_scrollFlags="scroll|enterAlways"
            android:layout_height="@dimen/mypage_header_height" />

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/orange"
            android:gravity="top"
            android:minHeight="?attr/actionBarSize"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:titleTextColor="@android:color/white">

            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <ImageButton
                    android:id="@+id/button_back"
                    android:layout_width="@dimen/icon_size_medium"
                    android:layout_height="@dimen/icon_size_large"
                    android:layout_gravity="center_vertical"
                    android:background="@android:color/transparent"
                    android:scaleType="centerCrop"
                    android:src="@drawable/btn_back" />

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_horizontal"
                        android:text="@string/mypage_toolbar"
                        android:textColor="@android:color/white"
                        android:textSize="@dimen/text_size_medium"
                        android:textStyle="bold" />
                </LinearLayout>
            </FrameLayout>
        </android.support.v7.widget.Toolbar>

        <android.support.design.widget.TabLayout
            android:id="@+id/tab"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:layout_gravity="bottom"
            android:background="@android:color/white"
            android:fitsSystemWindows="true"
            app:tabIndicatorColor="@color/orange"
            app:tabIndicatorHeight="5dp"
            app:tabSelectedTextColor="@color/orange"
            app:tabTextAppearance="@style/tab_text_appearance"
            app:tabTextColor="@android:color/black" />

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

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

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

【讨论】：

感谢您的回答，但我想使用 CollapsingToolbarLayout 并将工具栏放在屏幕顶部（固定）
它也会被固定在这段代码中，只有标题布局会被滚动。
我已经试过了，但看起来很奇怪。工具栏和标签布局已附加，但它位于屏幕底部

【解决方案2】：

我通过使用权宜之计解决了这个问题。我制作了 2 个工具栏，包括原始工具栏。我做了一个透明的。然后，它看起来工作正常，但我认为这不是明确的方法。

【讨论】：