Android CollapsingToolbarLayout Tytuł background

Question

Pracuję z CollapsingToolbarLayout z nowej biblioteki wsparcia projektowania Androida.

Ustawiłem jego tytuł i działa dobrze, jedynym problemem, jaki mam nadal, jest to, że podczas przewijania tekst jest tracony, w zależności od obrazu w tle.

Co chciałbym zrobić, jest ustawione tło dla tytułu CollapseingToolbarLayout, ale nie znalazłem sposób to zrobić.

Czy jest mimo to, aby to osiągnąć?

Dzięki!

Układ:

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

Konfigurowanie tytuł CollapsingToolbarLayout aktywności:

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

Edit:

Tutaj można zobaczyć sekwencję obrazów kiedy zwinąć pasek narzędzi. Możesz zobaczyć, jak tekst tytułu jest nieczytelny. Problem polega na tym, że nie mam kontroli nad obrazami, które pokazuję, więc dla niektórych obrazów wygląda to dobrze, ale dla innych, jak ten przykład, nie wygląda dobrze i nie jest czytelny. Miałem na myśli dodanie tła do tekstu, więc zawsze jest ten sam kolor z tyłu tekstu i jest on zawsze czytelny.

Answer 1

Użyj text protection scrim (przewiń w dół). Mój przykład zakłada, że ​​tekst tytułu jest biały, więc niektóre poprawki mogą być konieczne do zoptymalizowania twojego przypadku.

wewnątrz CollapsingToolbarLayout, dodać następujące po ivBigImage:

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

W swojej rozciągliwej folderze dodać:

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> 

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

Dla kolorów, należy zrobić to ciemniejsze w początkowych testach więc jest to bardziej oczywiste, masz to działa, ale do produkcji użyłem:

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

I wymiarów, użyłem wysokość 88dp.

Answer 2

Edit:

Jeśli chcesz zmienić kolor paska raz ma „skurczył”, trzeba ustawić atrybut contentScrim z zapadającego układ paska narzędzi do tego koloru:

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

Wskazanie wartości tego atrybutu na kolor, który ma zmienić pasek narzędzi, rozwiąże problem, co rozumiem.

Mam nadzieję, że odpowiedź na Twoje pytanie!

Answer 3

Użyj siatki chroniącej tekst na przykładzie Amagi82 i dodaj parametr CollapsingToolbarLayout o wartości app:expandedTitleTextAppearance.

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

Na przykład dodać to na ciebie stylu xml:

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

Answer 4

to dużo pracy osiągają tu pisząc, że znaczna część kodu. Osiągnąłem to na 2 sposoby.

1 Prosty obejście przy użyciu widoku z TransparentBlack kolorze
KOD >>

Kod wyjaśnieniu:
1 CollapsingToolbarLayout ma styl tylko z rozmiaru tekstu.
2 Domyślny dolny margines zsuwania się paska narzędzi jest nadpisywany do 16dp.
3. Nasz nagłówek z parametrem collapse parallax to RelativeLayout z ImaveView i widokiem.
4. Ten prosty widok z BG na dole górnego nagłówka Układ względny z kolorem kontrastu (tutaj # 77000000), działa jako BG dla zwiniętego tytułu CollapsingToolbarLayout w kolorze białym.

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

Obrazy dla stylu 1:

a) Kiedy CollapsingToolbarLayout Tytuł rozpręża Całkowicie:

b) Kiedy CollapsingToolbarLayout Tytuł kurczy się po przewiń w górę:

Odpowiedź above

metoda jest wspominany już przez Joao Ferreira.

Oto jak to wygląda z shadowRadius = 16: Zauważ Cień

PS zaktualizuj lub zadać więcej, jeśli jakieś niejasności :)