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

Android Kotlin Hakkında Temel Bilgiler 07.3: RecyclerView ile GridLayout

Bu codelab, Android Kotlin Hakkında Temel Bilgiler kursunun bir parçasıdır. Bu kurstan en iyi şekilde yararlanmak için codelab'leri sırayla tamamlamanızı öneririz. Kursla ilgili tüm codelab'ler Android Kotlin Hakkında Temel Bilgiler codelab'leri açılış sayfasında listelenir.

Giriş

RecyclerView'ın en önemli avantajlarından biri, düzen stratejinizi kontrol etmek ve değiştirmek için düzen yöneticilerini kullanmanıza olanak tanımasıdı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öneticileriyle birlikte gelir. Örneğin, yatay ve dikey listeler için LinearLayout, ızgaralar için ise GridLayout kullanabilirsiniz. Daha karmaşık kullanım alanları için özel bir LayoutManager uygulamanız gerekir.

Bu codelab'de, önceki codelab'deki uyku izleme uygulamasını temel alarak verileri liste yerine ızgara düzeninde görüntülemeyi öğreneceksiniz. (Önceki codelab'den uygulamayı kullanmıyorsanız bu codelab'in başlangıç kodunu indirebilirsiniz.)

Bilmeniz gerekenler

Aşağıdaki konular hakkında bilgi sahibi olmanız gerekir:

Activity, Fragments ve Views kullanarak temel bir kullanıcı arayüzü oluşturma
Parçalar arasında gezinme ve parçalar arasında veri aktarmak için safeArgs kullanma
Modelleri, 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üren diğer görevler için coroutine'leri kullanma
Adapter, ViewHolder ve öğe düzeniyle temel bir RecyclerView nasıl uygulanır?
RecyclerView için veri bağlama nasıl uygulanır?
Verileri dönüştürmek için bağlama bağdaştırıcıları oluşturma ve kullanma

Neler öğreneceksiniz?

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

Yapacaklarınız

Bu serideki önceki codelab'de yer alan uyku izleme uygulamasını temel alın.
Uygulamada RecyclerView simgesiyle gösterilen uyku verileri listesini uyku verileri tablosuyla değiştirin.

Uyku izleme uygulamasının, aşağıdaki şekilde gösterildiği gibi parçalarla temsil edilen iki ekranı vardır.

Solda gösterilen ilk ekranda izlemeyi başlatma ve durdurma düğmeleri 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ğda gösterilen ikinci ekranda uyku kalitesi derecesi seçilir.

Bu uygulama, uyku verilerini kalıcı hale getirmek için kullanıcı arayüzü denetleyicisi, görünüm modeli ve LiveData ile Room veritabanının yer aldığı basitleştirilmiş bir mimari kullanır.

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

Önceki bir codelab'de, RecyclerView öğesini fragment_sleep_tracker.xml öğesine eklediğinizde herhangi bir özelleştirme yapmadan LinearLayoutManager öğesini eklemiştiniz. Bu kod, verileri dikey bir liste olarak gösterir.

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

LinearLayoutManager, RecyclerView için en yaygın ve basit düzen yöneticisidir. 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.

GridLayout

Bir diğer yaygın 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 tablo olarak düzenler.

Tasarım açısından GridLayout, fotoğraf tarama uygulamasındaki listeler gibi simge veya resim olarak gösterilebilen listeler için en uygun olanıdır. Uyku takipçisi uygulamasında, her geceki uyku süresini büyük simgelerden oluşan bir ızgara olarak gösterebilirsiniz. Bu tasarım, kullanıcılara uyku kaliteleriyle ilgili genel bir bakış sunar.

GridLayout, öğeleri nasıl yerleştirir?

GridLayout, öğeleri satır ve sütunlardan oluşan bir ızgarada düzenler. Dikey kaydırma yapıldığını varsayarsak bir satırdaki her öğe varsayılan olarak bir "aralık" kaplar. (Bu durumda, bir aralık bir sütunun genişliğine eşittir.)

Aşağıda gösterilen ilk iki örnekte her satır üç aralıktan oluşur. Varsayılan olarak GridLayoutManager, belirttiğiniz aralık sayısına ulaşılana kadar her öğeyi tek bir aralıkta düzenler. Genişlik sayısına ulaştığında sonraki satıra kaydırılır.

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

Bu görevde, son alıştırmada tamamladığınız RecyclerView öğesini alıp GridLayoutManager kullanarak verileri gösterecek şekilde güncelleyeceksiniz. Önceki codelab'deki uyku izleme uygulamasını kullanmaya devam edebilir veya GitHub'dan RecyclerViewGridLayout-Starter uygulamasını indirebilirsiniz.

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

