ListView Özelleştirme

Hasibe Zafer
4 min readFeb 23, 2017

Verileri listelemek için “ListView” isimli component kullanılır. ListView her satırında bir TextView barındırır. Yani ListView içerisinde başka View ögeleri barındırabilen taşıyıcı görevinde bir componenttir. Biz de bu yazımızda her satırında bir kullanıcı profil resmi, kullanıcı ismi ve sistem saat bilgisini barındıran özelleşmiş bir listview hazırlayacağız.

ListView hazırlamak için uygulamamız gereken dört ana adım var.Bu adımları aşağıdaki görselde sıraladım.

Şimdi bu adımları sırasıyla gerçekleştireceğiz. Projemizi ilk oluşturduğumuzda MainActivity ve activity_main.xml dosyamız varsayılan olarak oluşturulmuştu. İlk olarak activity_main.xml dosyamıza “listView”id’sine sahip bir ListView ekliyoruz.

1. adımda custom_layout.xml dosyamızı hazırlayacağız.

Bunun için res/layout/custom_layout.xml dizinine dosyamızı oluşturalım. İlk olarak tasarımızın son hali üzerinde componentlerin yerleşimini gösteren bir görsel hazırladım. Bu görselimizi görelim ve daha sonra kodlarımızı inceleyelim.

Her bir satır tasarımımız için bir ImageView ve iki adet TextView kullandık.

6. satırda LinearLayout orientation özelliğine horizontal verdik. Bunun anlamı LinearLayout içine yerleşecek olan componentlerin yatayda hizalanacağıdır.
7. satırda padding değeri verdik. Padding içeriğin sahip olduğu iç boşluk diyebiliriz. Herhangi bir köşeye değer verebileceğimiz gibi sadece padding diyerek dört köşeye de aynı boşluk değerini verebiliriz. Siz de bu değeri değiştirerek her bir satır için değişiklikleri gözlemleyebilir daha iyi anlayabilirsiniz.

11. satırda ImageView’e id olarak “imageViewUserPicture” verdik. Bu imageView’e erişebilmemiz için gerekli olan bilgimiz.

17. satırda TextView id olarak “textViewUserName” verdik. 20 ve 21. satırlarda yukarıda bahsettiğimiz gibi sadece paddinTop ve paddingLeft için değerler verdik. Böylece kullanıcı adına sadece yukarıdan ve soldan boşluklar vermiş olduk.

26. satırda sistem saatini tutan textView’e id olarak “textViewSystemClock” verdik. Burada projenizi geliştirdiğinizde bu textView’de mesajın gönderilme saatini tutabilirsiniz. Bizim tasarımızda tüm satırlarda sistem saati gösteriliyor. Çünkü henüz işlevsellik yok . :) 29 ve 30. satırlarda weight özelliğine “1”, gravity özelliğine “right” vererek textView sağa yaslı olmasını sağladık. Tasarımızı bu şekilde bitirmiş olduk.

2. adımda kendimize bir “Veri Modeli” oluşturacağız.

Peki Veri Modeli deyince ne anlamalıyız ? Oluşturduğumuz satır tasarımına uygun verilerin bize getirileceği bir sınıf oluşturacağız.

Hemen MainActivity dosyamızın da bulunduğu java dizinimize User.javaadında bir dosya oluşturalım ve Veri Modelimizi hazırlayalım.

Veri modelimizde kullanıcı isim bilgisini tutan String tipinde değişken, kullanıcı profil fotoğrafını belirlemek için cinsiyet bilgisini tutan Boolean tipinde bir değişken ve de sistem saatini tutan String tipinde bir değişken tanımlayacağız. Vakit kaybetmeden kodlarımızı görelim.

Bahsettiğimiz değişkenleri 4 ve 6. satırlar arasında tanımladık. Daha sonra constructor ve getter setter metodlarımızı oluşturduk. Bunun için Android Studio’da boş bir alana sağ tıklayıp Generate Constructor dediğimizde seçtiğimiz değişkenler için kurucu metodumuzu otomatik olarak oluşturacaktır. Aynı işlemi Getter ve Setter metodları için de yapabiliriz.

3. adımımıza geçmeden önce oluşturduğumuz bu sınıftan yeni bir User üretip bunu MainActivity içerisinde User tipinde oluşturduğumuz listeye ekleyelim. O zaman kodlar gelsin. :)

