Android：使用ImageView的CollapsingToolbarLayout作为工具栏背景

Question

我想要实现一个像这样的CollapsingToolbarLayout:

这里的挑战在于我需要一个自定义的带有gif背景的工具栏，因此我需要将ImageView作为Toolbar的背景。您可以在以下XML中查看我的实现：

<?xml version="1.0" encoding="utf-8"?>

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

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/htab_collapse_toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        app:contentScrim="@color/colorAccent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">

        <!-- Container which should be scrolled parallax and contains the image gallery -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:fitsSystemWindows="true"
            app:layout_collapseMode="parallax">

            <RelativeLayout
                android:id="@+id/image_layer"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">

                <android.support.v4.view.ViewPager
                    android:id="@+id/image_gallery"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@color/colorAccent"
                    android:layout_marginTop="?attr/actionBarSize"/>

                <LinearLayout
                    android:id="@+id/image_indicators"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal"
                    android:padding="@dimen/defaultPadding"
                    android:gravity="center"
                    android:layout_alignParentBottom="true"/>
            </RelativeLayout>
        </LinearLayout>

        <!-- Container which contains the background for the toolbar and the toolbar itself  -->
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin">

            <ImageView
                android:id="@+id/toolbar_background"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:scaleType="centerCrop"
                android:layout_gravity="top"
                android:background="@color/colorPrimaryLight"/>

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

                <de.views.CustomTextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textAllCaps="true"
                    android:textColor="#FF0000"
                    android:textStyle="bold"
                    android:gravity="center"
                    android:maxLines="1"
                    android:ellipsize="end"
                    android:layout_gravity="center"
                    android:id="@+id/toolbar_title"
                    tools:text="Restauranttitel"/>
            </android.support.v7.widget.Toolbar>
        </RelativeLayout>

        <!-- Tablayout -->
        <android.support.design.widget.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:layout_gravity="bottom"
            app:tabBackground="@drawable/selected_tab_background"
            app:tabIndicatorColor="@android:color/transparent"
            app:tabGravity="fill"
            app:tabMode="fixed"
            app:tabMaxWidth="2000dp"/> <!-- we need to set this value to a very big value so that a single tab gets displayed over the full width too -->

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

<FrameLayout
    android:id="@+id/activity_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

使用这种实现方式，整个视图都会滚动，既不会将Toolbar固定在屏幕顶部，也不会将TabLayout固定在屏幕顶部。

我已经学习了很多教程和stackoverflow的答案，例如：

• https://antonioleiva.com/collapsing-toolbar-layout/
• http://blog.iamsuleiman.com/parallax-scrolling-tabs-design-support-library/

他们都很好地解释了如何使用CollapsingToolbarLayout。我认为我的实现问题在于包含ImageView和Toolbar的RelativeLayout。当删除RelativeLayout和ImageView并将Toolbar的collapseMode设置为'pin'时，一切都按预期工作，并且如果用户滚动，则Toolbar和Tablayout都会固定在屏幕顶部。但不幸的是，我需要将ImageView放在Toolbar上方，以便能够将GIF加载为Toolbar背景。

也许你们中的某个人有一个绝妙的想法来解决这个问题。或者您有另一个想法可以实现所需的行为？请告诉我 :)

更新：我已经创建了一个示例项目（https://drive.google.com/open?id=0B1aHkcAaWIA-dHBTZnUyeUt3eTQ），您可以使用它来重现错误的滚动行为。

- jennymo

Answer 1

#. 在这里，我将CollapsingToolbarLayout的高度设置为300dp，这是Toolbar、ImageSlider和TabLayout高度之和。使用app:titleEnabled="false"隐藏了CollapsingToolbar的标题。

#. 在CollapsingToolbarLayout中，添加了一个RelativeLayout作为ViewPager（图片）和LinearLayout（指示器）的容器。添加属性android:layout_marginTop="?attr/actionBarSize"将其放置在ToolBar下方，并添加app:layout_collapseMode="parallax"以在滚动期间显示视差效果。

#. 在RelativeLayout下面，添加一个ImageView来显示GIF图像。添加属性android:layout_height="?attr/actionBarSize"使其高度与Toolbar高度相同。添加属性app:layout_collapseMode="pin"，以便在滚动之前或之后保持ImageView固定在top位置并可见。