Gerekirse bu codelab için RecyclerViewGridLayout-Starter uygulamasını GitHub'dan indirin ve 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 adlı kişiyi aç.
OnCreateView() içinde, return ifadesinden hemen önce 3 aralıklı yeni bir dikey GridLayoutManager oluşturun.

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

val manager = GridLayoutManager(activity, 3)

Bu satırın altında, RecyclerView'a bu GridLayoutManager'ı kullanmasını söyleyin. RecyclerView, bağlama nesnesinde bulunur ve sleepList olarak adlandırılır. (fragment_sleep_tracker.xml başlıklı makaleyi inceleyin.)

binding.sleepList.layoutManager = manager

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

list_item_sleep_night.xml bölümündeki mevcut düzende, veriler her gece için 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 adlı kişiyi aç.
Yeni tasarımda gerekmediği için sleep_length TextView öğesini silin.
quality_string TextView öğesini ImageView öğesinin altında görünecek şekilde taşıyın. Bunun için birkaç şeyi güncellemeniz gerekir. quality_string TextView için son düzeni aşağıda bulabilirsiniz:

<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 öğesinin altında konumlandırıldığını doğrulayın.

Veri bağlama kullandığınız için Adapter içinde herhangi bir şeyi değiştirmeniz gerekmez. Kod çalışır ve listeniz ızgara olarak gösterilir.

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

ConstraintLayout öğesinin yine de tüm genişliği kapladığını unutmayın. GridLayoutManager, görünümünüze kapsama alanına göre sabit bir genişlik verir. GridLayoutManager, ızgarayı yerleştirirken, boşluk eklerken veya öğeleri kırparken tüm kısıtlamaları karşılamak için elinden geleni yapar.

SleepTrackerFragment bölümünde, GridLayoutManager öğesini oluşturan kodda GridLayoutManger için span sayısını 1 olarak değiştirin. Uygulamayı çalıştırdığınızda bir liste gösterilir.

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'nın bir satıra 10 öğe sığdırdığını ancak öğelerin artık kırpıldığını fark edeceksiniz.
Kapsam sayısını 5, yönü ise GridLayoutManager.VERTICAL olarak değiştirin. Uygulamayı çalıştırın ve yatay olarak nasıl kaydırabileceğinize dikkat edin. Bunun iyi görünmesi için farklı bir düzene ihtiyacınız var.

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

Kapsam sayısını tekrar 3'e, yönü ise dikey olarak ayarlamayı unutmayın.

Android Studio projesi: RecyclerViewGridLayout

Düzen yöneticileri, RecyclerView içindeki öğelerin nasıl düzenleneceğini yönetir.
RecyclerView, yatay ve dikey listeler için LinearLayout, ızgaralar için GridLayout gibi yaygın kullanım alanlarına yönelik kullanıma hazır düzen yöneticileriyle birlikte gelir.
Daha karmaşık kullanım alanları için özel bir LayoutManager uygulayın.
Tasarım açısından GridLayout, simge veya resim olarak gösterilebilen öğe listeleri için en iyi şekilde kullanılır.
GridLayout, öğeleri satır ve sütunlardan oluşan bir ızgarada düzenler. Dikey kaydırma yapıldığını varsayarsak bir satırdaki her öğe, "aralık" olarak adlandırılan alanı kaplar.
Bir öğenin kaç sütun kaplayacağını özelleştirebilir, böylece özel bir düzen yöneticisine gerek kalmadan daha ilgi çekici ızgaralar oluşturabilirsiniz.
Izgaradaki bir öğe için öğe düzeni oluşturun. Düzen yöneticisi, öğeleri düzenler.
LayoutManager değerini, <RecyclerView> öğesini içeren XML düzen dosyasında veya programatik olarak RecyclerView için ayarlayabilirsiniz.

Udacity kursları:

Android geliştirici belgeleri:

Bu bölümde, bir eğitmenin yönettiği kurs kapsamında bu codelab'i tamamlayan öğrenciler için olası ödevler listelenmektedir. Eğitmen, aşağıdakileri yapmalıdır:

Gerekirse ödev atayın.
Öğrencilere ev ödevi ödevlerini nasıl göndereceklerini bildirin.
Ödevlere not verin.

Eğitmenler bu önerileri istedikleri kadar kullanabilir ve uygun olduğunu düşündükleri diğer ödevleri verebilirler.

Bu codelab'i kendi başınıza tamamlıyorsanız bilginizi test etmek için bu ödevleri kullanabilirsiniz.

Bu soruları yanıtlayın

1. Soru

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

▢ LinearLayouManager

▢ GridLayoutManager

▢ CircularLayoutManager

▢ StaggeredGridLayoutManager

2. Soru

"Span" nedir?

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

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

▢ Bir ızgaradaki öğenin boyutları.

▢ Dikey yönlendirmeye sahip bir tablodaki sütun sayısı.

Bir sonraki derse başlayın: 7.4: RecyclerView öğeleriyle etkileşim