web-dev-qa-db-de.com

Android CollapsingToolbarLayout Titel Hintergrund

Ich arbeite mit dem CollapsingToolbarLayout aus der neuen Android Design Support Library.

Ich habe den Titel festgelegt und es funktioniert einwandfrei. Das einzige Problem, das ich noch habe, ist, dass beim Scrollen der Text je nach Bild im Hintergrund verloren geht.

Ich würde gerne einen Hintergrund für den Titel CollapsingToolbarLayout festlegen, aber ich habe keine Möglichkeit, dies zu tun.

Gibt es sowieso, um dies zu erreichen?

Vielen Dank!

Layout:

<Android.support.design.widget.CoordinatorLayout
Android:id="@+id/main_content"
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.design.widget.AppBarLayout
    Android:id="@+id/appbar"
    Android:layout_width="match_parent"
    Android:layout_height="@dimen/detail_backdrop_height"
    Android:fitsSystemWindows="true"
    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="match_parent"
        Android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginEnd="64dp"
        app:expandedTitleMarginStart="48dp"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <ImageView
            Android:id="@+id/ivBigImage"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:fitsSystemWindows="true"
            Android:scaleType="centerCrop"
            app:layout_collapseMode="parallax"/>

        <Android.support.v7.widget.Toolbar
            Android:id="@+id/toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

    </Android.support.design.widget.CollapsingToolbarLayout>

</Android.support.design.widget.AppBarLayout>

<Android.support.v4.widget.NestedScrollView
    Android:layout_width="match_parent"
    Android:layout_gravity="fill_vertical"
    Android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <LinearLayout
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:orientation="vertical"
        Android:paddingTop="24dp">

        <Android.support.v7.widget.CardView
            Android:id="@+id/cvDescription"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:layout_margin="10dp">

            <LinearLayout
                style="@style/Image.Info.CardContent"
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content">

                <TextView
                    Android:layout_width="match_parent"
                    Android:layout_height="wrap_content"
                    Android:text="@string/description"
                    Android:textAppearance="@style/TextAppearance.AppCompat.Title"/>

                <TextView
                    Android:id="@+id/tvDescription"
                    Android:layout_width="match_parent"
                    Android:layout_height="wrap_content"
                    Android:text=""/>

            </LinearLayout>

        </Android.support.v7.widget.CardView>


    </LinearLayout>

</Android.support.v4.widget.NestedScrollView>

Einrichten des Titels CollapsingToolbarLayout in der Aktivität:

