Selamlar, selamlar… Nisan ayında yayınladığım bu yazıda custom list view oluşturacağımızdan bahsetmiştim, bunun üzerine 9 adet yazı yayınladıktan sonra sonunda “Custom List View” oluşturmayı anlatmaya karar verdim. (Aslında farkettim ki internette bunun üzerine çok fazla yazı varmış ancak ben ilk custom list viewımı oluşturmak için yazıları incelerken neyi neden yaptığımızı tam anlayamamıştım ve ezbere yazılmışlar gibi hissetmiştim. Hem bu sebepten hem de niyetimi bozmamak adına bu yazıyı yazıyorum.) Custom List View’da en önemli ayrıntı yazdığımız adapterdır. Dolayısıyla özellikle adapterı yazarken daha fazla açıklamaya yer vereceğim.
Neden Custom List View?
Eğer verilerimizi bir listede göstereceksek genellikle akla ilk gelen bileşen list view oluyor. Verilerimizi sadece bir text halinde göstermek istemiyorsak ve görünüm için kendi özel tasarımımız bulunuyorsa bunun için custom yani özelleştirilmiş bir list view kullanmamız gerekir. Proje kodlarına direkt erişim için yazının sonuna geçebilirsiniz.
Aşamalar:
Bir custom list view oluşturmak için gerekli adımlarımızı kısaca anlatalım:
- Model oluşturmak: Veri kaynağımızda bulunacak veriler için bir model sınıf oluşturacağız.
- Veri kaynağımızı oluşturmak: Verilerimizi tuttuğumuz bir nesne tanımlayıp içine verilerimizi koyacağız.
- Kendi tasarımımızı oluşturmak: Listemizde bulunan her bir veri için özel görünümümüzün nasıl olduğunu belirttiğimiz bir xml dosyası tanımlayacağız.
- List view nesnesi yaratmak: Activitymizin layoutuna bir list view nesnesi ekleyeceğız. Bu list view nesnemizin her bir satırına, özel oluşturduğumuz tasarım dosyamızı referans vereceğiz.(Bu işlemi adapter sınıfında yapıyoruz.)
- Custom adapter yazmak: Elimizde verilerimiz bir de özel bir tasarım dosyamız var. Peki biz bu veriler ile tasarım dosyamızı bağdaştırıp list viewımıza nasıl aktaracağız? İşte bunun için adapterlarımızı kullanıyoruz. Adapterların görevi veri kaynağı ve listview arasındaki bağlantıyı oluşturmaktır.
- Veri, adapter, listview bağlantısını sağlamak: Verilerimizi, doğrudan list viewa veremediğimizden aralarındaki etkileşimi sağlamamız gerekmektedir. Bunun için önce veri kaynağı ile adapterı sonra adapter ile list viewı ilişkilendirmeliyiz. Özet mantığa buradan bakabilirsiniz.
Kodlayalım…
Listemizde her bir çiçek için çiçeklerin görselleri, latince isimleri ve hangi türden olduğu bilgisi bulunsun. O halde ilk adım olarak oluşturacağımız çiçek sınıfı şu şekilde olacaktır:
- Model oluşturmak:
Model sınıfımız bu şekilde:
Veri kaynağımızı oluşturmak:
Model sınıfından ürettiğimiz nesneleri bir listede tutalım:
Listemizdeki her bir eleman Flower sınıfından olacağından ArrayListz<Flower> diyoruz.
- Kendi tasarımımızı oluşturmak:
Her bir çiçek nesnesi için list view’da gösterilecek bilgilerin düzenini belirleyelim:
List view nesnesi yaratmak:
Ana activitymizin layoutunda bir listview tanımlayalım.
- Custom adapter yazmak:
İşte en önemli noktadayız. Verilerimizi list view ile buluşturduğumuz ve buluştururken de kendi özel tasarımımıza göre şekillendirdiğimiz kısım burası. Adapterımızda yazdığımız her kodu tek tek anlatacağım.
Öncelikle custom adapter yazmamızın sebebi kendimize ait bir tasarımımızın olması. Şöyle ki bizim tasarımımız bir görsel, 2 textten oluşmakta ancak her programcının tasarımı farklı olacağından doğrudan hazır bir adapter bulunmuyor. Bu yüzden kendi özel tasarımını oluşturan herkes ona uygun adapter sınıfını yazmak zorundadır. Oluşturduğumuz adapterda, temel adapter metodlarını kullanabilmemiz için BaseAdapter sınıfından extend etmemiz gerekmekte. Custom adapterımız temel olarak şu 4 adet metodu mutlaka içermek zorundadır.
getCount() : Listemizdeki eleman sayısını döndüreceğiz.
getItem(int i) : i. sıradaki nesneye erişeceğiz.
getItemId(int i): i. sıradaki nesnenin satır kimliğini elde ederiz.
getView(int i, View view, ViewGroup viewGroup): Listemizdeki her bir veri için çalışan fonksiyonumuz aslında. Burada, ana layoutumuzda default görünümde bulunan list viewımızla özel tasarım dosyamızın düzenini buluşturuyoruz. Daha sonra özel tasarımımızda bulunan her bir bileşene ise içeriğini referans veriyoruz.
getItem ve getItemId metodları yerine genelde liste.get(position) üzerinden nesnelere erişim gerçekleştirilmekte.
Kodlar üzerinden inceleyelim…
ile context üzerinden LAYOUT_INFLATER_SERVICE’i çağırıyoruz. Layout inflaterların doğrudan kullanılmak yerine bir context üzerinden çağırılması önerilir. Layout inflater nedir derseniz xml dosyalarımızı view’lara dönüştürmekle görevlidirler. XML dosyasını yorumlayarak ona uygun view nesnesini üretirler.
constructorı ile Activityde, adapter sınıfımızdan nesne üretirken yolladığmız context ve liste elemanlarını adapter sınıfımızın değişkenlerine atıyoruz.
getView metodu, adaptera gönderilen veri setindeki her bir veri için çalışır. Görevi ise her bir veri için bir görünüm oluşturmaktır.
Kısmında her bir nesne için döndürülecek görünümümüzün(customView) nasıl olması gerektiğini belirttik. LayoutInflater Xml dosyalarını alıp bir view döndürür demiştik. İşte biz de LayoutInflater sınıfından ürettiğimiz nesnemiz üzerinden inflate metodunu kullanıyor ve bu metoda, bir view döndürürken hangi xml’i dikkate alması gerektiği bilgisini veriyoruz. O da bize bir view dönüyor. Dönen bu viewımız üzerinden ise xml’deki her bileşene erişip onları tanımlıyoruz.
Tanımladıktan sonra getView() metodumuz veri setindeki her nesne için çalışacağından veri setindeki her nesnenin bilgisini xml dosyasında tanımladığımız alanlara veriyoruz.
Return customView diyerek ilgili i pozisyonundaki nesne için, oluşturduğumuz tasarım dosyasını referans alan bir view döndürüyoruz.
Ve son olarak…
- Veri, adapter, listview bağlantısını sağlamak:
MainActivitymizin içinde veri kaynağımızı doldurduktan sonra özel Custom Adapter sınıfımızı kullanabilmek için bu sınıftan bir nesne üretiyoruz. Üretirken ise adapter sınıfımızın constructorında gerekli olan contexti ve verileri gönderiyoruz. this dediğimiz şey aslında bulunduğumuz activitynin contexidir. MainActivity.this de diyebilirdik.
FlowerAdapter flowerAdapter = new FlowerAdapter(this,flowers);Adapter nesnemizi ürettikten sonra geriye sadece list viewımız ile arasındaki ilişki kurmak kalıyor.
myList.setAdapter(flowerAdapter);Artık custom list viewımızı temel anlamda oluşturduk diyebiliriz…
Proje kodlarına buradan ulaşabilirsiniz. Güzel kodlamalar :)