#. 在ImageView下面添加了一个Toolbar，以在ImageView上方显示Toolbar。由于我没有设置任何background颜色，因此它将作为transparent。像ImageView一样，添加了app:layout_collapseMode="pin"属性，以便始终将Toolbar固定在top位置。添加属性android:layout_height="104dp"，以在collapsed状态下在Toolbar下方显示Tablayout。这里的104dp是Toolbar高度（56dp）+ Tablayout高度（48dp）。

#. 最后，在Toolbar下面添加了TabLayout，并添加了属性android:layout_gravity="bottom"，以在CollapsingToolbarLayout底部显示它。

这是简化后的工作XML：

<?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:id="@+id/coordinator_layout"
    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/htab_collapse_toolbar"
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:fitsSystemWindows="true"
            app:titleEnabled="false"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">

            <!-- Image slider container -->
            <RelativeLayout
                android:id="@+id/image_layer"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginTop="?attr/actionBarSize"
                app:layout_collapseMode="parallax">

                <!-- ViewPager -->
                <android.support.v4.view.ViewPager
                    android:id="@+id/image_gallery"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"/>

                <!-- Pager Indicator Container -->
                <LinearLayout
                    android:id="@+id/image_indicators"
                    android:layout_width="100dp"
                    android:layout_height="wrap_content"
                    android:layout_alignParentBottom="true"
                    android:layout_centerHorizontal="true"
                    android:layout_marginBottom="56dp"
                    android:orientation="horizontal"
                    android:padding="8dp"
                    android:gravity="center"
                    android:background="@color/black"/>
            </RelativeLayout>

            <!-- Toolbar background  :: GIF -->
            <ImageView
                android:id="@+id/toolbar_background"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:scaleType="centerCrop"
                app:layout_collapseMode="pin"
                android:src="@drawable/dummy"/>

            <!-- Toolbar -->
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="104dp"
                android:minHeight="?attr/actionBarSize"
                app:layout_collapseMode="pin">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textAllCaps="true"
                    android:textColor="#000"
                    android:textStyle="bold"
                    android:gravity="center"
                    android:maxLines="1"
                    android:ellipsize="end"
                    android:layout_gravity="top"
                    android:id="@+id/toolbar_title"
                    android:text="Restaurant Title"/>
            </android.support.v7.widget.Toolbar>

            <!-- TabLayout -->
            <android.support.design.widget.TabLayout
                android:id="@+id/tab_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                app:tabBackground="@android:color/holo_red_dark"
                app:tabIndicatorColor="@android:color/transparent"
                app:tabGravity="fill"
                app:tabMode="fixed"
                app:tabMaxWidth="2000dp"/>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <!-- Container for TAB'S Fragments -->
    <android.support.v4.view.ViewPager
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>

输出：

顺便提一下，如果您正在使用自定义的Toolbar和TextView，则必须隐藏ActionBar的默认title。要执行此操作，请在您的Activity中使用以下代码：

    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
    getSupportActionBar().setTitle("");

希望这能有所帮助~

- Ferdous Ahamed

---

非常欢迎。我很高兴能够解决你的问题。祝你编码愉快 :) - Ferdous Ahamed

我正在尝试让这段代码工作，但是我在哪里需要放置ImageView（位于三个选项卡上方）的代码？此外，在滚动时将照片的大小调整为其高度的一半，而不是消失，是否可能？我在这里提出了一个问题（我想要像这个问题一样实现它（带有三个选项卡）：https://stackoverflow.com/questions/53099251/resize-the-image-to-half-on-scrolling-down）。 - Robert Pal

Answer 2

