CoordinadorLayout con RecyclerView y encabezado colapsado

4 minutos de lectura

Avatar de usuario de Oleg
Oleg

Tengo un diseño como el siguiente:

ingrese la descripción de la imagen aquí

(Barra de herramientas, Vista de encabezado, Vista de texto, RecyclerView)

Necesito que el encabezado se contraiga cuando me desplazo por los elementos de recyclerview. Para que la vista “Elegir elemento” y la vista del reciclador queden en la pantalla.

Vi ejemplos cuando la barra de herramientas está colapsada, pero necesito que la barra de herramientas esté presente siempre.

¿Qué diseños/comportamiento debo usar para hacer este trabajo?

Avatar de usuario de Konstantin Loginov
Konstantin Loginov

Puedes lograrlo teniendo este diseño:

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <!-- HEADER -->
            <RelativeLayout
                ...
                app:layout_collapseMode="parallax">
                .....
            </RelativeLayout>

            <android.support.v7.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin" />

        </android.support.design.widget.CollapsingToolbarLayout>

       <!-- IF YOU WANT TO KEEP "Choose Item" always on top of the RecyclerView, put this TextView here
        <TextView
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:layout_gravity="bottom"
             android:text="choose item" />
       -->
    </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</android.support.design.widget.CoordinatorLayout>

Fijas tu barra de herramientas haciendo que el app:layout_collapseMode="pin" conjunto de propiedades Tú haces RecyclerView correctamente desplazable configurando app:layout_behavior="@string/appbar_scrolling_view_behavior" y eso es todo.

¡NÓTESE BIEN! Posición de “Elegir elemento” TextView depende del comportamiento particular que desee lograr:

  • puedes incluirlo como primer elemento de tu RecyclerView‘s Adapter para desplazarlo, una vez que el usuario comience a desplazarse por el RecyclerView;
  • puedes agregarlo a AppBarLayout para que siempre se pegue encima del RecyclerViewsiempre que lo desplaces o no;

Puede leer más aquí Biblioteca de soporte de diseño de Android y aquí Biblioteca de soporte de diseño (III): diseño del coordinador

¡Espero que ayude!

  • ¿Seguirá funcionando si agregamos una vista de desplazamiento o NestedScrollView en lugar de una vista de reciclaje en la parte inferior? También estoy pensando en tener varias vistas de recicladores dentro de la vista de desplazamiento con encabezados fijos. ¿Eso funcionará?

    – VeeyaaR

    15 de julio de 2021 a las 7:30

  • Ojalá hubiera encontrado esta solución pronto, está funcionando perfectamente. todavía ahorras mi tiempo. Gracias 🙂

    – Rucha Bhat Joshi

    27 de julio a las 9:55

Avatar de usuario de Mani
maní

El código a continuación funciona, pero no es fácil comparar el desplazamiento con la vista del reciclador regular, pensé.

<?xml version="1.0" encoding="utf-8"?>
<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/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <com.sliderbanner.views.BannerSlider
                android:id="@+id/banner_slider1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:animateIndicators="true"
                app:defaultIndicators="dash"
                app:interval="5000"
                app:loopSlides="true"

                />

            <android.support.v7.widget.Toolbar

                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?actionBarSize">

                <ImageView
                    android:id="@+id/image_github"
                    android:layout_width="36dp"
                    android:layout_height="36dp"
                    android:layout_gravity="right"
                    android:layout_marginRight="8dp" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:fontFamily="sans-serif-bold"
                    android:gravity="center_vertical|left"
                    android:text="Banner Slider"
                    android:textColor="@android:color/black"
                    android:textSize="18sp" />
            </android.support.v7.widget.Toolbar>
        </android.support.design.widget.CollapsingToolbarLayout>


    </android.support.design.widget.AppBarLayout>
    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
    </android.support.v7.widget.RecyclerView>


</android.support.design.widget.CoordinatorLayout>

¿Ha sido útil esta solución?