with tutorial layout_scrollflags layout_collapsemode example coordinatorlayout coordinator collapsing appbarlayout android androiddesignsupport android-coordinatorlayout android-collapsingtoolbarlayout android-appbarlayout

android - tutorial - layout_collapsemode



Agregue comportamiento de vista de desplazamiento de la barra de aplicaciones a varias vistas en CoordinatorLayout (4)

Estoy buscando agregar soporte de desplazamiento a algo más que una sola vista infantil desplazable de CoordinatorLayout junto con AppBarLayout y CollapsingToolbarLayout . Al desplazarse por RecyclerView o AppBarLayout (código condensado a continuación), la barra de aplicaciones y su contenido se desplazan y colapsan con éxito. Sin embargo, al intentar iniciar un evento de desplazamiento en LinearLayout sobre RecyclerView , no ocurre nada porque LinearLayout no sabe desplazarse o colapsar la vista.

El objetivo es hacer que LinearLayout actúe como un encabezado LinearLayout para RecyclerView y pie de página para AppBarLayout y reciba el mismo comportamiento de desplazamiento que el RecyclerView , similar al juego aleatorio de Spotify / encabezado fuera de línea disponible . De hecho, sería genial si la appbar_scrolling_view_behavior pudiera aplicar a LinearLayout forma similar a la vista RecyclerView , pero imagino que el comportamiento se ignora en las vistas no desplazables. ¿Alguien sabe de una solución para esto que no requiere la implementación de la vista LinearLayout como una fila en el RecyclerView ?

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.AppBarLayout android:id="@+id/app_bar_layout" android:layout_width="match_parent" android:layout_height="@dimen/collapsible_app_bar_height" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/gradient_banner" app:contentScrim="@color/background_content_frame" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <ImageView android:id="@+id/image_header" android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/some_image" app:layout_collapseMode="parallax"/> <android.support.v7.widget.Toolbar android:id="@+id/collapsible_toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" app:layout_collapseMode="pin"/> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="@dimen/slide_handle_height" android:orientation="horizontal" android:background="@color/slide_handle" android:gravity="center_vertical"> <!-- three buttons --> </LinearLayout> <android.support.v7.widget.RecyclerView android:id="@+id/recycler_view" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginTop="@dimen/slide_handle_height" android:scrollbars="vertical" app:layout_behavior="@string/appbar_scrolling_view_behavior"/> </android.support.design.widget.CoordinatorLayout>


Después de algunas pruebas y errores, esta es la versión condensada del diseño que terminó funcionando para mí:

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/coordinator_layout" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.AppBarLayout android:id="@+id/app_bar_layout" android:layout_width="match_parent" android:layout_height="@dimen/collapsible_app_bar_height" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar_layout" android:layout_width="match_parent" android:layout_height="match_parent" app:contentScrim="@color/background_content_frame" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <ImageView android:id="@+id/image_header" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_gravity="center_horizontal" android:layout_marginBottom="@dimen/button_bar_height" android:scaleType="centerCrop" android:background="@android:color/transparent" android:src="@drawable/default_header" android:contentDescription="@string/description_content_image" app:layout_collapseMode="parallax"/> <ImageView android:id="@+id/image_header_gradient" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginBottom="@dimen/button_bar_height" android:src="@drawable/scrim_top_bottom_banner" app:layout_collapseMode="parallax" tools:ignore="ContentDescription"/> <android.support.v7.widget.Toolbar android:id="@+id/collapsible_toolbar" android:layout_width="match_parent" android:layout_height="104dp" android:minHeight="?attr/actionBarSize" android:gravity="top" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" app:contentInsetStart="0dp" app:titleMargins="0dp" app:layout_collapseMode="pin"/> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginStart="@dimen/landing_header_button_margin_horizontal" android:layout_marginEnd="@dimen/landing_header_button_margin_horizontal" android:layout_marginBottom="@dimen/button_bar_height" android:layout_gravity="bottom" android:gravity="center_vertical" app:layout_collapseMode="parallax"> <Button android:id="@+id/button_one" android:layout_alignParentStart="true" android:drawableStart="@drawable/selector_one" android:textColor="@color/alabaster_white" android:visibility="gone" style="@style/Button.TextCount"/> <Button android:id="@+id/button_two" android:layout_alignParentEnd="true" android:layout_gravity="end" android:drawableStart="@drawable/selector_two" android:textColor="@color/alabaster_white" android:visibility="gone" style="@style/Button.TextCount"/> </RelativeLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="@dimen/button_bar_height" android:layout_gravity="bottom" android:gravity="center_vertical" android:orientation="horizontal" android:background="@color/slide_handle"> <!-- three buttons --> </LinearLayout> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <android.support.v7.widget.RecyclerView android:id="@+id/recycler_view" android:layout_width="match_parent" android:layout_height="match_parent" android:scrollbars="vertical" app:layout_behavior="@string/appbar_scrolling_view_behavior"/>


El enfoque de Ryan es bueno, pero puede ser un poco complicado. Puede lograr el mismo efecto más fácilmente mediante el uso de los atributos de CoordinatorLayout para sus hijos. Utilizar