我做了相同的事情，只是我的Activity中没有TabLayout。以下是我是如何做到的，希望能对你有所帮助。

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/rootLayout"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".ActivityMemoryDetail">

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

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsingToolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:minHeight="?attr/actionBarSize"
            app:expandedTitleMarginStart="10dp"
            app:expandedTitleMarginBottom="10dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">


            <android.support.v4.view.ViewPager
                android:id="@+id/viewPager"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.7" />
            <LinearLayout
                android:id="@+id/imageIndicatorLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal"
                android:layout_marginTop="4dp"
                android:orientation="horizontal">
            </LinearLayout>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:minHeight="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:theme="@style/ThemeOverlay.AppCompat.Light"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
        </android.support.design.widget.CollapsingToolbarLayout>

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


    <android.support.v4.widget.NestedScrollView
        android:id="@+id/nstScroll"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

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


            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp">

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical"
                    android:padding="10dp">
                    <TextView
                        android:id="@+id/txtTagsH"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textSize="18sp"
                        android:text="Tags"/>
                    <View
                        android:id="@+id/tempView1"
                        android:layout_width="match_parent"
                        android:layout_height="1dp"
                        android:background="#6d6d6d"
                        android:layout_marginTop="5dp"
                        android:layout_marginBottom="5dp"
                        android:layout_below="@+id/txtTagsH"/>
                    <TextView
                        android:id="@+id/txtTags"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_below="@+id/tempView1"
                        android:text="lorem, ispum, dolor, sit"/>
                </RelativeLayout>
            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp">

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical"
                    android:padding="10dp">

                    <TextView
                        android:id="@+id/txtDateH"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textSize="18sp"
                        android:text="Date"/>
                    <View
                        android:id="@+id/tempView2"
                        android:layout_width="match_parent"
                        android:layout_height="1dp"
                        android:background="#6d6d6d"
                        android:layout_marginTop="5dp"
                        android:layout_marginBottom="5dp"
                        android:layout_below="@+id/txtDateH"/>
                    <TextView
                        android:id="@+id/txtDate"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_below="@+id/tempView2"
                        android:text="Saturday April 30, 2016 at 8:30 PM"/>
                </RelativeLayout>

            </android.support.v7.widget.CardView>
        </LinearLayout>

    </android.support.v4.widget.NestedScrollView>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fabEdit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right|end"
        android:layout_margin="16dp"
        android:src="@drawable/ic_mode_edit_white_24dp"
        android:onClick="editMemory"/>

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

- Waqas Ahmed Ansari

Answer 3

我已经修改了activity_main.xml文件。 以下是代码：

<?xml version="1.0" encoding="utf-8"?>

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

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/htab_collapse_toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">



            <RelativeLayout
                android:id="@+id/image_layer"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:layout_collapseMode="parallax"
                android:layout_marginTop="?attr/actionBarSize"
                android:layout_marginBottom="?attr/actionBarSize">

                <android.support.v4.view.ViewPager
                    android:id="@+id/image_gallery"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@color/colorAccent"
                    android:layout_alignParentTop="true"/>

                <LinearLayout
                    android:id="@+id/image_indicators"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal"
                    android:padding="8dp"
                    android:gravity="center"
                    android:layout_alignParentBottom="true">

                    <View
                        android:layout_width="8dp"
                        android:layout_height="8dp"
                        android:layout_margin="4dp"
                        android:background="@drawable/indicator"/>

                    <View
                        android:layout_width="8dp"
                        android:layout_height="8dp"
                        android:layout_margin="4dp"
                        android:background="@drawable/indicator"/>

                    <View
                        android:layout_width="8dp"
                        android:layout_height="8dp"
                        android:layout_margin="4dp"
                        android:background="@drawable/indicator"/>


                </LinearLayout>
            </RelativeLayout>




            <ImageView
                android:id="@+id/toolbar_background"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:scaleType="centerCrop"
                android:visibility="gone"
                android:layout_gravity="top"/>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:background="@drawable/banner_gif"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                >

                <de.scrollbehaviour.CustomTextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textColor="#FF0000"
                    android:textStyle="bold"
                    android:gravity="center"
                    android:maxLines="1"
                    android:ellipsize="end"
                    android:layout_gravity="center"
                    android:id="@+id/toolbar_title"
                    tools:text="Titel"/>
            </android.support.v7.widget.Toolbar>


         <!-- we need to set this value to a very big value so that a single tab gets displayed over the full width too -->

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

<FrameLayout
    android:id="@+id/activity_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">
    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:tabBackground="@color/colorWhite"
        app:tabTextColor="#000000"
        app:tabGravity="fill"
        android:layout_gravity="top"
        app:tabMode="fixed"
        app:tabMaxWidth="2000dp"/>
    <android.support.v4.view.ViewPager
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/viewpager"
        android:layout_marginTop="?attr/actionBarSize"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#FFFFFF"/>
</FrameLayout>

- Vishnu Prasad