android - style - CollapsingToolbarLayout y hide toolbar mientras se desplaza

layout_collapsemode

Question

Estoy intentando crear un diseño combinado usando CoordinatorLayout y también CollapsingToolbarLayout.

En el primer estado, cuando estamos en la página principal, y aún no hemos desplazado, quiero que la barra de herramientas se gaste como se muestra a continuación (sí, lo hice):

En el segundo estado, cuando comience a desplazarse hacia abajo, la imagen y la barra de herramientas deberían desaparecer, como se muestra a continuación (solo se mostrará la pestaña):

Y en el último estado, una vez que esté en algún punto de la lista (pero no en la parte superior de la lista) quiero comenzar a desplazarme hacia arriba, una vez que comience a desplazarme hacia arriba, quiero que la barra de herramientas (y no la que está agotada con la imagen) comience a silbar, como se muestra a continuación (si no llega al principio de la lista, la imagen no se mostrará, solo la barra de herramientas):

Pude lograr el primer estado, pero los otros 2 son problemáticos, una vez que se implementa la barra de herramientas dentro de CollapsingToolbarLayout, la flexibilidad de lo que puedo hacer con él fuera del componente CollapsingToolbarLayout no está clara. No puedo hacer que la barra de herramientas se oculte, si lo hago, solo se mostrará una vez que llegue a la parte superior.

De todos modos, mi XML actual (que se muestra a continuación) está en el estado donde se implementa la primera imagen, pero una vez que empiezo a desplazarme hacia abajo, la barra de herramientas permanece en la parte superior y no se oculta. Nota: debo decirle a la barra de herramientas que permanezca "enganchada" porque si no lo hiciera, la información dentro de la barra de herramientas desaparecerá y solo se mostrará una barra de herramientas vacía (eso es para otra publicación, pero ¿es interesante saber por qué sucedió esto?) .

Aquí está mi xml actual:

 <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

Answer 1

He solucionado el problema, solo para mi clerificación. Quería que mi barra de herramientas pudiera expandirse con una imagen paralex una vez que llegara a la parte superior, pero también quería que la barra de herramientas desapareciera si se desplazaba hacia abajo y se mostraba nuevamente (sin la imagen paralex ) una vez que me desplazo hacia arriba. El efecto de imagen paralex solo debería mostrarse si llego a la parte superior.

Básicamente, la solución es cambiar el componente CollapsingToolbarLayout con el siguiente atributo:

app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"

y también cambiar el componente de la barra de herramientas con el siguiente atributo

android:minHeight="?attr/actionBarSize"

con respecto a mi imagen de efecto paralex (que es mi toolbar_search_container ) no debería agregar ningún layout_scrollFlags a ella.

Entonces, ¿por qué está funcionando? Para entenderlo, necesita saber qué es enterAlwaysCollapsed , las vistas de efectos enterAlwaysCollapsed que agregaron el atributo minHeight . esto significa que todos los hijos de CollapsingToolbarLayout que tienen minHeight se verán afectados por este atributo. Así se efectuará mi barra de herramientas.

enterAlwaysCollapsed atributo enterAlwaysCollapsed en palabras simples:

Suponiendo que se declara enterAlways y que ha especificado un minHeight, también puede especificar enterAlwaysCollapsed . Cuando se utiliza esta configuración, su vista solo aparecerá en esta altura mínima. Solo cuando el desplazamiento llegue a la parte superior, la vista se expandirá a su altura máxima ... "

Bueno, ¿no es esto exactamente lo que queremos? (No respondas a esta pregunta retorica;))

Una cosa más para agregar, el componente de paralaje ( toolbar_search_container ) depende de la barra de herramientas que se va a expandir, y como la barra de herramientas solo se expandirá cuando llegue a la parte superior, ¡entonces todo esto está funcionando perfectamente!

El nuevo código es:

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