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