15. satırda users adında User tipinde bir liste oluşturduk.
22. satırda SimpleDateFormat sınıfından clockFormat adında bir nesne oluşturup saat formatımızı belirledik. Daha 23. satırda GregorianCalendar sınıfından gcalender oluşturup nesnemiz aracılığıyla 24. satırda saati çektik ve String tipindeki currentTime değişkenimize atadık.

26. satırda users listemize yeni User ekledik. Burada dikkat edecek olursak User içine aldığı parametreler sırasıyla String, Boolean,String tipinde. Bu sıra önemli çünkü Veri Modelimizi hatırlayın orada constructor içine aldığı parametreler bu sıradaydı. Biz User sınıfından yeni bir User oluştururken constructor kullanmış oluyoruz. Bunlar temel java SE bilgisi ama yine de değinmiş olduk.

Sıra geldi 3. ve en önemliiii adımımıza.

3. adımımızda ListView’i verilerle doldurabilmek için Adapter oluşturacağız.

İlk olarak java klasörümüze CustomAdapter.java adında dosyamızı oluşturuyoruz. Oluşturacağımız sınıfla ilgili bilmemiz gereken ilk şey kendi Adapter’imizi oluşturmak istediğimizde BaseAdapter sınıfından extends edeceğimizdir. Bu işlemi yaptığımızda Override etmemiz gereken dört ana metod vardır. Gelin bunları tanıyalım daha sonra kodlarımızı inceleyelim.

getCount(): ListView’da gösterilecek satır sayısını ifade eder. Geriye int değer döner. ArrayList’imizin boyutunu bulurken bu metod bize yardımcı olacak.

getItem(int i): i’ninci satıra denk gelen nesneyi döndürür.

getItemId(int i): i’ninci satıra denk gelen nesnenin id’sini döndürür.

getView(int i, View view, ViewGroup viewGroup): View tipinde veri döner. Burada LayoutInflater yardımı ile oluşturduğumuz custom_layout.xml her satır için xml okuyup inflate edeceğiz.Yani view tipine çevireceğiz.

Artıkk kodlarımızı inceleyebiliriz.

18. satırda bahsettiğimiz BaseAdapter’dan CustomAdapter’ımızı extends ettik.
19. satırda LayoutInflater sınıfından userInflater oluşturduk.

22.satırda CustomAdapter constructor tanımladık.
23. satırda oluşturduğumuz userInflater’a ilk parametremiz olan activity aracılığıyla Inflate işlemini gerçekleştirmemizi sağlayan servisi atamış olduk.Yani artık xml’i view dönüştürecek yardımcımız userInflater diyebiliriz.

45. satırda View tipinde lineView adında nesnemizi oluşturduk.
46. satırda hep bahsettiğimiz custom_layout’taki xml’i view’a dönüştürmek için inflate işlemini gerçekleştirdik veee bunu lineView atadık. Bizim geriye dönen değerimiz bu lineView olacak.

47,48,49 satırlarda custom_layout’ta oluşturduğumuz componentleri tanımlıyoruz. Burada dikkat etmemiz gereken findViewById() lineView üzerinden gerçekleştiriyoruz.

51. satırda User sınıfımızdan bir user oluşturup ,userList.get(i) ile listede seçilen objeyi atamış oluyoruz. Yani artık hangi user seçildiği belli. :)

52. ve 53. satır da tanımlı olan user’ımıza ait isim bilgisini ve sistemin saat bilgisini ilgili textView’lere set ediyoruz.

55–59. satırda user’ın cinsiyetine göre profil fotoğrafını set ediyoruz.

4. ve son adımımız olan CustomAdapter’ı listemize bağlıyoruz.

Adapter’ı listemize bağlama işlemi çok kolay. Hemen kodlarımızdan ilgili kısmı açıklayalım.

34. satırda activity_main.xml’de oluşturduğumuz ListView componentini tanımladık.
35. satırda CustomAdapter sınıfımızdan adapter nesnesi oluşturduk ve içerisini users ile doldurduk.
36. satırda adapter’ı listView’e set ettik.
Artık kendi özel listView tasarımımız hazır durumda. :)

Kodların tamamına buradan erişebilirsiniz.

Kaynak olarak şuradan renk seçimleri için şuradan yararlandım. :)
Eksik ve hatalarım için geri dönüşlerinizi beklemekteyim.
Bol kodlu günler dilerimm. :)

--

--