【发布时间】：2017-04-28 07:40:37
【问题描述】：
我想像这样实现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"/>
通过此实现，整个视图都在滚动，Toolbar 和 TabLayout 都不会固定到屏幕顶部。
我已经完成了很多教程和 stackoverflow 答案，f.e.
- https://antonioleiva.com/collapsing-toolbar-layout/
- http://blog.iamsuleiman.com/parallax-scrolling-tabs-design-support-library/
他们都很好地解释了如何使用CollapsingToolbarLayout。我认为我的实现问题是RelativeLayout 包含ImageView 和Toolbar。当删除RelativeLayout和ImageView并将Toolbar的collapseMode设置为'pin'时，一切都按预期工作，如果用户滚动，Toolbar和Tablayout都会固定在屏幕顶部.但不幸的是，我需要在toolbar 上方添加ImageView 才能将GIF 加载为Toolbar 背景。
也许你们中的某个人对如何解决这个问题有一个很棒的想法。或者你有另一个想法我怎样才能达到预期的行为？请告诉我:)
更新：我创建了一个示例项目 (https://drive.google.com/open?id=0B1aHkcAaWIA-dHBTZnUyeUt3eTQ)，您可以使用它重现错误的滚动行为。
【问题讨论】：
标签： android toolbar android-collapsingtoolbarlayout