Android -Kotlin’de RecyclerView Kullanımı

Yeni bir yazıda hepinize merhaba. Bugün Android dünyasında veri listelemek için kullanılan Recyclerview öğesinin kullanımına değineceğim.

Öncelikle Recyclerview, uzun sürelerdir Android tarafında kullanılan Listview öğesinin yerine geldi. Peki neden listview değil de recyclerview diye soracak olursak:

• Performans
• ViewHolder
• LayoutManager
• ItemAnimator
• ItemDecorator

gibi konularda Recyclerview öne çıkıyor. Özellikle performans konusu, en farklılaşılan konudur.Daha detaylı Listview ve Recyclerview karşılaştırması için daha önceki yazımı bırakıyorum.

ListView ve RecyclerView Arasındaki Farklar ve Sebepleri

Recyclerview ile verilerimizi istediğimiz görüntüde, performanslı bir şekilde sergileyebiliriz. Evet, recyclerview içindeki her elemanın görüneceği tasarımı biz hazırlıyoruz. Bir recyclerview kurulumu için temelde 4 bileşene ihtiyacımız vardır:

• Verilerimizin bulunduğu liste(Uzak sunucu yada mockdata)
• Verinin tasarım dosyası (adapter item layout)
• Recyclerview Adapter
• Verileri arayüze doldurmak için ViewHolder

ve tabiki bir adet recyclerview :)

Hemen bir proje oluşturup başlayalım. Ben Kotlin dilinde implemente edeceğim fakat Javacıların da kolaylıkla anlayacağını düşünüyorum.

Android Studio → New Project → Empty Activity diyerek bir proje hazırlayalım.

1-) Recyclerview Öğesini Ekleme

Öncelikle verilerimiz göstereceğimiz layout dosyasının içinde bir recyclerview bırakalım.

design

Eğer design kısmında recyclerview öğesinin yanında indirme işareti varsa projemize import etmemiz gerektiğini anlıyoruz. Butona basarak yada aşağıdaki kodu module düzeyindeki gradle dosyasına ekleyebilirsiniz.

implementation 'androidx.recyclerview:recyclerview:1.1.0'

Burada ince bir detay vermek istiyorum.Eğer layout içinde sadece recyclerview bulunduracaksak viewGroup olarak en basit olan FrameLayout kullanmak faydalı olacaktır. Sadece recyclerview kullanımı ise bazı durumlarda istediğimiz görüntüyü vermeyebilir.

activity_main.xml

2-) Adapter Item View ve Data Hazırlama

Verilerimize uygun görünüm hazırlamak için gelen veriyi bilmemiz lazım. Bu veri uzak sunucudan gelebileceği gibi local databaseden de gelebilir. Biz şimdilik mockData dediğimiz sahte verilerle çalışacağız. Bu yüzden bir data class oluşturalım.

Eğer sizin verileriniz belirli ise bu kısmı atlayıp layout hazırlamaya başlayabilirsiniz.

model adında yeni bir package oluşturup içinde ProfileData adında data class oluşturalım.

ProfileData.kt

Şimdi ise mockData adında bir package daha oluşturup içinde mockList adında bir object oluşturalım. Kotlindeki object yapısı ile nesne oluşturmadan listemizi çekebileceğiz.

MockList.kt

Elimizdeki data class olduğuna göre şimdi adapter layout hazırlayabiliriz. İsim olarak adapter_item_profile_data yapabiliriz.

• Fotoğraf → ImageView
• İsim → TextView
• Departman → TextView hazırlayalım.

adapter_item_profile_data.xml

Elimizde recyclerview var, verimiz var, verimize özel layout dosyamız var. Şimdi sıra Adapter yazmakta.

Bir package daha oluşturup UI adını vermek istiyorum. Activity, Fragment gibi view etkileşimli dosyaları burda tutmak proje yapısı açısından oldukça faydalı olacaktır.

project folder structure

Projemizin klasör yapısını da verdiğimize göre şimdi adapter oluşturmaya başlayabiliriz.

3) Adapter ve ViewHolder Hazırlama

Adapter package içinde ProfileDataAdapter isimli bir sınıf oluşturalım. Adapter sınıfımız RecyclerView.Adapter sınıfından miras alır. Ve bu kalıtım sırasında ise arayüz olarak verilerimizi içinde verilerimizi işlediğimiz ViewHolder sınıfı isteyecektir.

Bu yüzden aynı package altında bir sınıf daha oluşturup viewholder sınıfımızı implemente edelim.

ProfileDataViewHolder sınıfımız RecyclerView.ViewHolder sınıfından miras almaktadır. Bu sınıf ise constructor paramatresi olarak bizden bir itemView ister. Peki nedir bu itemView?

Bu itemView bizim liste elemanlarımızı recyclerview içinde şekillendirdiğimiz layout dosyasının inflate edilmiş halidir. Layout dosyamızı fragmentlardan aşina olduğumuz LayoutInflater.inflate metodu ile ayağa kaldıracağız.

LayoutInflater.from(container.context).inflate(
    R.layout.adapter_item_profile_data,
    container,
    false
)

