web-dev-qa-db-ja.com

CollapsingToolbarLayoutでwindowTranslucentStatusを使用する

Google Playで見られるものと同様の効果を得ようとしています。

背後に画像が表示された透明なツールバーを表示するためのレイアウトを以下に示します。ユーザーがスクロールすると、画面外にスクロールするため、imageviewに視差効果があります。ツールバーはユーザーが上にスクロールするたびに戻り、imageviewはユーザーがリストの半分に達したときにのみ戻ります。

これはすべてうまくいきます。

<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のコンテンツはステータスバーの高さの2倍上に移動します（CollapsingToolbarLayoutは正しい高さを保持します）。

つまり、画像の上部の一部が切り取られ、アクションバーがステータスバーの下ではなくステータスバーの下に表示されるようになりました。この副作用として、CollapsingToolbarLayoutの下部にステータスバーと同じ高さのパディングが追加されました。

これは、windowTranslucentStatusがない場合の外観です。ここですべてが正常に動作します enter image description here

windowTranslucentStatusをtrueに設定 enter image description here

ユーザーがリストの下から上にスクロールする（上ではない） enter image description here

androidandroid-actionbarstatusbarandroid-collapsingtoolbarlayoutandroid-coordinatorlayout
32
Stimsoni

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>
18
David Jin Han

これで、デザインライブラリが更新されました。上記の問題はバグだったと思います。

デザインライブラリを最新バージョンに更新すると、この問題は発生しなくなります。

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>

すべて正常に動作するようになりました

23
Stimsoni

これを達成する最良の方法は、スティムソーニが言ったようです

Android：fitsSystemWindows = "true"をCoordiatorLayout、AppBarLayoutおよびImageViewに追加します

<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>...
5
mparkes

ステータスバーが透明になり、アクティビティで自由に使用できるようになったら、ツールバーを上に押してそのスペースを占有します。これを修正するには、ツールバーを元の場所に手動で移動する必要があります。

以下のタグを「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
4
Henry

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);
    }
}
4
Enes

私も同じ問題を抱えていますが、私が知っていることが1つあります。

通常のツールバーに透明なステータスバーを表示する場合は、16dpのパディングトップを追加する必要があります。

2
alvarlagerlof