Android:带有 ImageView 工具栏背景的 CollapsingToolbarLayout

Android: CollapsingToolbarLayout with ImageView Toolbar background

我想像这样实现 CollapsingToolbarLayout

这里的挑战是我需要一个自定义 Toolbar 和一个 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"/>

通过此实现,整个视图都在滚动,ToolbarTabLayout 都没有固定到屏幕顶部。

我学习了很多教程和 Whosebug 的答案,f.e。

他们都很好地解释了如何使用 CollapsingToolbarLayout。我认为我的实现的问题是包含 ImageViewToolbarRelativeLayout。当删除 RelativeLayoutImageView 并将 Toolbar 的 collapseMode 设置为 'pin' 时,一切都按预期工作并且 ToolbarTablayout 都得到了如果用户正在滚动,则固定在屏幕顶部。但不幸的是,我需要 toolbar 上方的 ImageView 才能加载 GIF 作为 Toolbar 背景。

也许你们中的某个人对如何解决这个问题有了绝妙的想法。或者你有另一个想法如何实现所需的行为?请告诉我:)

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

除了我的 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>

我已经更改了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>

#.这里我用CollapsingToolbarLayout高度作为300dp,它是ToolbarImageSliderTabLayout身高。使用 app:titleEnabled="false" 隐藏 CollapsingToolbar title

#.CollapsingToolbarLayout 中,添加 RelativeLayout 作为 ViewPager(图像) 和 LinearLayout(指标).添加了属性 android:layout_marginTop="?attr/actionBarSize" 以将其置于 ToolBar 下方,并且 添加 app:layout_collapseMode="parallax" 以在滚动期间显示 parallax 效果。

#.RelativeLayout 下方,添加了一个 ImageView 以在其上显示 GIF 图像。添加属性 android:layout_height="?attr/actionBarSize" 使其高度为 Toolbar 高度。添加属性 app:layout_collapseMode="pin" 以保持 ImageView 在滚动前后固定在 topvisible

#.ImageView 下面添加了 Toolbar 以显示 ToolbarImageView 之上。由于我没有将任何 background 颜色设置为 Toolbar,它将作为 transparent 工作。像 ImageView 一样,将 app:layout_collapseMode="pin" 添加到 Toolbarpin 它总是在 top。添加了属性 android:layout_height="104dp",以在 collapsed 状态期间在 Toolbar 下方显示 Tablayout。这里 104dpToolbar height(56dp ) + Tablayout height(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>

输出:

仅供参考, 因为您使用自定义 ToolbarTextView,您必须隐藏 ActionBar 的默认 title .为此,请在 Activity:

中使用以下代码
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
    getSupportActionBar().setTitle("");

希望对你有所帮助~