使用windowTranslucentStatus和CollapsingToolbarLayout

我试图得到类似的效果,谷歌播放看到什么。

我有下面的布局显示一个透明的工具栏,后面有一个图像。 当用户滚动时,在图像视图滚动离开屏幕时会产生视差效果。 当用户向上滚动时,工具栏会返回,当用户到达列表的顶端时,图像视图才会返回。

这一切都很好。

<android.support.design.widget.CoordinatorLayout android:id="@+id/main" 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.support.v7.widget.RecyclerView android:id="@+id/recyclerView" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> <android.support.design.widget.AppBarLayout android:layout_height="wrap_content" android:layout_width="match_parent" android:background="@color/background_material_dark"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsingToolbarLayout" android:layout_width="match_parent" android:layout_height="match_parent" android:minHeight="?attr/actionBarSize" app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed" app:statusBarScrim="#09b" app:contentScrim="#09f"> <ImageView android:id="@+id/img" android:layout_width="match_parent" android:layout_height="wrap_content" android:src="@drawable/location_banner" app:layout_collapseMode="parallax" app:layout_collapseParallaxMultiplier="0.7" /> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_height="?attr/actionBarSize" android:layout_width="match_parent" app:layout_collapseMode="pin" android:fitsSystemWindows="true" app:theme="@style/ThemeOverlay.AppCompat.ActionBar" app:popupTheme="@style/ThemeOverlay.AppCompat.Dark"/> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> </android.support.design.widget.CoordinatorLayout> 

问题

当我设置windowTranslucentStatus为true。 视图中的内容向上移动到状态栏的下方,但CollapsingToolbarLayout的内容上移了状态栏高度的两倍(CollapsingToolbarLayout保留了正确的高度)。

这意味着图像的一些顶部被切断,操作栏现在出现在状态栏下面而不是下面。 作为一个副作用,现在在CollapsingToolbarLayout底部填充与状态栏相同的高度

这是没有windowTranslucentStatus的样子。 这里的一切工作正常 在这里输入图像说明

windowTranslucentStatus设置为true 在这里输入图像说明

用户从列表中较低的位置滚动(不在顶部) 在这里输入图像说明

Solutions Collecting From Web of "使用windowTranslucentStatus和CollapsingToolbarLayout"

现在devise库已经有了更新。 我猜测上面的问题是一个错误。

如果将devise库更新为最新版本,则不再发生此问题。

我现在已经删除了除了ImageView之外的所有fitsSystemWindows =“true”(因为需要在状态栏下显示)。

我也从工具栏中删除了减号填充。

这是我21+的主题

 <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <item name="android:windowTranslucentStatus">true</item> <item name="android:windowActionBarOverlay">true</item> <item name="android:windowContentOverlay">@null</item> <item name="android:textColorPrimary">@android:color/white</item> </style> 

这一切现在按预期工作

添加fitsSystemWindows来布局并设置为true。

更新

对不起,我不完整的答案。 您应该添加fitsSystemWindows =“true”布局xml,如下面的代码。

 <android.support.design.widget.CoordinatorLayout android:id="@+id/main" 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.v7.widget.RecyclerView android:id="@+id/recyclerView" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> <android.support.design.widget.AppBarLayout android:layout_height="wrap_content" android:layout_width="match_parent" android:background="@color/background_material_dark" android:fitsSystemWindows="true"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsingToolbarLayout" android:layout_width="match_parent" android:layout_height="match_parent" android:minHeight="?attr/actionBarSize" app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed" app:statusBarScrim="#09b" app:contentScrim="#09f" android:fitsSystemWindows="true"> <ImageView android:id="@+id/img" android:layout_width="match_parent" android:layout_height="wrap_content" android:src="@drawable/location_banner" app:layout_collapseMode="parallax" app:layout_collapseParallaxMultiplier="0.7" android:fitsSystemWindows="true"/> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_height="?attr/actionBarSize" android:layout_width="match_parent" app:layout_collapseMode="pin" android:fitsSystemWindows="true" app:theme="@style/ThemeOverlay.AppCompat.ActionBar" app:popupTheme="@style/ThemeOverlay.AppCompat.Dark"/> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> </android.support.design.widget.CoordinatorLayout> 

一旦状态栏是透明的并且活动可以自由使用,工具栏就会被推到顶部占据那个空间。 要解决此问题,您需要手动将工具栏移动到原始位置。

将下面的标签添加到“android.support.v7.Widget.Toolbar”视图中:

 android:layout_height="48dp" // Whatever the height of the toolbar you want android:layout_marginTop="-48dp" // Negative of the height of the toolbar 

扩展CoordinatorLayout并在构造函数中调用setOnApplyWindowInsetsListener来重置插值。 这里是代码:

 public class CustomCoordinatorLayout extends CoordinatorLayout { public CustomCoordinatorLayout(Context context) { super(context); init(); } public CustomCoordinatorLayout(Context context, AttributeSet attrs) { super(context, attrs); init(); } public CustomCoordinatorLayout(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(); } private void init() { if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT_WATCH) { setOnApplyWindowInsetsListener(new OnApplyWindowInsetsListener() { @Override public WindowInsets onApplyWindowInsets(View view, WindowInsets windowInsets) { WindowInsets replaced = windowInsets.replaceSystemWindowInsets(0, 0, 0, 0); return replaced; } }); } } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); } } 

我有同样的问题,但有一件事我知道。

如果你在普通工具栏上有一个透明的状态栏,你需要添加一个16dp的填充顶部。

Stimsoni说,实现这个目标的最好方法就是如此

向CoordiatorLayout,AppBarLayout和ImageView添加android:fitsSystemWindows =“true”

 <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/main_content" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true"> <android.support.design.widget.AppBarLayout android:id="@+id/appBar" android:fitsSystemWindows="true" 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/collapsing_toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" app:contentScrim="?attr/colorPrimary" app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"> <ImageView android:id="@+id/background" android:layout_width="match_parent" android:layout_height="256dp" android:scaleType="centerCrop" android:fitsSystemWindows="true" app:layout_collapseMode="parallax" android:alpha="0.75" android:src="@drawable/foo"/> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" app:layout_collapseMode="pin"/> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout>... 

只需更改Styles.XML(v21)中状态栏的颜色即可

 <item name="android:statusBarColor">@android:color/transparent</item> 

或者在该XML中删除上面的行,使其完美。