Time to sync up! Tune in for Google I/O on May 14, 2024. Register now.

Bu sayfa, Cloud Translation API ile çevrilmiştir.

Android Kotlin Fundamentals 07.3: RecyclerView ile GRLayout

Bu codelab, Android Kotlin Temelleri kursuna dahildir. Codelab'ler üzerinden sırayla çalışıyorsanız bu kurstan en iyi şekilde yararlanabilirsiniz. Tüm kurs codelab'leri Android Kotlin Fundamentals codelabs açılış sayfasında listelenmektedir.

Giriş

RecyclerView ürününün temel güçlü taraflarından biri, düzen stratejinizi kontrol etmek ve değiştirmek için düzen yöneticilerini kullanabilmenizi sağlamaktır. LayoutManager, RecyclerView içindeki öğelerin nasıl düzenleneceğini yönetir.

RecyclerView, yaygın kullanım alanları için kullanıma hazır düzen yöneticileri içerir. Örneğin, yatay ve dikey listeler için LinearLayout, ızgaralar için GridLayout kullanabilirsiniz. Daha karmaşık kullanım alanları için özel bir LayoutManager uygulamanız gerekir.

Bu codelab'de, önceki codelab'den uyku izleyici uygulamasına sadece liste yerine ızgara düzeni kullanarak veri görüntülemeyi öğreneceksiniz. (Uygulamanız önceki codelab'de yoksa, bu codelab için başlangıç kodunu indirebilirsiniz.)

Bilmeniz gerekenler

Aşağıdaki konular hakkında bilgi sahibi olmalısınız:

Activity, Fragments ve Views kullanarak temel kullanıcı arayüzü oluşturma
Parçalar arasında gezinme ve parçaları parçalar arasında aktarmak için safeArgs kullanma
Modelleri görüntüleme, model fabrikalarını ve dönüşümleri görüntüleme
LiveData ve gözlemcileri
Room veritabanı oluşturma, DAO oluşturma ve varlıkları tanımlama
Veritabanı görevleri ve uzun süreli diğer görevler için eş yordam kullanma
Adapter, ViewHolder ve öğe düzeniyle temel bir RecyclerView uygulama
RecyclerView için veri bağlama nasıl uygulanır?
Verileri dönüştürmek için bağlama adaptörleri oluşturma ve kullanma

Neler öğreneceksiniz?

Verilerinizin RecyclerView içinde görüntülenme şeklini değiştirmek için farklı bir LayoutManager kullanma
Uyku verileriniz için tablo düzeni oluşturma

Yapacaklarınız

Bu serideki önceki codelab'den uyku izleyici uygulamasına odaklanın.
Uygulamada RecyclerView tarafından görüntülenen uyku verileri listesini bir uyku verileri ızgarasıyla değiştirin.

Uyku izleyici uygulamasında, aşağıdaki resimde gösterildiği gibi parçalarla temsil edilen iki ekran vardır.

Solda gösterilen ilk ekranda izlemeyi başlatmak ve durdurmak için düğmeler bulunur. Ekranda kullanıcının uyku verilerinden bazıları gösterilir. Temizle düğmesi, uygulamanın kullanıcı için topladığı tüm verileri kalıcı olarak siler. Sağ tarafta gösterilen ikinci ekran uyku kalitesi puanı seçmek içindir.

Bu uygulama; uyku verileri sağlamak için kullanıcı arayüzü denetleyicisi, görünüm modeli, LiveData ve Room veritabanıyla basitleştirilmiş bir mimari kullanır.

Uyku verileri RecyclerView olarak gösterilir. Bu codelab'de, uygulamayı GridLayout kullanacak şekilde değiştiriyorsunuz. Son ekran görüntüsü aşağıdaki ekran görüntüsünde olacaktır.

Önceki bir codelab'de, RecyclerView öğesini fragment_sleep_tracker.xml ürününe eklediğinizde, özelleştirme olmadan bir LinearLayoutManager ekliyordunuz. Bu kod, verileri dikey liste olarak gösterir.

app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"

LinearLayoutManager, RecyclerView için en yaygın ve basit düzen yöneticisidir ve alt görünümlerin hem yatay hem de dikey yerleşimini destekler. Örneğin, kullanıcının yatay olarak kaydırdığı bir resim bandı oluşturmak için LinearLayoutManager kullanabilirsiniz.

IzgaraDüzeni

Yaygın bir başka kullanım alanı da kullanıcıya çok fazla veri göstermektir. Bunu GridLayout kullanarak yapabilirsiniz. RecyclerView için GridLayoutManager, verileri aşağıda gösterildiği gibi kaydırılabilir bir ızgara olarak düzenler.

Tasarım açısından GridLayout, fotoğraf göz atma uygulamasındaki listeler gibi simgeler veya resimler olarak temsil edilebilecek listeler için idealdir. Uyku izleyici uygulamasında her gece uykusunu büyük simgelerden oluşan bir tablo olarak gösterebilirsiniz. Bu tasarım, uyku kalitesine genel bir bakış sağlar.

GRLayout'un öğeleri düzeni

GridLayout, öğeleri satır ve sütun ızgarasında düzenler. Dikey kaydırmayla, varsayılan olarak satırdaki her öğenin kapladığı alan (Bu durumda, bir aralık bir sütunun genişliğine eş değerdir.)

Aşağıda gösterilen ilk iki örnekte her satır üç aralıktan oluşur. Varsayılan olarak GridLayoutManager, belirttiğiniz aralık aralığına kadar bir aralıktaki her öğeyi düzenler. Aralık aralığına ulaştığında, bir sonraki satıra geçer.

Varsayılan olarak her öğe bir aralık kaplar, ancak kaç aralığın kaplayacağını belirterek bir öğeyi daha geniş hale getirebilirsiniz. Örneğin, en sağdaki ekranın en üstündeki öğe (aşağıda gösterilmiştir) üç aralığı kaplar.

Bu görevde son alıştırmada tamamladığınız RecyclerView ifadesini alır ve GridLayoutManager kullanarak veri gösterecek şekilde güncellersiniz. Önceki codelab'den uyku izleyici uygulamasını kullanmaya devam edebilir veya GitHub'daki RecyclerViewEnlemLayout-Starter uygulamasını indirebilirsiniz.

1. Adım: LayoutManager'ı değiştirin

Gerekirse bu kod laboratuvarı için RecyclerViewEnlemLayout-Starter uygulamasını GitHub'dan indirip projeyi Android Studio'da açın.
fragment_sleep_tracker.xml düzen dosyasını açın.
Düzen yöneticisini sleep_list RecyclerView tanımından kaldırın.

Silinecek kod:

app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager

SleepTrackerFragment.kt'yi açın.
OnCreateView() içinde, return ifadesinden hemen önce 3 aralıkla yeni bir dikey, yukarıdan aşağıya GridLayoutManager oluşturun.

GridLayoutManager oluşturucusu en fazla dört bağımsız değişken alır: activity olan bağlam, varsayılan dikey düzendeki sütunlar, yön (varsayılan olarak dikey) ve ters düzen (varsayılan olarak false) şeklindedir.

val manager = GridLayoutManager(activity, 3)

Bu satırın altında, RecyclerView adlı kullanıcıya bu GridLayoutManager cihazını kullanmasını söyleyin. RecyclerView, bağlama nesnesindedir ve sleepList olarak adlandırılır. (Bkz. fragment_sleep_tracker.xml.)

binding.sleepList.layoutManager = manager

2. Adım: Düzeni değiştirin

list_item_sleep_night.xml cihazındaki geçerli düzende, veriler gece boyunca tam bir satır kullanılarak gösterilir. Bu adımda, ızgara için daha kompakt bir kare öğe düzeni tanımlarsınız.

list_item_sleep_night.xml'yi açın.
Yeni tasarıma ihtiyaç duymadığı için sleep_length TextView öğesini silin.
quality_string TextView öğesini ImageView altında görünecek şekilde taşıyın. Bunun için birkaç şeyi güncellemeniz gerekiyor. quality_string TextView için son düzen:

<TextView
   android:id="@+id/quality_string"
   android:layout_width="0dp"
   android:layout_height="20dp"
   android:textAlignment="center"
   app:layout_constraintBottom_toBottomOf="parent"
   app:layout_constraintEnd_toEndOf="@+id/quality_image"
   app:layout_constraintHorizontal_bias="0.0"
   app:layout_constraintStart_toStartOf="@+id/quality_image"
   app:layout_constraintTop_toBottomOf="@+id/quality_image"
   tools:text="Excellent!!!"
   app:sleepQualityString="@{sleep}" />

Tasarım görünümünde quality_string TextView öğesinin ImageView değerinin altına yerleştirildiğini doğrulayın.

Veri bağlamayı kullandığınız için Adapter öğesinde hiçbir şey değiştirmeniz gerekmez. Kod yalnızca kendisi çalışır ve listeniz ızgara olarak görüntülenir.

Uygulamayı çalıştırın ve uyku verilerinin ızgarada nasıl gösterildiğini gözlemleyin.

ConstraintLayout değerinin tüm genişliği kapladığını unutmayın. GridLayoutManager görünümü, kapsamına göre sabit genişlik sağlar. GridLayoutManager ızgarayı ayarlarken, boşluk veya kırpma öğeleri eklerken tüm kısıtlamaları karşılamak için elinden geleni yapar.

SleepTrackerFragment içinde GridLayoutManager öğesini oluşturan kodda GridLayoutManger aralık sayısını 1 olarak değiştirin. Uygulamayı çalıştırın ve bir liste edinin.

val manager = GridLayoutManager(activity, 1)

GridLayoutManager için aralık sayısını 10 olarak değiştirin ve uygulamayı çalıştırın. GridLayoutManager öğesinin bir satıra 10 öğe sığacağını ancak öğelerin artık kırpıldığını unutmayın.
Aralık sayısını 5, yönü ise GridLayoutManager.VERTICAL olarak değiştirin. Uygulamayı çalıştırıp yatay olarak nasıl kaydırabileceğinize dikkat edin. Bu görünümün iyi olması için farklı bir düzene ihtiyacınız vardır.

val manager = GridLayoutManager(activity, 5, GridLayoutManager.HORIZONTAL, false)

Aralık sayısını 3 ve yönü dikey olarak ayarlamayı unutmayın!

Android Studio projesi: RecyclerViewEnlemLayout

Düzen yöneticileri, RecyclerView içindeki öğelerin nasıl düzenleneceğini yönetir.
RecyclerView, yatay ve dikey listeler için LinearLayout ve ızgaralar için GridLayout gibi yaygın kullanım alanları için kullanıma hazır düzen yöneticileri içerir.
Daha karmaşık kullanım alanları için özel bir LayoutManager uygulayın.
Tasarım açısından GridLayout en iyi şekilde, simgeler veya resimlerle temsil edilebilecek öğe listeleri için kullanılır.
GridLayout, öğeleri satır ve sütun ızgarasında düzenler. Dikey olarak kaydırıldığı varsayıldığında, bir satırdaki her bir öğe "span" olarak adlandırılır.
Bir öğenin kaç aralığı kaplayacağını özelleştirebilir ve özel bir düzen yöneticisine gerek kalmadan daha ilgi çekici ızgaralar oluşturabilirsiniz.
Izgaradaki bir öğe için bir öğe düzeni oluşturun. Düzen yöneticisi öğeleri ayarlamaya dikkat eder.
RecyclerView için LayoutManager öğesini, <RecyclerView> öğesini içeren XML düzeni dosyasında veya programatik olarak ayarlayabilirsiniz.

Udacity kursları:

Android geliştirici dokümanları:

Bu bölümde, bir eğitmen tarafından sunulan kurs kapsamında bu codelab üzerinden çalışan öğrenciler için olası ev ödevi ödevleri listelenmektedir. Öğretmenin şunları yapması gerekir:

Gerekirse ev ödevini atayın.
Öğrencilere ev ödevlerinin nasıl gönderileceğini bildirin.
Ev ödevlerine not verin.

Öğretmenler bu önerileri istedikleri kadar kullanabilir veya uygun görebilir ve uygun olan diğer ev ödevlerini atayabilirler.

Bu codelab'de kendiniz çalışıyorsanız, bilginizi test etmek için bu ödevlerden yararlanabilirsiniz.

Bu soruları yanıtlayın

1. Soru

Aşağıdakilerden hangisi Android tarafından sağlanan düzen yöneticileridir? Geçerli olan tüm seçenekleri işaretleyin.

makbuz LinearLayouManager

makbuz GridLayoutManager

makbuz CircularLayoutManager

makbuz StaggeredGridLayoutManager

2. Soru

"span" nedir?

▢ GridLayoutManager tarafından oluşturulan bir ızgaranın boyutu.

▢ Izgaradaki bir sütunun genişliği.

▢ Bir ızgaradaki öğelerin boyutları.

▢ Tablodaki dikey yönü olan sütunların sayısı.

Sonraki derse başlayın: 7.4: RecyclerView öğeleriyle etkileşimde bulunma