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

概述我想像这样实现一个CollapsingToolbarLayout： 这里的挑战是我需要一个带有gif作为背景的自定义工具栏,因此我需要一个ImageView作为工具栏的背景.您可以在以下xml中看到我的实现： <?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.AppBarLayout android: 我想像这样实现一个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全部内容，希望文章能够帮你解决Android：使用ImageView工具栏背景的CollapsingToolbarLayout所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。