Custom TableViewCell Kullanımı

Merhaba, bu yazıda custom tableview cell konusunu işleyeceğiz.

Custom TableViewCell Nedir?

Bildiğiniz gibi TableView yapısı iOS uygulamalarında sıkça kullandığımız bir yapı. TableView ile yazı ve resimleri tablo halinde kolayca listeleyebiliriz fakat bu tablo hücreleri çok kısıtlıdır. Bir TableView hücresinde şunları gösterebiliriz:

  • Sadece başlık
  • Başlık ve Altbaşlık
  • Bunlarla beraber resim

Peki bunlar işimizi her zaman görüyor mu? Görse bile görünüşünü ve pozisyonlarını istediğimiz gibi ayarlamamıza yetiyor mu?

Tabiki hayır.

İşte bu yüzden TableView hücrelerini özelleştirmek istiyoruz.

İsteğe göre özelleştirilmiş her hücreye Custom TableViewCell adı veriliyor.

 

Custom TableViewCell Ne İşe Yarar?

Custom TableViewCell kısaca Apple’ın bize standard olarak sunmuş olduğu TableView yapısını değiştirerek isteğe göre yeniden dizayn edebilmemizi sağlar.

Hücre elemanlarını ve pozisyonlarını, hücre büyüklüğünü, görüntüsünü ve şekli şemalini komple biz tasarladığımız için inanılmaz bir esneklik sağlar.

Yapabilceklerimiz ise hayal gücümüzle sınırlı 😎

 

Yani şimdi şu da bir TableView hücresi:

 

Bu da bir TableView hücresi…

 

Şimdi hangisi daha güzel allaasen? Biz de TableView hücrelerini böyle şeküllü şukullü yapacağız 🙂

 

Custom TableViewCell nedir ve ne işe yarar öğrendik. Şimdi sıra geldi örnek uygulamasına…

 

Eğer TableView hakkında eksik olduğunuzu hissettiğiniz noktalar varsa TableView Kullanımı dersine bakmanızı tavsiye ederim.

 

Hadi başlayalım 🔨

 

Örnek Uygulama

SingleView bir uygulama başlatalım, MainStoryBoard’a bir adet TableView sürükleyelim, ekranın hepsini kaplasın. Bunun için Auto-Layout kullanabilirsiniz.

Ayrıca 1 adet prototip yaratalım ve identifier olarak “Cell” ismini verelim.

Delegate, Datasource, IBOutlet bağlantısı vs gibi işleri önceden yaptığınızı varsayıyorum çünkü biz bu derste özelleştirilmiş tablo hücresi öğreniyoruz, TableView zaten biliyoruz değil mi 🙄

Custom TableView Cell oluştururken atacağımız ilk adım hücrenin uzunluğunu ayarlamak olsun.

Bunu iki farklı yerden ayarlamamız gerekiyor.

Birincisi TableView üstünden olacak, diğeri ise hücre üzerinden.

 

 

TableView objesi seçiliyken Size Inspector’a gelelim ve Row Height olarak 110 verelim.

 

Bir de TableView hücresi seçiliyken yine Size Inspector’dan Row Height olarak 110 birim belirtelim.

 

 

Tablo hücresini seçmekte zorlanırsanız sol taraftaki Document Outline yapısını kullanabilirsiniz.

 

Şimdi geldik hücre tasarımına…

 

Hücre seçiliyken eklemek istediğimiz objeleri buraya sürükleyip Auto-Layout ile constraint vereceğiz.

Hücrenin içine bir adet ImageView sürükleyelim, kenarlarını tüm köşelere doğru uzatalım ve Content Modunu Aspect Fill seçelim. Ayrıca ImageView in Alpha değerini 0.3 yaparak saydamlaştıralım.

 

Daha sonra hücreye label sürükleyelim ve 25 Punto Bold bir font belirleyelim. Daha sonra bunu ekranın ortasına sabitleyelim.

 

Bir tane daha label eklersek tasarım işi bitiyor. Bu label ı ise ekranın sağına ve ortasına sabitleyelim, puntosu daha küçük olsun.

 

Tasarım işi bitti. Peki bunların IBOutlet bağlantılarını nerde yapacağız?

UITableViewCell class ı oluşturup onun içinde yapacağız. ViewController class ında bağlantı oluşturmayın.

 

Şimdi projede yeni bir CocoaTouch dosyası yaratalım. İsmi myTableCell olsun. Extend ettiği class ise UITableViewCell olsun.

 

Hücrenin içindeki objelerin bağlantılarını bu hücre sınıfı içinde yapacağız ama önce tablo hücresinin bu sınıfı kullanacağını belirtmemiz gerekiyor. Bu nedenle hücre seçiliyken Custom Class olarak yarattığımız myCell sınıfını seçmemiz lazım.

 

Şimdi bağlantıları yapabiliriz.

Assistant Editor myCell sınıfı ile açıkken IBOutlet bağlantılarını yapalım.

 

Hücre artık hizmete hazır ve nazır hale geldi 🙂

 

Şimdi tabloda göstermek üzere biraz veri hazırlayalım. İnternetten 3 adet kebap resmi bulalım, ben aşağıdakileri kullanacağım 😋

 

 

 

 

 

 

Bunları Asset klasörünün altına attıysak şekildeki gibi bir Tuple oluşturalım…

 

Bu da tamam.

Geriye kaldı TableView delege metodları…

 

Hatırlarsanız TableView in delege metodlarını yazarken cellForRowAt fonksiyonunda bir hücre yaratıyor ve sonra bu hücreyi return ediyorduk.

Ama bu yarattığımız hücreyi default tableview hücresine cast ederek kullanıyorduk.

Şimdi yapacağımız şey ise default hücreye cast etmek yerine yarattığımız myCell sınıfına cast etmek 🙂

 

Neler yaptık?

  • “Cell” ismi verdiğimiz hücreden bir instance yarattık ve bunu myCell sınıfına cast ettik.
  • myCell içinde tanımladığımız hücre property lerini sırasıyla tuple verilerine eşitledik.

 

Yemeğin ücretine türk lirası sembolünü sonradan ekledik çünkü normal şartlarda fiyat bilgisi veritabanından gelir ve Integer ve Double tipinde numerik bir veri döndürür. Biz artık bunu nasıl display etmek istiyorsak sağına soluna başına farklı semboller koyabiliriz. Bu daha doğru bir çözümdür.

Üşenmeyelim, böyle yapalım 🙂

 

Sonuç

Yukarıdaki adımları eksiksiz tamamladıysak projeyi çalıştırabiliriz 🔥

 

 

Bütün işlem bu kadardı.

Custom TableViewCell ile ilgili anlatacaklarım basit haliyle bu kadar. İlk defa öğrendiğiniz bir şey ise bu dersin üzerine yeni birşeyler ekleyip denemenizi tavsiye ederim. Hatta buraya da paylaşırsanız on numara olur 🙂

 

Projenin kaynak koduna buradan erişebilirsiniz.

 

Sizce custom TableViewCell kullanılması gerekli bir yapı mı? Siz uygulamanızda kullanmak ister misiniz?

 

İyi kodlamalar 💻

Kimler Neler Demiş?

avatar
  Subscribe  
Bildir