Karuzela z ruchem

Carousel to obiektu pomocniczego do tworzenia niestandardowych widoków karuzeli, które pokazują listę elementów. który użytkownik może przejrzeć. W porównaniu z innymi sposobami widoków, pozwala szybko tworzyć złożone zmiany ruchu i wymiarów na koncie Carousel dzięki MotionLayout

Widżet Carousel obsługuje listy z początkiem i końcem oraz okrągłe na listach zbiorczych.

Jak działa karuzela z funkcją MotionLayout

Załóżmy, że chcesz utworzyć widok poziomy Carousel, w którym będzie znajdował się środkowy element powiększony:

Ten podstawowy układ zawiera kilka widoków przedstawiających elementy Carousel:

Utwórz element MotionLayout o 3 poniższych stanach i nadaj mu identyfikatory:

• Wstecz
• start
• dalej

Jeśli stan start odpowiada układowi podstawowemu, w stanie poprzednim a następny stan, elementy Carousel są przesuwane o 1 w lewo, po prawej stronie.

Na przykład dla 5 wyświetleń na rys. 3 załóżmy, że na początku i widoki B, C i D są widoczne, a A i E są poza ekranem. Ustaw w górę poprzedni stan, tak aby pozycje A, B, C i D znalazły się tam, gdzie B, C, D i E były przesunięte od lewej do prawej. W sekcji Nast. musi wystąpić sytuacja odwrotna – miejsca B, C, D i E przenoszą się tam, gdzie A, B, C i D, a widoki przechodziły od prawej do lewej. Widać to na ilustracji 4.

Ważne jest, aby wyświetlenia kończyły się dokładnie w miejscach, w których zaczynały się pierwotne wyświetlenia. Carousel tworzy iluzję nieskończonego zbioru elementów przez przeniesienie rzeczywistych widoków z powrotem do miejsc, w których były, a także ponowne ich zainicjowanie. z nowymi, dopasowanymi treściami. Ten mechanizm przedstawia ten mechanizm. Zapłać zwróć uwagę na „nr produktu”, wartości):

Przejścia

Po zdefiniowaniu tych 3 zestawów ograniczeń w pliku sceny animacji utwórz przejścia – do przodu i do tyłu – między miejscem start a next; stany rozpoczęcia i poprzednie. Dodaj Moduł obsługi OnSwipe do powoduje przejście w odpowiedzi na gest, jak pokazano na tym przykładzie: przykład:

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

Dodaj karuzelę

Po utworzeniu tej podstawowej sceny ruchu dodaj do układu obiekt pomocniczy Carousel i odwoływać się do widoków w tej samej kolejności, w jakiej implementujesz poprzedni i następny animację.

Ustaw te atrybuty dla asystenta Carousel:

• app:carousel_firstView: widok, który reprezentuje pierwszy element elementu Carousel – w tym przykładzie jest to C.
• app:carousel_previousState: identyfikator typu ConstraintSet poprzedniej stanu.
• app:carousel_nextState: identyfikator ConstraintSet stanu next.
• app:carousel_backwardTransition: Transition. Identyfikator zastosowany między stanem start a poprzednim.
• app:carousel_forwardTransition: identyfikator Transition stosowany między tagami stany start i next.

Na przykład w pliku XML układu masz coś takiego:

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

Skonfiguruj adapter Carousel w kodzie:

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.
            }
        })

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.
            }
        });

Uwagi dodatkowe

W zależności od „wybranego” bieżącego elementu Carousel, liczba wyświetleń oznaczanie elementów przed i po może być ukryte, dla Carousel start i end. Uchwyt pomocniczy Carousel to automatycznie. Domyślnie widok ten jest oznaczany jako View.INVISIBLE w w takich sytuacjach, więc ogólny układ się nie zmienia.

Dostępny jest tryb alternatywny, w którym obiekt pomocniczy Carousel oznacza te wyświetlenia jako View.GONE. Ten tryb możesz ustawić za pomocą tej właściwości:

app:carousel_emptyViewsBehavior="gone"

Przykłady

Więcej przykładów użycia pomocnika karuzeli znajdziesz tutaj przykładowe projekty w GitHubie.