Fügen Sie mehreren Ansichten in CoordinatorLayout das Scrolling-Ansichtsverhalten der App-Leiste hinzu

Lesezeit: 14 Minuten

Benutzer-Avatar
Ryan

Ich möchte mehr als nur einer einzigen, scrollbaren, untergeordneten Ansicht von Scroll-Unterstützung hinzufügen CoordinatorLayout in Verbindung mit einem AppBarLayout und CollapsingToolbarLayout. Beim Scrollen der RecyclerView oder der AppBarLayout (komprimierter Code unten), die App-Leiste und ihr Inhalt scrollen erfolgreich und reduzieren sich. Wenn Sie jedoch versuchen, ein Scroll-Ereignis auf dem zu initiieren LinearLayout über RecyclerViewnichts passiert, weil die LinearLayout kann die Ansicht nicht scrollen oder komprimieren.

Das Ziel ist es, die LinearLayout fungieren als klebriger Header für die RecyclerView und Fußzeile zum AppBarLayout und erhalten das gleiche Scrollverhalten wie die RecyclerViewähnlich zu Spotifys Zufallswiedergabe/offline verfügbarer Header. Eigentlich wäre es toll, wenn die appbar_scrolling_view_behavior layout_behavior auf die angewendet werden könnte LinearLayout ähnlich wie die RecyclerView, aber ich stelle mir vor, dass das Verhalten bei nicht scrollbaren Ansichten ignoriert wird. Kennt jemand eine Problemumgehung dafür, die keine Implementierung der LinearLayout Ansicht als Zeile in der 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="https://stackoverflow.com/questions/32465548/@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>

  • Vielleicht ist es nicht möglich, weil Spotify die Design Support Library nicht verwendet, aber ich weiß es nicht

    – Mario Velasco

    9. September 2015 um 15:00 Uhr

  • @MarioVelasco Richtig, Spotify verwendet keine CollapsingToolbarLayout-Implementierung, aber ich habe darauf als Beispiel für das Verhalten verwiesen, das ich durch eine Art Problemumgehung erreichen möchte.

    – Ryan

    9. September 2015 um 15:29 Uhr

  • Gute Nachrichten! Ich habe eine echte Lösung für Sie. Dies löst, was Sie versucht haben, werfen Sie einen Blick darauf und markieren Sie es als gelöst, wenn es Ihnen gefällt.

    – Mario Velasco

    9. September 2015 um 15:37 Uhr

Benutzer-Avatar
Mario Velasco

Sie brauchen keine Problemumgehung oder etwas Seltsames. Dieses Verhalten wird von der Bibliothek unterstützt. Ersetzen Sie einfach Ihre LinearLayout durch diese und lege es unter die 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>

Sie müssen dies auch in Ihre einfügen RecyclerView um es hinter dem LinearLayout anzuzeigen:

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

So würde es aussehen:

<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="https://stackoverflow.com/questions/32465548/@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>

Das ist kein schönes Design, aber es ist eine Lösung. Sie können einen schöneren setzen Layout innerhalb der LinearLayout um es wie Spotify zu machen.

Bearbeiten: Videos hinzugefügt

Demo-Video Demovideo 2

  • Anscheinend sollte das funktionieren. Ich habe jedoch vor einiger Zeit (und gerade jetzt) ​​einen ähnlichen Ansatz versucht, und der NestedScrollView reagiert nicht auf scrollen – auch nicht mit dem appbar_scrolling_view_behavior layout_behavior. Ich glaube CoordinatorLayout sucht nur nach einer einzelnen Ansicht, der zugeordnet werden kann AppBarLayout über die appbar_scrolling_view_behavior Verhalten. Also sobald es auf der findet RecyclerView, die Suche ist vorbei. Ich spiele derzeit mit einer Möglichkeit, a hinzuzufügen TouchEvent zum LinearLayout und umleiten MotionEvent auslösen a RecyclerView+AppBarLayout scrollen. Bisher kein Glück.

    – Ryan

    9. September 2015 um 17:57 Uhr

  • Ich habe mit einem anderen getestet NestedScrollView statt deiner RecyclerView und es hat funktioniert, ich werde es nochmal mit a überprüfen RecyclerView und ich zeige dir ein Video. Versuchen Sie, die XML-Datei, die ich Ihnen gegeben habe, zu kopieren und einzufügen, und teilen Sie mir die Ergebnisse mit.

    – Mario Velasco

    9. September 2015 um 18:14 Uhr

  • Übrigens, hast du den anderen Ansatz gesehen, den ich dir geschrieben habe?

    – Mario Velasco

    9. September 2015 um 18:14 Uhr

  • Der Standardweg sollte sein, die Verankerungsunterstützung von CoordinatorLayout zu verwenden. Die Absicht des OP erscheint mir genau so, wie FAB mit dem CoordinatorLayout verankert ist.

    – Windreiter

    29. Januar 2016 um 11:50 Uhr

  • @m.vincent transparenter CollapsingToolbarLayout-Titel

    – Mario Velasco

    25. Februar 2019 um 12:11 Uhr

Benutzer-Avatar
Mario Velasco

