web-dev-qa-db-fra.com

CoordinateurLayout avec RecyclerView et Collapse

J'ai une mise en page comme celle-ci:

enter image description here

(Barre d'outils, vue en-tête, vue texte, RecyclerView)

J'ai besoin que l'en-tête soit réduit lorsque je fais défiler les articles de recyclerview. De sorte que la vue "Choisir l'élément" et la vue d'ensemble du recyclage soient laissées à l'écran.

J'ai vu des exemples lorsque la barre d'outils est réduite, mais j'ai besoin que la barre d'outils soit toujours présente.

Quels modèles/comportements dois-je utiliser pour obtenir ce travail?

androidandroid-layoutmaterial-designandroid-coordinatorlayoutandroiddesignsupport
28
Oleg

Vous pouvez y parvenir en ayant cette disposition:

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

Vous épinglez votre barre d'outils en ayant le app:layout_collapseMode="pin" ensemble de propriétés. Vous faites RecyclerView défiler correctement en définissant app:layout_behavior="@string/appbar_scrolling_view_behavior" Et c'est à peu près tout.

NB! La position de "Choisir l'élément" TextView dépend du comportement particulier que vous souhaitez obtenir:

  • vous pouvez l'inclure comme premier élément de votre RecyclerViewAdapter pour le faire défiler, une fois que l'utilisateur commence à faire défiler le RecyclerView;
  • vous pouvez l'ajouter dans AppBarLayout pour qu'il reste toujours au-dessus de RecyclerView, que vous le fassiez défiler ou non;

Vous pouvez en savoir plus ici Bibliothèque de support de conception Android et ici Bibliothèque de support de conception (III): disposition du coordinateur

J'espère que ça aide!

54
Konstantin Loginov

Le code ci-dessous fonctionne mais pas sans défilement comparer reqular recyclerview je pensais.

<?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>
0
influx