Custom TableViewCell Oluşturmak (Xib)

TableView iOS uygulamalarında çok sık kullandığımız bir komponent. Bu durumda  özelleştirilmiş ve yeniden kullanılabilir tableview hücreleri büyük önem arz ediyor. İşte bu yazıda Xib dosyası kullanarak custom tableviewcell yaratmayı öğreneceğiz.

İçeriğimiz şu şekilde olacak:

  1. Custom TableViewCell Nedir?
  2. Ne İşe Yarar?
  3. Oluşturma Yöntemleri Nelerdir?
  4. Nasıl Yaratılır?
  5. Nasıl Kullanılır?
  6. Özet

 

Custom TableViewCell Nedir?

TableView komponentinde hücreler listelemek istediğimizde Apple ın bize sunduğu varsayılan tableview hücresini kullanmak yerine kendi oluşturduğumuz özelleştirilmiş tableviewcell yapılarına verilen isimdir.

 

Ne İşe Yarar?

Standart tableview hücresinin yapabildikleri kısıtlıdır. Ancak Başlık, altbaşlık ve resim görüntüleyebiliriz. Bu yaklaşım çok basit ve lightweight uygulamalarda yeterli olsada gerçek hayatta nerdeyse hiç kullanılmayan bir yöntemdir.

Örneğin Gmail uygulamasında gelen e-postaları görüntülemek için custom tableviewcell yaratmak gerekir. Bu varsayılan tableview hücresiyle yapılabilecek bir şey değil.

Biz gerçek hayatta tableviewcell objelerini özelleştirmek isteriz. İçerisine yerleştirdiğimiz komponentlerin türünü ve yerini ayarlamak isteriz; rengini, şeklini, boyutunu, constraint lerini ve fontunu değiştirmek isteriz.

Böylelikle tableview hücresini istediğimiz dizayna ulaştırabiliriz. Ayrıca yeniden kullanılabilir olduğu için uygulama içinde tekrar tekrar kullanabilir veya farklı bir uygulamaya kolayca taşınabilir.

 

Oluşturma Yöntemleri Nelerdir?

Custom tableviewcell yaratmak için genelde 3 yöntem kullanılır:

  • Sadece kod ile
  • Storyboard üzerinden
  • Xib dosyası kullanarak

Sadece kod ile özelleştirilmiş tableview hücresi oluşturmak mümkündür fakat görsellik olmadığı için hem kodu yazanın hem de okuyanın işi zordur. Ayrıca ufak bir constraint hatası yüzünden runtime crash ler meydana gelebilir.

Storyboard üzerinden custom tableview cell tasarlanabilir fakat yeniden kullanılabilir bir yapı kurmaktan uzaklaşmış oluruz.

Xib dosyası kullanarak özelleştirilmiş hücre yaratmak en makul olanıdır. Böylece dizaynı Interface Builder kullanarak kolayca yapabilir, proje içinde ve dışında yeniden kullanabilir ve kodu daha sağlıklı maintain edebiliriz.

Bu nedenle custom tableviewcell yapılarını xib ile oluşturmayı anlatacağım. Başka bir yazıda ise diğer yöntemleri ele alacağım.

 

Nasıl Yaratılır?

Custom tableviewcell yaratmayı bir örnek üzerinden yapalım. Örnekte e-posta uygulamasının tableviewcell yapısını simüle edeceğiz.

Yeni bir CocoaTouch sınıfı yaratıp EmailTableViewCell ismindeki sınıfın UITableViewCell sınıfını inherit etmesini sağlayalım. Ayrıca “XIB file” yaratmasına izin verelim.

Bu yaptığımız bir adet tableviewcell tasarım objesi ve onun bağlı olduğu .swift dosyası yaratmamızı sağlayacak.

Bu yaptıklarımız tasarım desenlerinde “View” kısmına denk geldiği için organizasyon şemasında şekildeki gibi gruplamak mantıklı olabilir.

 

Şimdi xib tasarım dosyasını açalım ve hücre için Identifier belirleyelim. (Opsiyonel)

Daha sonra 1 adet ImageView ve 3 adet label yerleştirelim. Fontu, büyüklüğü ve rengi ayarlayalım:

Gerekli Auto-Layout constraint lerini vermeyi unutmayalım…

 

Auto-Layout ile ilgili detayları merak ediyorsanız aşağıdaki yazılara göz atabilirsiniz:

   

 

Şimdi Assistant-Editor yardımıyla komponentlerin bağlantısını yapalım ve isteğe göre sınıfı update edecek fonksiyonu yazalım:

Custom TableViewCell yaratmak temel olarak bu kadardı.

 

Self Sizing TableViewCells
Self Sizing TableViewCells

Custom TableView hücresi yaratırken dikkat ettiğimiz diğer bir konuda hücrelerin kendi boyutunu kendisinin ayarlamasıdır. Eğer hücrelerin boyutunu içeriğine göre otomatik uzamasını istiyorsanız şu yazıya göz atmanızı öneririm:

 

Şimdi nasıl kullanacağımıza bir bakalım:

 

Nasıl Kullanılır?

TableViewCell i kullanacağımız ViewController sınıfı içinde yapacağımız 2 tane iş var:

Birincisi, kullanacağımız custom tableview hücresini register etmek.

İkincisi ise, cellForRowAt fonksiyonunda yaratmak istediğimiz hücre tipini kendimiz belirlemek.

 

Custom TableViewCell Register Etmek

Elimizdeki TableView objesi kullanacağı hücreleri önceden bilmek ister. Bu yüzden eğer varsayılan tableviewcell hücresi kullanmıyorsak kullanacağımız her bir özelleştirilmiş hücreyi TableView objemize tanıtmamız gerekiyor.

Bunu yapmak için basit bir metod yazacağız:

Hücreyi .xib tasarım dosyası kullanarak yarattığımız için UINib objesini register ettik. Burada verdiğimiz isim .xib dosyasına verdiğimiz isim ile aynı olmalıdır. Eğer hücreyi sadece kod ile oluşturmuş olsaydık ilgili sınıfın kendisini register edecektik.

Bu metodu viewDidLoad() içerisinde çağıralım ve hücre tipini belirlemeye geçelim.

 

Hücre Tipini Belirlemek

cellForRowAt delegate fonksiyonunda varsayılan bir hücre oluşturmak için şu ifadeyi kullanırız:

Yarattığımız custom tableviewcell aslında UITableViewCell sınıfını inherit etmiş bir sub class, öyle değil mi?

O zaman yarattığımız bu tableviewcell hücresini EmailTableViewCell türündeki sınıfa type casting yapabiliriz.

Bunu yaptığımızda Apple ın bize sunduğu varsayılan UITableViewCell sınıfını değil; kendi oluşturduğumuz EmailTableViewCell sınıfını kullanacağımızı belirtiriz. Biz de bunu istiyoruz zaten.

Type casting işini şekildeki gibi yaptıysak özelleştirilmiş tableviewcell hücresini istediğimiz gibi kullanmaya başlayabiliriz. 🙂

 

Özet

Özet olarak şunları söyleyebiliriz:

Custom TableViewCell diye adlandırdığımız yapılar Apple ın bize sunduğu TableViewCell sınıfını özelleştirerek kendi isteğimize göre değiştirdiğimiz komponentlere verdiğimiz isimdir.

TableView hücrelerini özelleştirerek içerisindeki komponentlere, yazılara, şekillere, rengine, büyüklüğüne ve animasyonlara istediğimiz gibi hükmedebiliriz.

Custom hücreler yaratmak için genelde 3 yol vardır ve en mantıklı olan xib dosyasıyla çalışmaktır. (Yeniden kullanılabilirlik, oluşturma ve maintain etme kolaylığı)

Xib ile tableview hücresi kullanmak için yarattığımız .xib dosyasını önce register etmeli daha sonra cellForRowAt delegate fonksiyonu içinde kullanacağımız hücre objesini kendi yarattığımız hücre tipine type casting yapmalıyız.