Birçok uygulamada liste içerisinden bir öğe seçmek bir gereksinimdir. seçilen öğeye göre yeni bir sayfa-detay sayfası- yüklenir. Xcode içerisindeki UITableView elemanı bu listeyi gösteren ve seçim yapmamızı sağlayan elemandrır. Seçilen elemana göre detay sayfasını yükleme işini UINavigationController ile birlikte başarır. Bu yüzde UITableView’ ler genelde UINavigationController ile birlikte kullanılır. Aşağıdaki resimde oluşturacağımız projenin çalıştırılmış hali görünmektedir.

PROJEYİ OLUŞTURMAK

Xcode ekranından File->New->New Project (Xcode 4.2) yolunu takip ediyoruz. Daha sonra önümüze gelen template ekranından Master-Detail Application (Daha eski Xcode versiyonları için Navigation Based Application) olanını seçiyoruz. Product Name alanına uygulama adımızı yazıyoruz. Device Family olarak iphone seçiyoruz. StoryBoard işaretini kaldırıyoruz ve Next tuşuna basarak projemizi oluşturuyoruz.

VERİ KAYNAĞI

uygulamamızda birden fazla veriyi UITableView içerisinde göstermek istediğimizden bu veriyi tutacak ve tabloya aktaracak bir yapıya ihtiyaç duymaktayız. Bu veri yapısı XML kaynağı, veri tabanı veya dizi olabilir. Bu örneğimizde basit olması açısından diziyi(NSMutableArray) kullanacağız. Öncelikle diziyi string içerikle doldurup daha sonra bu verileri tablo üzerinde göstereceğiz.

Yapmamız gerekn ilk şey veri kaynağını oluşturup bu veri kaynağını tabloda göstermek istediğimiz verilerle doldurmak olacak. Veri kaynağımızı viewDidLoad metodu içerisinde oluşturuyoruz.

- (void)viewDidLoad {

[super viewDidLoad];

sehirler=[[NSMutableArray alloc]

initWithObjects:@”Adana”,@”Ankara”,@”Antalya”,@”Bursa”,@”Balıkesir”,@”Çanakkale”,@”Gümüşhane”,@”İstanbul”,@”İzmir”,@”Gaziantep”,@”Mersin”,@”Antalya”,@”Sivas”, nil];    self.navigationItem.title=@”Şehirler”;

}

sehirler dizisini MasterViewController.h dosyası içerisinde tanımladık. viewDidLoad metodu içerisinde “header (.h)” dosyasında tanımladığımız dizi için bellekten yer ayırdık ve dizimizi elemanlarla doldurduk.

Burdan sonra yapmamız gereken ilk iş tablomuzda kaç tane eleman göstermek istediğimizi tablomuza bildirmek. bunun için  tableView:numberOfRowsInSection metodunu kullanıyoruz. bu metod geriye integer değer döndürür ve bu integer değer bizim tablomuzda kaç tane satır göstermek istediğimizi belirtir. Bizim örneğimizde dizimizde 13 tane eleman mevcut olduğundan dizideki eleman sayısını almamız gerekir. Bu da şu şekilde olmaktadır.

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {

return [sehirler count];

}

Bu aşamada UItableView kaç tane satır göstermesi gerektiğini biliyor. Bu noktadan itibaren tablo satırları içerisinde neler görünmesini istediğimizi bildirmemiz gerekmektedir. Tablo yapısı satırlardan oluşmaktadır ve her satır bir hücreye sahiptir. Hücreleri oluşturmak için  tableView:cellForRowAtIndexPath metodu kullanılmaktadır. bu metod oluşturmak istediğimiz hücre sayısı kadar çalıştırılır. Metod NSIndexPath tipinde indexPath parametresi içerir. Bu parametre sayesinde o anki satır numarasını öğrenebiliriz. bu metodun kullanımı aşağıdaki şekildedir.

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

static NSString *CellIdentifier = @”Cell”;

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];

if (cell == nil) {

cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];

}

cell.textLabel.text=[sehirler objectAtIndex:indexPath.row];

cell.imageView.image=[UIImage imageNamed:@"logo.png"];

cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;

return cell;

}

Buradaki kod parçasında öncelikle -gerekli ise- bir hücre oluşturuyoruz. daha sonra dizi içerisinde göstermek istediğimiz elemanı indexPath parametresini kullanarak alıyoruz. Daha sonra aldığımız bu değeri hücrenin label’ının text’ i olarak ayarlıyoruz. Eğer şehirlerimizn yanında küçük bir ikon görünmesini istiyorsak bunun için öncelikle ikon dosyamızı projemize iliştirmemiz gerekmekte. bu işlem için ikon dosyamızı Xcode içerisinde solda .h ve .m dosyalarının tutulduğu panele sürükleyip bırakıyoruz. çıkan ekranda “Copy items into destination group’s folder(id needed)” seçeneğini seçip Finish butonuna tıklıyoruz.

projemize iliştirdiğimiz bu ikon dosyasını olşturdğumuz hücrenin imageView elemanına gönderiyoruz ve son olarak oluşturduğumuz bu hücreyi geriye döndürüyoruz.

metodlarımızı bu şekilde oluşturduktan sonra uygulamamızı çalıştırdığımızda sehirler dizisindeki elemanları tablomuzda görmüş olmamız gerekir.

Uygulamayı buradan indirebilirsiniz.