Vista de desplazamiento superpuesta con AppBarLayout
Quiero implementar el patrón de "espacio flexible con superposición de contenido" de las técnicas de desplazamiento de diseño de material , como en este vídeo :
Mi diseño XML ahora se ve así:
- Barra de herramientas de despliegue. Cómo adaptar el diseño personalizado en lugar del predeterminado ImageView
- Android CollapsingToolbarLayout colapse Listener
- Mostrar la vista cuando la barra de herramientas se derrumba
- Problema con CoordinatorLayout y ImageView que ajusta el ancho mientras se desplaza
- CollapsingToolbarDescargar y ocultar la barra de herramientas mientras se desplaza
<android.support.design.widget.CoordinatorLayout android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="192dp" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.design.widget.CollapsingToolbarLayout android:layout_width="match_parent" android:layout_height="match_parent" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <android.support.v7.widget.Toolbar android:layout_height="?attr/actionBarSize" android:layout_width="match_parent" app:layout_collapseMode="pin"/> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <android.support.v4.widget.NestedScrollView android:layout_width="match_parent" 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"> <....> </LinearLayout> </android.support.v4.widget.NestedScrollView> </android.support.design.widget.CoordinatorLayout>
¿Hay una manera fácil de lograr esto usando la Biblioteca de Diseño? ¿O tengo que construir un CoordinatorLayout.Behavior personalizado para hacer esto?
- Agregar FloatingActionButton en el diseño de barra de herramientas de contracción
- Problema de barra de estado de diseño de barra de herramientas de despliegue
- Detener CollapsingToolbar de colapso después de NestedScrollView se queda sin contenido para desplazarse
- Título en CollapsingToolbarLayout expandido no se muestra correctamente
- Colapsar el diseño de la barra de herramientas con el logotipo, el título, el subtítulo en la barra de herramientas
- ¿Qué es layout_collapseParallaxMultiplier utilizado en CollapsingToolbarLayout?
- CollapsingToolbarLayout no funciona correctamente
- CollapsingToolbarLayout ImageView no se puede desplazar
De hecho, la superposición de la vista de desplazamiento con AppBarLayout es una característica incluida de la Biblioteca de soporte de diseño de Android : puede utilizar el atributo app:behavior_overlapTop
en su NestedScrollView
(o cualquier vista que utiliza ScrollingViewBehavior ) para establecer la cantidad de superposición:
<android.support.v4.widget.NestedScrollView android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" app:behavior_overlapTop="64dp">
Tenga en cuenta que app:behavior_overlapTop
sólo funciona en las vistas que tienen la app:layout_behavior="@string/appbar_scrolling_view_behavior"
ya que es el Comportamiento que está utilizando el atributo (no View o Parent ViewGroup) behavior_
prefijo.
O programarlo mediante setOverlayTop () :
NestedScrollView scrollView = ... CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) scrollView.getLayoutParams(); AppBarLayout.ScrollingViewBehavior behavior = (AppBarLayout.ScrollingViewBehavior) params.getBehavior(); behavior.setOverlayTop(128); // Note: in pixels
Además de la respuesta aceptada , llame a setTitleEnabled (false) en su CollapsingToolbarLayout para que el título permanezca fijo en la parte superior como en el ejemplo.
Me gusta esto:
CollapsingToolbarLayout.setTitleEnabled(false);
O añadiéndolo en xml como este:
app:titleEnabled="false"
De lo contrario, el título podría desaparecer detrás del contenido superpuesto, a menos que, por supuesto, ese es el comportamiento que desea.