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>
Ruloyu ekleme
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 durumunConstraintSet
kimliği.app:carousel_nextState
: Sonraki durumunConstraintSet
kimliği.app:carousel_backwardTransition
: start ile önceki durumları arasına uygulananTransition
kimliğidir.app:carousel_forwardTransition
: start ve next durumları arasına uygulananTransition
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.