İOS Obj-C

iOS Custom Table View Cell

table-view-ornek

Bir önceki yazımda, örnek olarak gösterdiğim table viewlardan en sağdaki table view dikkatinizi çekmiştir.

Diğerlerinden farklı bir görüntüsü var. Bu örneğe tekrar göz atalım.

table view ornek

AirBnb uygulamasında kullanılan bu table view cell, custom olarak tasarlanmış. Şimdi biz de kendimize bir custom view cell tasarlayacağız.

Yapacağımız örnek uygulama, bir haber uygulaması olsun. Biz table view’ın her satırında haber ile ilgili  haberin başlığını, resmini, kısa bir açıklamasını ve tarihini koyalım.

Önceki yazımızdan table view’ın önemli metodlarını hatırlayalım:

  • numberOfSectionsInTableView : Table view içerisindeki bölüm sayısını ifade eder.
  • numberOfRowsInSection : Her bölüm içerisinde bulunacak olan hücre sayısını ifade eder.
  • cellForRowAtIndexPath : Her hücre içerisindeki gösterilecek olan veriyi atadığımız yeri ifade eder.
  • didSelectRowAtIndexPath : Hücrelere tıkladığımız zaman yapacağımız aksiyonu kodladığımız yeri ifade eder.

Bu metodları ve ne işe yaradıklarını öğrenmiştik. Uygulamaya başlamadan önce bunları hatırlamakta fayda var.

Şimdi table view uygulamamızı tasarlamaya başlayalım.

Table View Custom Cell adında bir “Single View” uygulama açalım ve storyboard’a bir tane table view controller ekleyelim

Ardından “File -> New File -> Objective C Class” seçelim. Burada önemli olan “Subclass of” kısmında “UITableViewController” seçmiş olmanız. Class’ımızı oluşturduktan sonra storyboard’a gelerek, biraz önce sürüklemiş olduğum table view controller’ımızın classını, oluşturduğumuz bu class olarak ayarlıyoruz.

Table view class

 

Table View’ımızı oluşturdukdan sonra, Storyboard’da boş view’in solunda bulunan büyük oku alıp table view’ın üzerine bırakıyoruz.Bu ok uygulama ilk açıldığında gelecek olan ekranı gösterir.

Bu adımda uygulamayı açarsak, boş bir table view görürüz. ilk ekran seçici

Şimdi sıra geldi özel table view cell oluşturmaya.

Adım 1: Table View Cell Sınıfını ve XIB Dosyasını Oluşturma

File -> New File -> Objective C Class seçelim. Subclass of kısmını UITableViewCell olarak belirtip, aşağıda görünen Also create XIB file seçeneğini de işaretleyerek classımızı oluşturalım. (Class adım CustomCell) Bunu yapınca oluşan class ve ekran şu şekilde olacaktır:

Table view Cell

Adım 2 : Ekranımızdaki Bileşenleri Oluşturma

  • Resim için -> Image View
  • Başlık için -> Label
  • Tarih için -> Label
  • Kısa Açıklama için -> Label
  • Ok işareti için -> Image View

kullanarak ekranımı oluşturdum ve tanımladım. İşte ekranımın son hali :

 

 

Ekran Resmi 2014-05-19 21.44.28

Adım 3 : Custom Table View Cell’i Kullanma

numberOfSectionsInTableView 
numberOfRowsInSection 
cellForRowAtIndexPath

metodlarını nasıl kullandığımızı önceki yazımdan bildiğinizi varsayıyorum.

Bir haber kaynağı kullanmadığımız ve haber için XML, Web Servis kullanmayı öğrenmediğimiz için haberleri manuel olarak gireceğiz. Bunun için 3 tane farklı array oluşturuyorum. Birincisi resimlerin isimlerini, ikincisi haber başlıklarını, üçüncüsü de haber detaylarını tutacak.

.h dosyamız:

viewDidLoad metodunda bu arrayleri doldurup, table view metodlarında kullanacağım.

Belli başlı haber sitelerinden aldığım haberleri dizilere ekledim. Aynı zamanda haberlerin resimlerini de uygulamama ekledim.

table view init

 

Daha önce öğrenmiş olduğumuz üzere,

numberOfSectionsInTableView, numberOfRowsInSection metodlarını normal bir biçimde kullanıyoruz. Bu iki metod değişmiyor.

Fakat  cellForRowAtIndexPath değişiyor. Bunun yanında  heightForRowAtIndexPath metodunu da ekliyoruz. Bu metotta da özel hücremizin yüksekliğini set ediyoruz.

cellForRowAtIndexPath metodunda haberin resmini, başlığını, açıklamasını, tarihini atıyorum.

Kodumuzun son şekli :

Uygulamanın ekran görüntüsü :

Uygulama Ekran Görüntüsü

 

Uygulama dosyaları için : https://github.com/ozdemirmuhammed/Table-View-Custom-Cell

 

Türk Telekom Şirketinde CRM Çözümlerinde Teknik Analist olarak görev yapmaktayım. Geçmişte ise iOS uygulama geliştirici olarak çalıştım. Bilginin ve paylaşmanın gücüne can-ı gönülden inanırım..