CoordinatorLayout mit RecyclerView und Collapsing-Header

Lesezeit: 4 Minuten

Olegs Benutzeravatar
Oleg

Ich habe ein Layout wie das folgende:

Geben Sie hier die Bildbeschreibung ein

(Symbolleiste, Kopfzeilenansicht, Textansicht, RecyclerAnsicht)

Ich möchte, dass die Kopfzeile reduziert wird, wenn ich durch die Elemente von recyclerview scrolle. Damit bleibt die Ansicht „Artikel auswählen“ und Recycleransicht auf dem Bildschirm.

Ich habe Beispiele gesehen, in denen die Symbolleiste reduziert wurde, aber ich muss die Symbolleiste immer vorhanden sein.

Welche Layouts/Verhalten sollte ich verwenden, um diese Arbeit zu erhalten?

Benutzeravatar von Konstantin Loginov
Konstantin Loginow

Sie können es erreichen, indem Sie dieses Layout haben:

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

Sie heften Ihre Symbolleiste an, indem Sie die haben app:layout_collapseMode="pin" Eigenschaftssatz. Du machst RecyclerView richtig scrollbar durch Einstellung app:layout_behavior="@string/appbar_scrolling_view_behavior" und das ist so ziemlich alles.

ACHTUNG! Position von “Artikel auswählen” TextView hängt von dem bestimmten Verhalten ab, das Sie erreichen möchten:

  • Sie können es als erstes Element Ihrer hinzufügen RecyclerView‘s Adapter um es wegzuscrollen, sobald der Benutzer beginnt, durch die zu scrollen RecyclerView;
  • Sie können es hinzufügen AppBarLayout So bleibt es immer oben auf dem RecyclerViewwann immer Sie es scrollen oder nicht;

Hier können Sie mehr lesen Android Design Support-Bibliothek und hier Design Support Library (III): Koordinator-Layout

Ich hoffe, es hilft!

  • Funktioniert es immer noch, wenn wir unten ein Scrollview oder NestedScrollView statt Recyclerview hinzufügen. Ich denke auch darüber nach, mehrere Recyclerviews in der Scrollview mit klebrigen Headern zu haben. Wird es funktionieren?

    – VeeyaaR

    15. Juli 2021 um 7:30 Uhr

  • Ich wünschte, ich hätte diese Lösung früh gefunden, sie funktioniert perfekt. Sie sparen immer noch meine Zeit. Vielen Dank 🙂

    – Rucha Bhatt Joshi

    27. Juli um 9:55 Uhr

Benutzeravatar von Mani
Mani

Der folgende Code funktioniert, aber kein reibungsloser Bildlauf im Vergleich zu reqular recyclerview, dachte ich.

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

1431920cookie-checkCoordinatorLayout mit RecyclerView und Collapsing-Header

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy