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

我想像这样实现一个CollapsingToolbarLayout：

这里的挑战是我需要一个带有gif作为背景的自定义工具栏,因此我需要一个ImageView作为工具栏的背景.您可以在以下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"/>

通过此实现,整个视图都是滚动的,工具栏和TabLayout都没有固定到屏幕顶部.

我已经完成了很多教程和stackoverflow的答案,比如说.

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

他们都对如何使用CollapsingToolbarLayout提供了很好的解释.我认为我的实现问题是包含ImageView和工具栏的RelativeLayout.当删除RelativeLayout和ImageView并将工具栏的collapseMode设置为’pin’时,一切按预期工作,如果用户正在滚动,则工具栏和Tablayout都会固定在屏幕顶部.但不幸的是,我需要让工具栏上方的ImageView能够加载GIF作为工具栏背景.

也许你们其中一个人对如何解决这个问题有了很棒的想法.或者你还有另一个想法,我怎么能达到预期的行为？请告诉我：)

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

解决方法

#.这里我使用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”使其高度为工具栏高度.添加了属性app：layout_collapseMode =“pin”以使ImageView固定在顶部并在滚动之前或之后可见.

#.在ImageView下添加了工具栏,以在ImageView上显示工具栏.由于我没有为工具栏设置任何背景颜色,因此它将以透明方式工作.与ImageView一样,将app：layout_collapseMode =“pin”添加到工具栏以将其固定在顶部.添加属性android：layout_height =“104dp”,在折叠状态下显示工具栏下方的Tablayout.这里104dp是工具栏高度(56dp)Tablayout高度(48dp).

#.最后在工具栏下面添加了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>

OUTPUT：

仅供参考,因为您使用自定义工具栏和TextView,您必须隐藏ActionBar的默认标题.为此,请在您的活动中使用以下代码：

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

希望这会有所帮助〜

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

解决方法

相关文章