Bu kod bloğunda LayoutInflater ’a bir context vermemiz gerekiyor. Her viewGroup Context’e sahip olduğu için viewGroup.context kullanabiliriz.

Ve inflate metoduna ise 3 parametre veriyoruz.

• Custom Layout xml
• ViewGroup
• AttachToRoot

ViewHolder sınıfımız kısmen tamamladık. Dönelim adapter sınıfımıza.

ProfileDataAdapter(): RecyclerView.Adapter<ProfileDataViewHolder>()

Adapter sınıfımız bu şekilde iken bizden bazı metodları implemente etmemizi isteyecektir. Bunlar:

• onCreateViewHolder() : ProfileDataViewHolder → ViewHolder oluşturulduğunda yapılacaklar
• getItemCount() : Int → Listemizin eleman sayısı
• onBindViewHolder() → Data ve View bağlandığı kısım

Burdaki metodlara bakacak olursak ilk metod bizden geri dönüş değeri olarak bir viewHolder istiyor. Viewholder nesnemizi geri dönelim. ViewGroup olarak parent bize zaten verilmiş.

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ProfileDataViewHolder = ProfileDataViewHolder(parent)

İkinci metodda ise bizden listemizin uzunluğunu dönmemizi istiyor. Fakat bu sınıf içinde eriştiğimiz bir liste yok. İçeriden erişemediğimiz durumda sınıfın constructor parametresinden alacağız. Constructor’ a bir parametre ekleyelim ve liste isteyelim.

class ProfileDataAdapter(private val profileDataList: List<ProfileData>)

Şimdi ikinci metodun içini profileDataList.size olarak dönebiliriz. Kotlindeki tek satır yazımını kullanırsak metodumuz bu hali alır.

override fun getItemCount(): Int = profileDataList.size

Üçüncü ve son metodumuz ise bizden bind yani verileri view içine bağlama işlemi istiyor.

Burada SOLID prensiplerinin ilki olan Single Responsibility Principle hatırlayıp bu bind işlemini view ile ilgilenen viewHolder sınıfında yapalım. Böylelikle projenin ileri safhalarında onClickListener gibi bazı eventleri de düşünürsek daha temiz bir metod içeriği elde ederiz.

Adapter sınıfımızın son hali bu şekilde:

ProfileDataAdapter.kt

Şimdi idemize var olduğunu taahhüt ettiğimiz holder.bind metodunu yazalım. ViewHolder oluştururken bizden bir itemView istediğini söylemiştik. Şimdi o itemView’a erişerek verilerimizi aktaralım.

fun bind(profileData: ProfileData){
    itemView.txtFullName.text = profileData.fullName
    itemView.txtDepartment.text= profileData.department
}

Profil fotoğraflarını doldurmak için çokça kullanılan bir kütüphaneye başvuruyoruz. Glide

Projemizin build.gradle dosyasına şu bağımlılığı ekleyelim.

implementation "com.github.bumptech.glide:glide:4.11.0"

Glide ile urlden fotoğraf çekebilmemiz için manifest dosyamıza internet iznini belirtmemiz gerekiyor.

<uses-permission android:name="android.permission.INTERNET" />

Şimdi hazırız. Gelelim Glide ile fotoğraf yüklemeye.

Glide

• with(context verilmesi gerekir)
• load (fotoğraf kaynağı)
• into (imageview kaynağı)

parametreleri ile çalışır.Biz ekstra apply parametresini düzenleyip yuvarlak bir görünüm kazanalım.Parametreleri dolduralım ve Bind metodumuza tekrar bakalım.

fun bind(profileData: ProfileData) {
    itemView.txtFullName.text = profileData.fullName
    itemView.txtDepartment.text = profileData.department
    Glide
    .with(itemView.context)
    .load(profileData.photoUrl)
    .apply(RequestOptions.circleCropTransform())
    .into(itemView.imgProfilePhoto)
}

ViewHolder sınıfımızın son hali:

ProfileDataViewHolder.kt

4) RecyclerView ile Adapter Bağlantısı

Şimdi son olarak adapter ve recyclerview bağlantısını yapmalıyız. Recyclerview öğemizin bulunduğu sınıfta(Benim projemde MainActivity.kt)

tanımlama ve bağlantıları yapalım.

recyclerViewProfileData.adapter = ProfileDataAdapter(MockList.getMockData())
recyclerViewProfileData.layoutManager = LinearLayoutManager(this)

Şimdi projemizi çalıştırıp test edelim. Ve sonucu görelim.

Evet. Görünüşe göre amacımıza ulaştık. Umarım faydalandığınız bir yazı olmuştur. Herhangi bir durumda bana ulaşabileceğiniz adresleri ve yararlandığım kaynakları ve projenin Github linkini bırakıyorum.

Linkedin: https://www.linkedin.com/in/mustafayigitt/

Github:
https://github.com/mustafayigitt/AndroidLearningProjects/tree/master/RecyclerviewExample

Kaynak: Gökhan Öztürk — KeKod
https://www.twitch.tv/kekod_