使用windowTranslucentStatus与CollapsingToolbarLayoutwindowTranslucentStatus、CollapsingToolbarLayout

2023-09-12 02:41:31 作者:半根烟闯江湖

我试图得到类似的效果,以所看到的谷歌发挥。

I'm trying to get a similar effect to what is seen on google play.

我已经得到了下面的布局,以显示一个透明的工具栏后面的图像。当用户滚动出现在ImageView的视差效果,因为它滚动在屏幕上。工具栏返回当过用户滚动向上,当用户到达列表的垂耳ImageView的唯一回来了。

I've got the below layout to show a transparent toolbar with an image behind it. When the user scrolls there is a parallax effect on the imageview as it scrolls off the screen. The toolbar returns when ever the user scrolls up, with the imageview only returning when the user gets to the lop of the list.

这一切的伟大工程。

<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>

当我设置windowTranslucentStatus为true。 在查看内容拉升是在状态栏,但CollapsingToolbarLayout内容向上移动的状态栏(CollapsingToolbarLayout保持正确的高度)。

When I set windowTranslucentStatus to true. The contents in the view move up to be under the status bar, but the contents of the CollapsingToolbarLayout moves up twice the height of the status bar(CollapsingToolbarLayout retains correct height).

这意味着一些图像的顶端的切断和动作条现在显示状态栏下,而不是在它下面。由于此副作用现在有填充在CollapsingToolbarLayout的底部相同的高度的状态栏中

This means some of the top of the image is cut off and the actionbar now appears under the status bar instead of below it. As a side effect of this there is now padding at the bottom of the CollapsingToolbarLayout the same height as the status bar

这是什么样子没有windowTranslucentStatus。这里的一切工作正常

This is what it looks like without windowTranslucentStatus. Everything here works fine

windowTranslucentStatus设置为true

windowTranslucentStatus set to true

用户从下向上滚动列表中(而不是在顶部)

User scrolling up from lower in list (not at top)

推荐答案

目前现在已经更新到设计库。我猜测,上面贴的问题是一个错误。

There has now been an update to the design library. I'm guessing that the issue posted above was a bug.

如果你更新的设计库,这个问题将不再出现的最新版本。

If you update the design library to the latest version this issue no longer occurs.

我现在已经删除了所有fitsSystemWindows =真除了ImageView的(因为这需要在状态栏中显示)。

I have now removed all fitsSystemWindows="true" except for the ImageView (as that needs to display under the status bar).

我还删除工具栏中的负填充。

I have also removed the minus padding from the Toolbar.

这是我的主题,21 +

This is my theme for 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>

这一切都按预期工作现在

It all works as expected now