CollapsingToolbarLayout collapsingToolbar =
            (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
    collapsingToolbar.setTitle("Some title here");

Bearbeiten:

Hier sehen Sie eine Folge von Bildern, wenn ich die Symbolleiste zusammenklappe. Sie können sehen, dass der Titeltext nicht lesbar ist. Das Problem ist, dass ich nicht die Kontrolle über die Bilder habe, die ich zeige. Für einige Bilder sieht das in Ordnung aus, für andere, wie dieses Beispiel, sieht es überhaupt nicht gut aus und ist nicht lesbar. Was ich im Sinn hatte, war vielleicht, dem Text eine Art Hintergrund hinzuzufügen, so dass es immer die gleiche Farbe auf der Rückseite des Textes gibt und er immer lesbar ist.

enter image description here

45
roy_lennon

Verwenden Sie ein Textschutz-Scrim (etwas nach unten scrollen). In meinem Beispiel wird davon ausgegangen, dass der Titeltext weiß ist. Daher sind möglicherweise einige Optimierungen erforderlich, um die Anzeige für Ihren Fall zu optimieren.

Fügen Sie in Ihrem CollapsingToolbarLayout nach ivBigImage Folgendes hinzu:

<View
    Android:layout_width="match_parent"
    Android:layout_height="@dimen/sheet_text_scrim_height_top"
    Android:background="@drawable/scrim_top"
    app:layout_collapseMode="pin"/>

<View
    Android:layout_width="match_parent"
    Android:layout_height="@dimen/sheet_text_scrim_height_bottom"
    Android:layout_gravity="bottom"
    Android:layout_alignBottom="@+id/image"
    Android:background="@drawable/scrim_bottom"/>

Fügen Sie in Ihrem Drawable-Ordner Folgendes hinzu:

scrim_top.xml

<shape xmlns:Android="http://schemas.Android.com/apk/res/Android">
<gradient
    Android:angle="270"
    Android:startColor="@color/translucent_scrim_top"
    Android:centerColor="@color/translucent_scrim_top_center"
    Android:endColor="@Android:color/transparent"/>
</shape>

und scrim_bottom.xml

<shape xmlns:Android="http://schemas.Android.com/apk/res/Android">
<gradient
    Android:angle="90"
    Android:startColor="@color/translucent_scrim_bottom"
    Android:centerColor="@color/translucent_scrim_bottom_center"
    Android:endColor="@Android:color/transparent"/>
</shape>

Für Farben sollten Sie diese beim ersten Testen dunkler machen, damit klarer wird, dass sie funktionieren, aber für die Produktion habe ich Folgendes verwendet:

<color name="translucent_scrim_top">#26000000</color>
<color name="translucent_scrim_top_center">#0C000000</color>
<color name="translucent_scrim_bottom">#2A000000</color>
<color name="translucent_scrim_bottom_center">#0D000000</color>

Und für die Abmessungen habe ich eine Höhe von 88dp verwendet.

75
Amagi82

Verwenden Sie ein Textschutz-Scrim aus dem Beispiel von Amagi82 und fügen Sie CollapsingToolbarLayout das app:expandedTitleTextAppearance Parameter.

<Android.support.design.widget.CollapsingToolbarLayout
    Android:id="@+id/collapsing_toolbar"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    .
    app:expandedTitleTextAppearance="@style/TextAppearance.Design.CollapsingToolbar.Expanded.Shadow"
    .
    .
    app:layout_scrollFlags="scroll|exitUntilCollapsed">

Fügen Sie zum Beispiel Folgendes zu Ihrem XML-Stil hinzu:

<style name="TextAppearance.Design.CollapsingToolbar.Expanded.Shadow">
    <item name="Android:shadowDy">0</item>
    <item name="Android:shadowDx">0</item>
    <item name="Android:shadowRadius">8</item>
    <item name="Android:shadowColor">@Android:color/black</item>
</style>
19
Joao Ferreira

Bearbeiten:

Wenn Sie die Farbe der Symbolleiste ändern möchten, nachdem sie "verkleinert" wurde, müssen Sie das Attribut contentScrim des reduzierenden Symbolleistenlayouts auf diese Farbe einstellen:

<Android.support.design.widget.CollapsingToolbarLayout
        app:contentScrim="@color/[color you want]"
        ...>

Wenn Sie den Wert dieses Attributs auf die Farbe verweisen, in die die Symbolleiste umgewandelt werden soll, wird das Problem nach meinem Verständnis behoben.

Hoffe das beantwortet deine Frage!

4
Shubhang Desai

Das ist eine Menge Arbeit, die Sie hier leisten müssen, wenn Sie so viel Code schreiben. Ich habe das auf zwei Arten erreicht.

1 Eine einfache Problemumgehung mithilfe einer Ansicht mit TransparentBlack-Farbe
CODE >>

Code Erklärung:
1 Das CollapsingToolbarLayout verfügt über einen Stil mit nur einer Textgröße.
2 Die Standardeinstellung für den unteren Rand von CollapsingToolbarLayout wird auf 16dp überschrieben.
3. Unser Header mit Parallaxe collapseMode ist ein RelativeLayout mit einer ImaveView und einer View.
4. Diese einfache Ansicht mit einem Hintergrundbild unten in der Kopfzeile Relatives Layout mit Kontrastfarbe (hier # 77000000) dient als Hintergrundbild für den reduzierten Titel von CollapsingToolbarLayout in weißer Farbe.

  <Android.support.design.widget.CollapsingToolbarLayout
        Android:id="@+id/redeem_detail_collapsing_toolbar"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:background="@color/color_window_background"
        Android:fitsSystemWindows="true"
        app:expandedTitleMarginBottom="16dp"
        app:expandedTitleTextAppearance="@style/CollapsingTitleStyle"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <!--header view-->
        <RelativeLayout
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            app:layout_collapseMode="parallax">

            <ImageView
                Android:id="@+id/redeem_detail_top_bg"
                Android:layout_width="match_parent"
                Android:layout_height="match_parent"
                Android:fitsSystemWindows="true"
                Android:scaleType="centerCrop"
                Android:src="@drawable/splash" />

            <!--A view that draws a semi tranparent black overlay so that title is visible once expanded -->
            <View
                Android:layout_width="match_parent"
                Android:layout_height="48dp"
                Android:layout_alignParentBottom="true"
                Android:background="@color/black_transparent" />

        </RelativeLayout>

        <Android.support.v7.widget.Toolbar
            Android:id="@+id/redeem_detail_toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:title="Redeem" />

    </Android.support.design.widget.CollapsingToolbarLayout>

Bilder für Stil 1:

a) Wenn der CollapsingToolbarLayout-Titel vollständig erweitert ist:

Expanded Title

b) Wenn CollapsingToolbarLayout Title beim Hochscrollen verkleinert wird:

Shrinking up

2 Antwort oben

Methode wird bereits von Joao Ferreira erwähnt.

So sieht es mit shadowRadius = 16 aus: Beachten Sie den Schatten

enter image description here

PS bitte updaten oder bei Unklarheiten mehr fragen:)

3
sud007