41

Я работаю с CollapsingToolbarLayout из новой библиотеки поддержки дизайна Android.Android CollapsingToolbarLayout Заголовок фона

Я установил свой заголовок, и он работает нормально, единственная проблема, которая у меня до сих пор заключается в том, что при прокрутке текст теряется, в зависимости от изображения в фоновом режиме.

Что бы я хотел сделать, задан фон заголовка CollapsingToolbarLayout, но я не нашел способ сделать это.

Есть ли в любом случае для достижения этой цели?

Спасибо!

Планировка:

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

Настройка заголовка CollapsingToolbarLayout в деятельности:

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

Edit:

Здесь вы можете увидеть последовательность изображений, когда я разрушаться панели инструментов. Вы можете видеть, как текст заголовка не читается. Проблема в том, что у меня нет контроля над изображениями, которые я показываю, поэтому для некоторых изображений он выглядит нормально, но для других, как этот пример, он выглядит не совсем хорошо, и он не читается. То, что я имел в виду, возможно, добавило какой-то фон в текст, так что всегда есть тот же цвет в конце текста, и он всегда читаем.

enter image description here

+3

Нет необходимости добавлять код, то только простой CoordinatorToolbarLayout. Ничего особенного здесь, но я все равно буду –

+11

@ Jared Burrows Здесь нет необходимости в коде, это основная функциональность. Кроме того, зачем беспокоиться, оставляя комментарий? Если вы не хотите помогать, закройте вкладку и продолжайте свою жизнь. –

+0

Привет @roy_lennon Я столкнулся с той же проблемой, что и вы, но я применил решение, описанное ниже, без последствий, я все еще вижу изображение в collapsingtoolbarlayout точно так же, как и раньше (и точно так же, как вы описали по вашему вопросу) не могли бы вы помочь мне? – neteot

ответ

66

Используйте text protection scrim (прокрутите немного вниз). В моем примере предполагается, что текст заголовка белый, поэтому некоторые настройки могут быть необходимы для оптимизации вашего дела.

Внутри вашего CollapsingToolbarLayout, добавьте следующее после 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"/> 

В вашей вытяжке папке, добавьте:

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> 

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

Для цветов, вы должны сделать их темнее первоначального тестирования, так что это более очевидно, у вас есть это работает, но для производства я использовал:

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

И размеры, я использовал высоту 88dp.

+1

Спасибо, это, похоже, решает мою проблему. Мне нужно немного поиграть и немного подправить его, но я думаю, что это все. Благодаря! –

+0

Здравствуйте @ Amagi82 Я пытаюсь решить эту проблему точно, что у меня есть в своем приложении с вашим решением, но оно не работает. Первое представление работает (верхний вид для кнопок), если вы используете вкладку «дизайн» в студии Android в макете xml, там, но другой вид снизу не отображается, а на вкладке дизайна в xml он появляется над другими компонентами вне схемы координатора. Знаете ли вы, что может произойти? благодаря! – neteot

+0

@neteot Я не уверен, не увидев ваш код и без изображения того, что происходит, но первое, что я проверил, - это где и в каком порядке я поместил свои представления в макет. Являются ли холсты внутри CollapsingToolbarLayout? В каком порядке они? Они рисуются в порядке, поэтому, если вы поместите изображение полного размера после другого представления внутри FrameLayout (например, CollapsingToolbarLayout), оно будет нарисовано поверх него. Дайте мне знать, если это поможет, или, пожалуйста, уточните, не нахожусь ли я на правильном пути. Удачи. :) – Amagi82

4

Edit:

Если вы хотите изменить цвет панели инструментов, как только он имеет «усадку», вам необходимо установить атрибут contentScrim разрушающегося расположение панелей инструментов этого цвета:

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

Указывая значение этого атрибута на цвет, который вы хотите, чтобы панель инструментов включалась, решит вашу проблему, как я ее понимаю.

Надеюсь, что ответит на ваш вопрос!

+0

У меня есть это уже, я только хочу, чтобы фон обрушившегося заголовка панели инструментов имел другой цвет –

+0

@roy_lennon Извините, полностью непонятый вопрос. Проверьте изменения. –

+0

Спасибо! Я уже знал это ... но это не то, что я пытаюсь сделать ... Я пытаюсь изменить заголовок панели Collapsing Toolbar перед ее свертыванием ... –

16

Используйте текстовую защиту от примера Amagi82 и добавьте на CollapsingToolbarLayout параметр 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"> 

Например добавить это на вас стиль 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> 
+2

Хорошее решение. Это сработало для меня. – taciosd

1

Это много работы этого достичь здесь, написав, что большая часть кода. Я достиг этого двумя способами.

1 Простое решение с помощью View с цветом TransparentBlack
КОД >>

Код объяснений:
1 CollapsingToolbarLayout имеет стиль с только размер текста.
2 По умолчанию CollapsingToolbarLayout margin bottom переопределяется до 16dp.
3. Наш заголовок с параллаксом collapseMode является RelativeLayout с ImaveView и представлением.
4. Этот простой вид с BG в нижней части верхнего заголовка. Относительная компоновка с цветом контраста (здесь # 77000000) действует как свернутый заголовок BG для CollapsingToolbarLayout в белом цвете.

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

изображений для стиля 1:

а) Когда CollapsingToolbarLayout Название расширяется Полностью:

Expanded Title

б) Когда CollapsingToolbarLayout Заголовок сокращается на прокрутить вверх:

Shrinking up

Ответ above

Метод упоминается уже Жоао Феррейра.

Вот как это выглядит с shadowRadius = 16: Обратите внимание на тень

enter image description here

PS пожалуйста, обновить или попросить больше, если какие-либо неясности :)

+1

Thanx man! Это помогло мне! –