MotionLayout içeren bant

Carousel, kullanıcının hızlıca göz atabileceği öğelerin listesini gösteren özel bant görünümleri oluşturmak için kullanılan bir hareket yardımcı nesnedir. Bu tür görünümleri uygulamanın diğer yollarına kıyasla bu yardımcı, MotionLayout avantajlarından yararlanarak Carousel için hızlı bir şekilde karmaşık hareket ve boyut değişiklikleri oluşturmanıza olanak tanır.

Carousel widget'ı, başı ve sonu olan listelerin yanı sıra dairesel sarmalama listelerini destekler.

MotionLayout içeren Bant'ın işleyiş şekli

Ortadaki öğeyi büyüterek yatay bir Carousel görünümü oluşturmak istediğinizi varsayalım:

Bu temel düzen, Carousel öğeyi temsil eden birkaç görünüm içerir:

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

  • önceki
  • başlangıç
  • sonraki

Başlangıç durumu temel düzene karşılık geliyorsa önceki ve sonraki durumda Carousel öğeleri sırasıyla bir sola ve sağa kaydırılır.

Örneğin, Şekil 3'teki beş görünümü ele alın ve başlangıç durumunda B, C ve D görünümlerinin, A ve E görünümlerinin ise ekranın dışında olduğunu varsayalım. Önceki durumu, A, B, C ve D konumları B, C, D ve E konumlarında olacak şekilde ve görünümler soldan sağa doğru hareket edecek şekilde ayarlayın. Sonraki durumda, B, C, D ve E; A, B, C ve D olduğu yere ve görünümler de sağdan sola doğru hareket ettiğinde bunun tersinin gerçekleşmesi gerekir. Bu, şekil 4'te gösterilmiştir:

Görüntülemelerin tam olarak orijinal görüntülemelerin başladığı yerde sonlanması çok önemlidir. Carousel, gerçek görünümleri eski durumlarına geri taşıyarak ancak eşleşen yeni içerikle yeniden başlatarak sonsuz bir öğe koleksiyonu izlenimi yaratır. Aşağıdaki şemada bu mekanizma gösterilmektedir. "Öğe numarası" değerlerine dikkat edin):

Geçişler

Hareket sahnesi dosyanızda tanımlanan bu üç sınırlama grubu ile başlangıç ve sonraki durumları ile başlangıç ve önceki durumları arasında ileri ve geri şeklinde iki geçiş oluşturun. Aşağıdaki örnekte gösterildiği gibi, bir harekete yanıt olarak geçişleri tetiklemek için bir OnSwipe işleyici ekleyin:

    <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 animasyonunuzu uyguladığınız sırada referans verin.

Carousel yardımcısı için aşağıdaki özellikleri ayarlayın:

  • app:carousel_firstView: Carousel öğesinin ilk öğesini temsil eden görünüm (bu örnekte, C).
  • app:carousel_previousState: Önceki durumun ConstraintSet kimliği.
  • app:carousel_nextState: Sonraki durumun ConstraintSet kimliği.
  • app:carousel_backwardTransition: start ile önceki durumları arasına uygulanan Transition kimliğidir.
  • app:carousel_forwardTransition: start ve next durumları arasına uygulanan Transition kimliği.

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

    <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 bağdaştırıcısı ayarlayın:

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

Ek notlar

Carousel içindeki "seçili" mevcut öğeye bağlı olarak, Carousel başlangıç ve bitiş değerlerini doğru şekilde hesaba katmak için öncesinde veya sonrasında öğeleri temsil eden görünümlerin gizlenmesi gerekebilir. Carousel yardımcısı bunu otomatik olarak halleder. Varsayılan olarak, bu durumlarda bu görüntülemeler View.INVISIBLE olarak işaretlenir. Böylece genel düzen değişmez.

Carousel yardımcısının bu görünümleri View.GONE olarak işaretlediği alternatif bir mod mevcuttur. Bu modu aşağıdaki özelliği kullanarak ayarlayabilirsiniz:

app:carousel_emptyViewsBehavior="gone"

Örnekler

Bant yardımcısının kullanıldığı daha fazla örnek için GitHub'daki örnek projelere göz atın.