MotionLayout içeren bant

Carousel bir öğelerin listesini gösteren özel bant görünümleri oluşturmak için hareket yardımcı nesnesi göz atabileceği bir yer. Bu tür uygulamaları içeren diğer yollarla karşılaştırıldığında bu yardımcı, karmaşık hareket ve boyut değişiklikleri oluşturmanızı sağlar. Carousel için MotionLayout

Carousel widget'ı, başında ve sonunda bulunan listelerin yanı sıra dairesel biçimde de listeleri destekler. bir liste hazırlayabilirsiniz.

MotionLayout ile Carousel işleyiş şekli

Orta öğenin bulunduğu yatay bir Carousel görünümü oluşturmak istediğinizi varsayalım büyütülmüş:

Bu temel düzen, Carousel öğeyi temsil eden çeşitli görünümler içerir:

Aşağıdaki üç durumla bir MotionLayout oluşturun ve bunlara kimlik verin:

  • önceki
  • başlangıç
  • sonraki

start durumu temel düzene karşılık geliyorsa previous durumunda sonraki durumu ise Carousel öğe bir sola kaydırılır ve sağa dokunun.

Örneğin, Şekil 3'teki beş görünümü alın ve başlangıçta B, C ve D görünümleri görünürken A ve E ekranın dışındadır. Ayarla yukarı önceki duruma getirin. Böylece A, B, C ve D konumları B, C, D ve E, görüşler soldan sağa doğru değişti. Sonraki durum tam tersi olmalıdır. B, C, D ve E, A, B konumuna taşınır ve C, D ve görüşler sağdan sola doğruydu. Bu değer şekilde gösterilmektedir 4:

Görüntülemelerin, tam olarak orijinal görüntülemelerin başladığı yerde bitmesi çok önemlidir. Carousel, sonsuz öğe koleksiyonu illüzyonunu verir gerçek görünümleri eski konumlarına geri getirme ancak bunları yeniden başlatma eşleştirmenizi sağlar. Aşağıdaki şemada bu mekanizma gösterilmektedir. Öde dikkat edin: değerler):

Geçişler

Hareket sahnesi dosyanızda tanımlanan bu üç kısıtlama kümesiyle, start ile next arasındaki ileri ve geri geçişler başlangıç ve önceki durumlarını dahil edin. Bir OnSwipe işleyicisini aşağıda gösterildiği gibi bir harekete yanıt olarak geçişleri tetikler örnek:

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

Bu temel hareket sahnesi oluşturulduktan sonra düzene bir Carousel yardımcısı ekleyin. ve görünümlere, önceki ve sonraki uygulamanızı uyguladığınız sırayı animasyon ekler.

Carousel yardımcısı için şu özellikleri ayarlayın:

  • app:carousel_firstView: İlk öğeyi temsil eden görünüm Carousel—bu örnekte, C.
  • app:carousel_previousState: önceki öğenin ConstraintSet kimliği durumu.
  • app:carousel_nextState: Sonraki durumun ConstraintSet kimliği.
  • app:carousel_backwardTransition: Transition Başlangıç ile önceki durumlar arasında uygulanan kimlik.
  • app:carousel_forwardTransition: Transition start ve next durumları için kullanılır.

Örneğin, düzen XML dosyanızda şöyle bir şey olsun:

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

Kodda bir Carousel adaptörü kurun:

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

Ek notlar

"Seçili" olan geçerli öğeye bağlı olarak Carousel ayında, manzaranın önce veya sonrasındaki öğeleri temsil eden verilerin doğru şekilde gizlenmesi gerekebilir. Carousel start ve end'ini hesaba katın. Carousel yardımcısının işleyicileri otomatik olarak eklenir. Bu görüntülemeler varsayılan olarak şurada View.INVISIBLE olarak işaretlenir: Dolayısıyla genel düzen de değişmez.

Bunun yerine Carousel yardımcısının işaretlediği alternatif bir mod mevcut. bu görüntülemeleri View.GONE olarak belirlediniz. Bu modu, aşağıdaki özelliği kullanarak ayarlayabilirsiniz:

app:carousel_emptyViewsBehavior="gone"

Örnekler

Bant yardımcısının kullanımıyla ilgili daha fazla örnek için örnek projeler bulabilirsiniz.