17

Próbuję utworzyć połączony układ przy użyciu polecenia CoordinatorLayout i CollapsingToolbarLayout.Zwijanie paska narzędzi Wyłączanie i ukrywanie paska narzędzi podczas przewijania

w pierwszym państwie, kiedy na najbardziej górnej stronie, a nie jeszcze nie przewijane, chcę pasku narzędzi, aby zużywać jak pokazano poniżej (tak, zrobiłem to):

enter image description here

w drugim stanie, gdy zaczynają przewijać obraz i pasek narzędzi powinny zniknąć, jak pokazano poniżej (tylko zakładka pokaże):

enter image description here

a w ostatnim stanie raz jestem w pewnym momencie w lista (ale nie na górze z listy) Chcę zacząć przewijanie w górę, gdy zacznę przewijać w górę Chcę, aby pasek narzędzi (a nie ten z obrazem) zaczął się od nowa, jak pokazano poniżej (jeśli nie osiągnął początku listy, obraz nie pokaże, tylko pasek):

enter image description here

mogłem achive ten pierwszy stan, ale pozostałe 2 stan są problematyczne, raz pasku jest realizowany wewnątrz CollapsingToolbarLayout, z flexability co ja może zrobić to poza składnikiem CollapsingToolbarLayout nie jest jasne. Nie mogę ukryć paska narzędzi, jeśli to zrobię, będzie on wyświetlany tylko po dotarciu do góry.

W każdym razie mój obecny kod XML (pokazany poniżej) znajduje się w stanie, w którym pierwsze zdjęcie zostało zaimplementowane, ale kiedy zaczynam przewijanie w dół, pasek narzędzi pozostaje u góry i nie ukrywa się. Uwaga: muszę powiedzieć, aby pasek narzędzi pozostawał "przypięty", ponieważ gdybym tego nie zrobił, informacja na pasku narzędzi zniknąłaby i pojawi się tylko pusty pasek narzędzi (to jest dla innego posta, ale nadal ciekawe jest, dlaczego tak się stało?) .

tutaj jest mój obecny 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 

Odpowiedz

30

mam stałe problemu, po prostu clerify, chciałem mój pasek narzędzi, aby móc poszerzyć o paralex obrazu po osiągnięciu szczytu, ale również chciał pasek narzędzi zniknie, jeśli przewiniesz w dół, i ponownie się wyświetli (bez obrazu paralaksa), gdy przewińę w górę. efekt paralaksu powinien być wyświetlany tylko wtedy, gdy osiągnę szczyt.

Więc w zasadzie rozwiązaniem jest zmienić komponent CollapsingToolbarLayout z następującym atrybut:

app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed" 

a także zmienić komponent paska narzędzi z następującym atrybutem

android:minHeight="?attr/actionBarSize" 

dotyczące mojego efekt paralex obrazu (który jest moim toolbar_search_container) Nie powinienem dodawać żadnego layout_scrollFlags do tego.

Dlaczego to działa? Aby to zrozumieć, trzeba wiedzieć, co jest enterAlwaysCollapsed, enterAlwaysCollapsed efektów widoki, które dodano atrybut minHeight.Oznacza to, że każde dziecko o wartości CollapsingToolbarLayout, które ma wartość minHeight, będzie miało ten atrybut. Tak więc mój pasek narzędzi zostanie zrealizowany.

enterAlwaysCollapsed definicję attrubute w prostych słowach:

Zakładając enterAlways jest zadeklarowana i podałeś minHeight, można również określić enterAlwaysCollapsed. Gdy to ustawienie jest używane, widok będzie wyświetlany tylko na tej minimalnej wysokości. Tylko podczas przewijania sięga szczytu będzie widok rozszerzyć do pełnej wysokości ...”

Cóż, nie jest to dokładnie to, co chcemy? (Nie odpowie na to pytanie retorical;))

jeden jeszcze jedno do dodania, na paralexed komponent (toolbar_search_container) jest uzależniona od tollbar się rozwijać, a ponieważ pasek narzędzi będzie rozwijać tylko wtedy, gdy osiągnie szczyt, to jest wszystko po prostu działa świetnie!

nowy kod jest :

<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

Wielkie dzięki !!! Taką odpowiedź znalazłem bardzo ciężko, ponieważ trudno jest wyjaśnić problem Google. Wypróbowałem prawie wszystkie możliwości, ale nie wykorzystałem wszystkich 3 atrybutów. Powinien pozwolić, aby więcej ludzi znało odpowiedź !! –

+0

Zrobiłem tak, jak powiedziałeś, ale kiedy przewijam w górę, mój CollapsingToolbarLayout nie pojawi się, dopóki nie przewinie do góry. Czy możesz coś zasugerować? – Sermilion

+0

Hej Zima! Czy mógłbyś tutaj umieścić swój pełny xml? Bez - Tagi? Dziękuję Ci!!! – romaneso