Dies ist ein klebriger Header, der in der Mitte dazwischen platziert wird Toolbar und 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"/>

Um Überschneidungen mit dem zu vermeiden Toolbar Sie können verschiedene Höhen einstellen AppBarLayout und 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>

Video-Demo:

Demo-Video

Sie können auch eine Höhe für die festlegen ToolbarSie müssen jedoch einen benutzerdefinierten Titel mit einem benutzerdefinierten Verhalten wie diesem Projekt erstellen CoordinatorLayoutExample. Ich habe es mit einem benutzerdefinierten Titel ohne Verhalten gemacht:

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

Stile:

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

Video-Demo:

Geben Sie hier die Bildbeschreibung ein

  • @ryan Versuchen Sie dies, um Überschneidungen zu vermeiden

    – Mario Velasco

    10. September 2015 um 10:04 Uhr

  • Die Lösung ohne Überlappung ist großartig, wenn Sie das Bild in AppBarLayout verwenden

    – Alexander

    23. März 2016 um 21:50 Uhr

  • Ich habe Ihren XML-Layout-Code ausprobiert, aber in meinem Fall wird die Shuffle Play-Schaltfläche von der Symbolleiste überlappt. also was soll ich tun um das zu vermeiden?

    – Muhammad Maqsood

    21. September 2017 um 10:30 Uhr

  • @MuhammadMaqsood Wenn Sie den Code einfach kopieren und einfügen, sehen Sie so etwas wie die Demo. Vielleicht ändern Sie die Reihenfolge der Elemente oder fügen unten eine neue Symbolleiste hinzu.

    – Mario Velasco

    21. September 2017 um 12:37 Uhr

  • @Mario Velasco, ich kopiere nur genau Ihren Code, aber eine Sache, die ich nicht weiß, ist “@dimen/slide_handle_height”, dies könnte das Problem verursachen.

    – Muhammad Maqsoud

    21. September 2017 um 14:50 Uhr

Benutzer-Avatar
Ryan

Nach einigem Ausprobieren ist dies die komprimierte Version des Layouts, die am Ende für mich funktioniert hat:

<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="https://stackoverflow.com/questions/32465548/@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"/>

  • Hey @Ryan, kannst du einen Screenshot oder eine Videodemo deiner Lösung anhängen?

    – Carlosmaciel

    3. März 2016 um 14:40 Uhr

  • Dies sollte nicht die akzeptierte Antwort sein. Es gibt keinen Screenshot oder kein Video, das das Layout zeigt. Außerdem gibt es Stile und Abmessungen, auf die in der Antwort nicht verwiesen wird.

    – Georg Bikas

    21. Februar 2018 um 11:26 Uhr

  • @GeorgeBikas Da Ryan der Fragesteller ist, denke ich, dass es nur fair ist, ihm zu erlauben, festzustellen, dass seine eigene Antwort die richtige Antwort ist.

    – Michael Ohlson

    27. August 2018 um 13:32 Uhr

Benutzer-Avatar
Ogulcan Ucarsu

Sie können dies versuchen 

    <android.support.design.widget.CoordinatorLayout>
         <android.support.design.widget.AppBarLayout>
             <!-- another xml code -->
         </<android.support.design.widget.AppBarLayout>

         <android.support.v4.widget.NestedScrollView
              android:layout_width="match_parent"
              android:layout_height="match_parent"              
              app:layout_behavior="android.support.design.widget.AppBarLayout$ScrollingViewBehavior">

<!-- your recyler view or button or textview xml code -->        
   </android.support.v4.widget.NestedScrollView>

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

oder

Sie können diesen Code hineinschreiben strings.xml 

<string name="appbar_scrolling_view_behavior" translatable="false">android.support.design.widget.AppBarLayout$ScrollingViewBehavior</string>

und Sie können verwenden: 

app:layout_behavior="@strings/appbar_scrolling_view_behavior">

Benutzer-Avatar
Georg Kravas

Ryans Ansatz ist gut, könnte aber etwas kompliziert sein. Sie können den gleichen Effekt einfacher erzielen, indem Sie verwenden CoordinatorLayout‘s Attribute an seine Kinder. Verwenden 

layout_anchor="@id/app_bar_layout"

und 

layout_anchorGravity="bottom|right|end"

in einer Ansicht (die Ihre Schaltflächen enthält) und platzieren Sie sie unter der Toolbar. Erhöhen Sie auch die Höhe in dieser Ansicht, denn wenn Sie nach unten scrollen Toolbar wird Ihre Ansicht überlappen.

  • Diese ‘layout_anchor’-Antwort hat meinem Boot geholfen. 😀

    – Anfänger

    11. März 2018 um 20:24 Uhr

  • Diese ‘layout_anchor’-Antwort hat meinem Boot geholfen. 😀

    – Anfänger

    11. März 2018 um 20:24 Uhr

1135110cookie-checkFügen Sie mehreren Ansichten in CoordinatorLayout das Scrolling-Ansichtsverhalten der App-Leiste hinzu

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

Privacy policy

Contact - Terms and Conditions - Privacy Policy