17

Я пытаюсь создать несколько комбинированных макетов с помощью CoordinatorLayout, а также CollapsingToolbarLayout.CollapsingToolbarLayout и скрыть панель инструментов при прокрутке

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

enter image description here

во втором состоянии, когда начинает прокручивать вниз, изображение и панель инструментов должна исчезнуть, как показано ниже (только вкладка будет отображаться):

enter image description here

и в последнем состоянии, когда я нахожусь в какой-то момент в список (но не верхний из списка) Я хочу начать прокрутку, как только я начну прокрутку, я хочу, чтобы панель инструментов (а не расходуемая с изображением) начиналась, как показано ниже (если она не попала в верхнюю часть списка, изображение не будет отображаться, только панели инструментов):

enter image description here

Я был в состоянии для того чтобы достигнуть в первое состояние, а другие-состояния являются проблематичными, когда панель инструментов осуществляются в CollapsingToolbarLayout, в flexability того, что я может сделать с ним за пределами CollapsingToolbarLayout компонент не ясен. Я не могу заставить панель скрыть, если я это сделаю, тогда она будет показана только после того, как я доберусь до вершины.

В любом случае, мой текущий XML (показано ниже) находится в состоянии, когда реализовано первое изображение, но как только я начну прокрутку вниз, панель инструментов останется наверху и не скроется. Примечание. Я должен сказать, что панель инструментов останется «pin», потому что, если я этого не сделал, информация на панели инструментов исчезнет, ​​и покажет только пустая панель инструментов (это для другого сообщения, но все же интересно узнать, почему это происходит?) ,

вот мой текущий XML:

<android.support.design.widget.CoordinatorLayout 
    android:id="@+id/benefit_coordinator_layout" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <android.support.design.widget.AppBarLayout 
     android:id="@+id/app_bar_material_layout" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content"> 

     <android.support.design.widget.CollapsingToolbarLayout 
      android:id="@+id/main.collapsing" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      app:contentScrim="?attr/colorPrimary" 
      app:layout_scrollFlags="scroll|exitUntilCollapsed" 
      > 

      <include 
       android:id="@+id/toolbar_search_container" 
       layout="@layout/search_box" 
       android:layout_height="192dp" 
       android:layout_width="match_parent" 
       app:layout_collapseMode="parallax" 

       /> 

      <include 
       android:id="@+id/toolbar_benefit" 
       layout="@layout/toolbar_main" 
       android:layout_width="match_parent" 
       android:layout_height="?attr/actionBarSize" 
       app:contentScrim="?attr/colorPrimary" 

       /> 

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

     <android.support.design.widget.TabLayout 
      android:id="@+id/benefit_tab_layout" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:background="@color/primaryColor" 
      app:tabIndicatorColor="@color/accentColor" 
      app:tabSelectedTextColor="@android:color/white" 
      app:tabTextColor="@android:color/black" 
      app:tabIndicatorHeight="4dp" /> 

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

    <android.support.v4.view.ViewPager 
     android:id="@+id/benefit_pager" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     app:layout_behavior="@string/appbar_scrolling_view_behavior" /> 
    <include 
     layout="@layout/floating_btn_benefits" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_gravity="bottom|right" 
     android:layout_margin="16dp" 
     /> 
</android.support.design.widget.CoordinatorLayou 

ответ

30

Я исправил проблему, просто clerify, я хотел, чтобы моя панель инструментов, чтобы иметь возможность расширить с paralex изображением, как только он достигает вершины, но я также хотел панель инструментов исчезает при прокрутке вниз и снова отображается (без изображения в паралексе), когда я прокручиваю вверх. эффект изображения паралекса должен отображаться только в том случае, если я достиг вершины.

Так в основном решение, изменить компонент CollapsingToolbarLayout со следующим атрибутом:

app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed" 

, а также изменить компонент на панели инструментов со следующим атрибутом

android:minHeight="?attr/actionBarSize" 

относительно моего paralex эффекта изображения (который является моим toolbar_search_container) Я не должен добавлять layout_scrollFlags.

Так почему это работает? Чтобы понять это, вы должны знать, что enterAlwaysCollapsed, enterAlwaysCollapsed эффекты представления, которые добавили атрибут MinHeight.это означает, что каждый ребенок из CollapsingToolbarLayout, которые имеют minHeight, будут выполняться с помощью этого атрибута. Итак, моя панель инструментов будет выполнена.

enterAlwaysCollapsed определения attrubute простых слова:

Предполагая, что enterAlways объявляется и вы указали MinHeight, вы можете также указать enterAlwaysCollapsed. Когда этот параметр используется, ваше представление будет отображаться только на этой минимальной высоте. Только при прокрутке достигает к вершине будет вид расширения на полную высоту ...»

Ну, разве это не то, что мы хотим? (Не ответить на этот вопрос retorical;))

один еще кое-что добавить, в paralexed компонент (toolbar_search_container), зависит от тулбара расширения, и потому, что панель будет расширяться только тогда, когда она достигает вершины, то все это просто работает отлично!

новый код :

<android.support.design.widget.CoordinatorLayout 
    android:id="@+id/benefit_coordinator_layout" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:fitsSystemWindows="true"> 

    <android.support.design.widget.AppBarLayout 
     android:id="@+id/app_bar_material_layout" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:fitsSystemWindows="true"> 

     <android.support.design.widget.CollapsingToolbarLayout 
      android:id="@+id/main.collapsing" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:fitsSystemWindows="true" 
      app:contentScrim="?attr/colorPrimary" 
      app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed" 
      > 

      <include 
       android:id="@+id/toolbar_search_container" 
       layout="@layout/search_box" 
       android:layout_height="192dp" 
       android:layout_width="match_parent" 
       app:layout_collapseMode="parallax" 
       /> 

      <include 
       android:id="@+id/toolbar_benefit" 
       layout="@layout/toolbar_main" 
       android:layout_width="match_parent" 
       android:layout_height="?attr/actionBarSize" 
       android:minHeight="?attr/actionBarSize" 
       app:contentScrim="?attr/colorPrimary" 
       app:layout_collapseMode="pin" 
       android:fitsSystemWindows="true" 
       /> 

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

     <android.support.design.widget.TabLayout 
      android:id="@+id/benefit_tab_layout" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:background="@color/primaryColor" 
      app:tabIndicatorColor="@color/accentColor" 
      app:tabSelectedTextColor="@android:color/white" 
      app:tabTextColor="@android:color/black" 
      app:tabIndicatorHeight="4dp" /> 

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

    <android.support.v4.view.ViewPager 
     android:id="@+id/benefit_pager" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     app:layout_behavior="@string/appbar_scrolling_view_behavior" /> 
    <include 
     layout="@layout/floating_btn_benefits" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_gravity="bottom|right" 
     android:layout_margin="16dp" 
     /> 
</android.support.design.widget.CoordinatorLayout> 
+1

Большое спасибо !!! Я нашел этот ответ так тяжело, потому что трудно объяснить проблему для google. Я пробовал практически все возможности, но пропустил использование всех 3 атрибутов. Должны позволить большему количеству людей знать ответ! –

+0

Я сделал, как вы сказали, но когда я прокручиваю вверх, мой CollapsingToolbarLayout не появится, пока я не прокручу вверх. Можете ли вы предложить что-нибудь? – Sermilion

+0

Эй, Зима! Не могли бы вы разместить свой полный xml здесь? Без - Тэги? Спасибо!!! – romaneso

Смежные вопросы