CollapsingToolbarLayout在API 26中显示图像下的条形图

Question

将支持库从 v25.4.0 升级到 v26.0.0 后，CollapsingToolbarLayout不适合内部的内容，但在下方显示空白区域（可能是状态栏的大小）。举例说明：

使用v25.4.0：

使用v26.0.0：

XML的{​​{1}}布局是

Activity

我尝试使用<?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:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true"> <android.support.design.widget.AppBarLayout android:id="@+id/appBarLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:fitsSystemWindows="true"> <android.support.design.widget.CollapsingToolbarLayout android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" app:contentScrim="?attr/colorPrimary" app:expandedTitleMarginEnd="64dp" app:expandedTitleMarginStart="48dp" app:layout_scrollFlags="scroll|exitUntilCollapsed" app:titleEnabled="false"> <ImageView android:layout_width="match_parent" android:layout_height="wrap_content" android:fitsSystemWindows="true" android:src="@drawable/material_flat" android:scaleType="fitXY" app:layout_collapseMode="parallax" /> <ImageView android:layout_width="86dp" android:layout_height="86dp" android:layout_gravity="bottom|start" android:paddingBottom="16dp" android:paddingLeft="16dp" /> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:layout_collapseMode="pin" /> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <android.support.v4.widget.NestedScrollView android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:text="Minions ipsum ..." /> </android.support.v4.widget.NestedScrollView> </android.support.design.widget.CoordinatorLayout> 值进行游戏，如建议的here，但结果不是预期的结果。 如果您想查看更多详细信息，我的实施代码为this Github repo。

Answer 1

我尝试编辑您的代码，并且得到了您想要实现的想法结果：

我唯一要编辑的是，我没有将AppBarLayout的layout_height设置为wrap_content，而是将其更改为190dp。

我从CheeseSquare仓库https://github.com/chrisbanes/cheesesquare中得到了这个解决方案，这就是它如何使ImageView under transparent statusBar产生想法效果的原因：

如您所见，可以为AppBarLayout设置固定高度。

为什么在您的信息中显示蓝色条？

这个问题的答案来自两个因素： 1.将AppBarLayout的高度设置为wrap_content； 2.您的imageView适合SystemWindows。

将fitsSystemWindows设置为true时，imageView将使用窗口插图，并且视图本身的高度与statusBar完全相同。发生这种情况时，AppBarLayout不会根据此imageView的滑动来调整其高度，因此会显示一个难看的底部栏。

如何解决此问题？

一种修复方法是尝试在xml文件中设置AppBarLayout的修复高度。就像我上面显示的那样，这是简单的方法。

如果您不知道图片的确切高度，例如从互联网下载图片，该怎么办？我的建议是，您也可以在活动中处理此问题。图片背景的下载完成后，您可以获取图像的度量高度，然后以编程方式获取AppBarLayout的高度。这也应该可以解决问题，并且不再存在任何障碍。