layout_anchor="@id/app_bar_layout"

y

layout_anchorGravity="bottom|right|end"

en una vista (que contiene sus botones) y colocarlo debajo de la Toolbar . También aumente la elevación en esta vista porque cuando se desplaza hacia abajo, la Toolbar se solapará con su vista.


Este es un encabezado fijo colocado en el medio entre la Toolbar y RecyclerView :

<Button android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_anchor="@+id/app_bar_layout" app:layout_anchorGravity="center|bottom" android:text="Shuffle Play"/>

Para evitar la superposición con la Toolbar , puede establecer diferentes alturas para AppBarLayout y CollapsingToolbarLayout :

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/main_content" 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="240dp" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" android:fitsSystemWindows="true"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar" android:layout_width="match_parent" android:layout_height="210dip" android:background="?attr/colorPrimary" app:layout_scrollFlags="scroll|exitUntilCollapsed" android:fitsSystemWindows="true" app:contentScrim="?attr/colorPrimary" app:expandedTitleMarginStart="48dp" app:expandedTitleMarginBottom="30dp" app:expandedTitleMarginEnd="64dp"> <ImageView android:id="@+id/backdrop" android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop" android:fitsSystemWindows="true" app:layout_collapseMode="parallax" /> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" app:layout_collapseMode="pin" /> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <android.support.v7.widget.RecyclerView android:id="@+id/recycler_view" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginTop="@dimen/slide_handle_height" android:scrollbars="vertical" app:layout_behavior="@string/appbar_scrolling_view_behavior"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_anchor="@id/appbar" app:layout_anchorGravity="center|bottom" android:text="Shuffle Play"/> </android.support.design.widget.CoordinatorLayout>

Demostración de video:

Además, puede establecer una altura en la Toolbar pero deberá crear un título personalizado con un comportamiento personalizado como este proyecto CoordinatorLayoutExample . Lo hice con un título personalizado sin comportamiento:

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/main_content" 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="240dp" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" android:fitsSystemWindows="true"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar" android:layout_width="match_parent" android:layout_height="match_parent" android:background="?attr/colorPrimary" app:layout_scrollFlags="scroll|exitUntilCollapsed" android:fitsSystemWindows="true" app:collapsedTitleTextAppearance="@style/TransparentText" app:expandedTitleTextAppearance="@style/TransparentText" app:contentScrim="?attr/colorPrimary"> <ImageView android:id="@+id/backdrop" android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop" android:fitsSystemWindows="true" app:layout_collapseMode="parallax" /> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_height="80dp" android:layout_width="match_parent" android:minHeight="?attr/actionBarSize" android:gravity="top" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" app:layout_collapseMode="pin" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Title" android:textSize="20sp" android:textColor="@android:color/white"/> </android.support.v7.widget.Toolbar> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <android.support.v7.widget.RecyclerView android:id="@+id/recycler_view" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginTop="@dimen/slide_handle_height" android:scrollbars="vertical" app:layout_behavior="@string/appbar_scrolling_view_behavior"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_anchor="@id/appbar" app:layout_anchorGravity="center|bottom" android:text="Shuffle Play"/> </android.support.design.widget.CoordinatorLayout>

Estilos:

<style name="TransparentText" parent="@android:style/TextAppearance"> <item name="android:textColor">#00000000</item> </style>

Demostración de video:


No necesita una solución o algo extraño. Este comportamiento es compatible con la biblioteca. Simplemente reemplace su LinearLayout por esto y LinearLayout debajo de RecyclerView :

<android.support.v4.widget.NestedScrollView android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:gravity="center"> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="15dp" android:text="Button text"/> </LinearLayout> </android.support.v4.widget.NestedScrollView>

También deberá colocar esto en su RecyclerView para mostrarlo detrás de LinearLayout:

android:paddingTop="30dp" android:clipToPadding="false"

Así es como sería:

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.AppBarLayout android:id="@+id/app_bar_layout" android:layout_width="match_parent" android:layout_height="@dimen/collapsible_app_bar_height" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/gradient_banner" app:contentScrim="@color/background_content_frame" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <ImageView android:id="@+id/image_header" android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/some_image" app:layout_collapseMode="parallax"/> <android.support.v7.widget.Toolbar android:id="@+id/collapsible_toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" app:layout_collapseMode="pin"/> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <android.support.v7.widget.RecyclerView android:id="@+id/recycler_view" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginTop="@dimen/slide_handle_height" android:scrollbars="vertical" app:layout_behavior="@string/appbar_scrolling_view_behavior" android:paddingTop="30dp" android:clipToPadding="false"/> <android.support.v4.widget.NestedScrollView android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:gravity="center"> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="15dp" android:text="Button text"/> </LinearLayout> </android.support.v4.widget.NestedScrollView> </android.support.design.widget.CoordinatorLayout>

Este no es un diseño agradable, pero es una solución. Puedes poner un Layout más bonito dentro de LinearLayout para que sea como Spotify.

Editar: video agregado