Karussell mit MotionLayout

Carousel ist ein Motion-Hilfsobjekt zum Erstellen benutzerdefinierter Karussell-Ansichten, die eine Liste von Elementen anzeigen die die Nutzenden überfliegen können. Im Vergleich zu anderen Implementierungsmöglichkeiten können Sie mit diesem Hilfsprogramm schnell komplexe Bewegungs- und Dimensionsänderungen vornehmen für Carousel, indem du die Vorteile von MotionLayout

<ph type="x-smartling-placeholder">

Das Carousel-Widget unterstützt Listen mit einem Anfang und Ende sowie kreisförmige Listen. von Wrap-around-Listen.

Funktionsweise von Carousel mit MotionLayout

Angenommen, Sie möchten eine horizontale Carousel-Ansicht erstellen, bei der das Element in der Mitte vergrößert:

<ph type="x-smartling-placeholder">

Dieses grundlegende Layout enthält mehrere Ansichten, die die Carousel-Elemente darstellen:

<ph type="x-smartling-placeholder">

Erstellen Sie eine MotionLayout mit den folgenden drei Status und weisen Sie ihnen IDs zu:

  • Zurück
  • starten
  • Weiter

Wenn der Zustand start dem Basislayout entspricht (im Status previous) Beim nächsten Zustand werden die Carousel-Elemente um eins nach links verschoben und nach rechts.

Nehmen wir zum Beispiel die fünf Ansichten in Abbildung 3 und gehen davon aus, dass in start sind die Ansichten B, C und D sichtbar und A und E befinden sich außerhalb des Bildschirms. Festlegen vorherigen Zustand hoch, sodass die Positionen von A, B, C und D an den Stellen B, C, D und E, wobei sich die Ansichten von links nach rechts bewegten. In der nächsten muss das Gegenteil geschehen, wobei B, C, D und E dorthin verschoben werden, wo A, B, C und D waren und die Ansichten verliefen von rechts nach links. Dies wird in der Abbildung dargestellt. 4:

<ph type="x-smartling-placeholder">

Es ist wichtig, dass die Aufrufe genau dort enden, wo die ursprünglichen Aufrufe beginnen. Carousel vermittelt den Eindruck einer unendlichen Sammlung von Elementen, Die tatsächlichen Datenansichten werden zurück an die ursprüngliche Position verschoben, aber neu initialisiert. mit den neuen übereinstimmenden Inhalten. Das folgende Diagramm zeigt diesen Mechanismus. Bezahlen auf „item #“ achten Werte):

<ph type="x-smartling-placeholder">

Übergänge

Nachdem Sie diese drei Einschränkungssätze in Ihrer Bewegungsszenendatei definiert haben, Vorwärts- und Rückwärtsübergänge zwischen Start und Weiter. start und previous. Hinzufügen eines OnSwipe-Handler für lösen die Übergänge als Reaktion auf eine Geste aus, wie im Folgenden gezeigt: Beispiel:

    <Transition
        motion:constraintSetStart="@id/start"
        motion:constraintSetEnd="@+id/next"
        motion:duration="1000"
        android:id="@+id/forward">
        <OnSwipe
            motion:dragDirection="dragLeft"
            motion:touchAnchorSide="left" />
    </Transition>

    <Transition
        motion:constraintSetStart="@+id/start"
        motion:constraintSetEnd="@+id/previous"
        android:id="@+id/backward">
        <OnSwipe
            motion:dragDirection="dragRight"
            motion:touchAnchorSide="right" />
    </Transition>

Nachdem diese grundlegende Bewegungsszene erstellt wurde, fügen Sie dem Layout einen Carousel-Assistenten hinzu und verweisen Sie in der gleichen Reihenfolge auf die Ansichten, in der Sie die vorherigen und nächsten Animation.

Legen Sie die folgenden Attribute für den Carousel-Hilfsprogramm fest:

  • app:carousel_firstView: die Ansicht, die das erste Element des Objekts repräsentiert Carousel – in diesem Beispiel C.
  • app:carousel_previousState: die ConstraintSet-ID des vorherigen Bundesstaat.
  • app:carousel_nextState: die ConstraintSet-ID des nächsten Status.
  • app:carousel_backwardTransition: die Transition ID, die zwischen dem Status start und previous angewendet wird.
  • app:carousel_forwardTransition: die Transition-ID, die zwischen den start und next.

Ihre Layout-XML-Datei enthält beispielsweise Folgendes:

    <androidx.constraintlayout.motion.widget.MotionLayout ... >

        <ImageView  android:id="@+id/imageView0" .. />
        <ImageView  android:id="@+id/imageView1" .. />
        <ImageView  android:id="@+id/imageView2" .. />
        <ImageView  android:id="@+id/imageView3" .. />
        <ImageView  android:id="@+id/imageView4" .. />

        <androidx.constraintlayout.helper.widget.Carousel
            android:id="@+id/carousel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:carousel_forwardTransition="@+id/forward"
            app:carousel_backwardTransition="@+id/backward"
            app:carousel_previousState="@+id/previous"
            app:carousel_nextState="@+id/next"
            app:carousel_infinite="true"
            app:carousel_firstView="@+id/imageView2"
            app:constraint_referenced_ids="imageView0,imageView1,imageView2,imageView3,imageView4" />

    </androidx.constraintlayout.motion.widget.MotionLayout>

Richten Sie im Code einen Carousel-Adapter ein:

Kotlin

carousel.setAdapter(object : Carousel.Adapter {
            override fun count(): Int {
              // Return the number of items in the Carousel.
            }

            override fun populate(view: View, index: Int) {
                // Implement this to populate the view at the given index.
            }

            override fun onNewItem(index: Int) {
                // Called when an item is set.
            }
        })

Java

carousel.setAdapter(new Carousel.Adapter() {
            @Override
            public int count() {
                // Return the number of items in the Carousel.
            }

            @Override
            public void populate(View view, int index) {
                // Populate the view at the given index.
            }

            @Override
            public void onNewItem(int index) {
                 // Called when an item is set.
            }
        });

Zusätzliche Anmerkungen

Abhängig vom aktuell „ausgewählten“ Element in Carousel, die Aufrufe müssen möglicherweise ausgeblendet werden, damit Carousel start und end berücksichtigt. Die Hilfs-Handles von Carousel automatisch anpassen. Standardmäßig werden diese Ansichten als View.INVISIBLE in damit sich das Gesamtlayout nicht ändert.

Es ist ein alternativer Modus verfügbar, in dem der Helper Carousel stattdessen diese Aufrufe als View.GONE. Sie können diesen Modus mithilfe der folgenden Eigenschaft festlegen:

app:carousel_emptyViewsBehavior="gone"

Beispiele

Weitere Beispiele zur Verwendung der Karussell-Hilfe finden Sie in der Beispielprojekte auf GitHub.