wake-up-neo.com

Verwenden von windowTranslucentStatus mit CollapsingToolbarLayout

Ich versuche, einen ähnlichen Effekt wie bei Google Play zu erzielen.

Ich habe das folgende Layout, um eine transparente Symbolleiste mit einem Bild dahinter anzuzeigen. Wenn der Benutzer einen Bildlauf durchführt, tritt in der Bildansicht ein Parallaxeeffekt auf, wenn der Bildlauf vom Bildschirm ausgeführt wird. Die Symbolleiste kehrt immer dann zurück, wenn der Benutzer einen Bildlauf nach oben durchführt. Die Bildansicht kehrt nur dann zurück, wenn der Benutzer den letzten Punkt der Liste erreicht.

Das alles funktioniert super.

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

Die Angelegenheit

Wenn ich windowTranslucentStatus auf true setze. Der Inhalt der Ansicht wird in die Statusleiste verschoben, der Inhalt des CollapsingToolbarLayout wird jedoch doppelt so hoch wie die Statusleiste verschoben (CollapsingToolbarLayout behält die richtige Höhe bei).

Dies bedeutet, dass ein Teil des oberen Bereichs des Bildes abgeschnitten ist und die Aktionsleiste nun unter der Statusleiste anstatt darunter angezeigt wird. Als Nebeneffekt davon befindet sich nun am unteren Rand der CollapsingToolbarLayout ein Auffüllen in der gleichen Höhe wie die Statusleiste

So sieht es ohne windowTranslucentStatus aus. Alles hier funktioniert gut enter image description here

windowTranslucentStatus auf true gesetzt enter image description here

Benutzer, der in der Liste von unten nach oben scrollt (nicht oben) enter image description here

32
Stimsoni

Füge fitsSystemWindows zum Layout hinzu und setze es auf true.

pdate

Entschuldigung für meine unvollständige Antwort. Sie sollten fitsSystemWindows = "true" zu Layout-XML hinzufügen, wie in den folgenden Codes dargestellt.

<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

Die Konstruktionsbibliothek wurde jetzt aktualisiert. Ich vermute, dass das Problem, das oben gepostet wurde, ein Fehler war.

Wenn Sie die Konstruktionsbibliothek auf die neueste Version aktualisieren, tritt dieses Problem nicht mehr auf.

Ich habe jetzt alle FitsSystemWindows = "true" mit Ausnahme der ImageView (wie das unter der Statusleiste angezeigt werden muss) entfernt.

Ich habe auch den Minuspolster aus der Symbolleiste entfernt.

Dies ist mein Thema für 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>

Alles funktioniert jetzt wie erwartet

23
Stimsoni

Der beste Weg, dies zu erreichen, ist, wie Stimsoni sagte

Fügen Sie Android: fitsSystemWindows = "true" zu CoordiatorLayout, AppBarLayout und ImageView hinzu

<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

Sobald die Statusleiste transparent ist und von der Aktivität frei verwendet werden kann, wird die Symbolleiste nach oben gedrückt, um diesen Platz zu belegen. Um dies zu beheben, müssen Sie die Symbolleiste manuell an die ursprüngliche Position verschieben.

Fügen Sie der Ansicht "Android.support.v7.Widget.Toolbar" die folgenden Tags hinzu:

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

Erweitern Sie das CoordinatorLayout und rufen Sie setOnApplyWindowInsetsListener in Ihrem Konstruktor auf, um eingefügte Werte zurückzusetzen. Hier ist der Code:

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

Ich habe das gleiche Problem, aber eines weiß ich.

Wenn Sie eine transparente Statusleiste auf einer normalen Symbolleiste haben möchten, müssen Sie ein 16-Bit-Polster hinzufügen.

2
alvarlagerlof