35

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

背後に画像がある透明なツールバーを表示する以下のレイアウトがあります。ユーザーがスクロールすると、画像ビューが画面外にスクロールする際に視差効果が生じます。ツールバーは、ユーザーが上にスクロールするたびに戻ります。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 がない場合の外観です。ここではすべて正常に動作します ここに画像の説明を入力

windowTranslucentStatus を true に設定 ここに画像の説明を入力

ユーザーがリストの下から上にスクロールする (上からではなく) ここに画像の説明を入力

4

7 に答える 7

25

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

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

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>

すべてが期待どおりに機能するようになりました

于 2015-10-08T00:03:10.920 に答える
21

fitSystemWindows をレイアウトに追加し、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>
于 2015-06-24T11:15:39.323 に答える
4

を拡張し、コンストラクターを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);
    }
}
于 2016-06-23T12:54:18.590 に答える
2

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

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

于 2015-06-18T06:18:00.923 に答える
-2

Styles.XML(v21)でステータスバーの色を変更するだけです

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

または、その XML の上記の行を削除すると、完全に機能します。

于 2016-08-05T13:04:59.437 に答える