UITableView Doldurulması

iOS uygulamalarında en sık karşılaşan bileşenlerden birisi UITableView'dir. Bir veri dizisini çeşitli şekillerde görüntülemek için kullanılan UITableView, uzaktaki bir sunucudan elde edilen veriyi ya da veritabanı sorgusunun cevabını ekrana getirmek için kullanılabilir. Bu bölümde de size bir UITableView nasıl oluşturulur ve nasıl doldurulur anlatacağız.

İlk olarak bir uygulama oluşturalım ve ekrana gelecek ilk ViewController içerisine bir adet UITableView ekleyelim:

Sağ yukarıda yer alan Outlets seçeneği içerisinde dataSource ve delegate özelliklerini File's Owner şeklinde belirttikten sonra ViewController.h dosyası içerisinde myTableView adında bir değişken oluşturalım.

 

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController <UITableViewDataSource, UITableViewDelegate>
@property (nonatomic, retain) IBOutlet UITableView *myTableView;
@end

 

myTableView değişkeni Interface Builder içinde oluşturulan UITableView'e işaret edecektir. Elbette bunu yapabilmek için Referencing Outlets altında belirtmemiz gerekir. UITableView'in içerisindeki veriyi doldurabilmesi için ViewController dosyasının UITableViewDataSource temsilcisine ihtiyacı vardır. Aynı zamanda kullanıcının UITableView üzerinde yaptığı işlemleri takip edebilmek için de UITableViewDelegate temsilcisine ihtiyaç duyarız. Gerekli eşleştirmeleri yaptıktan sonra ViewController.m dosyasına gelerek UITableViewDataSource içerisinde oluşturulması zorunlu metotları yazalım.

 

#pragma mark UITableViewDataSource
 
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"CountryCell"; UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil)
    {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
    }
 
    cell.textLabel.text = [TABLE_DATA objectAtIndex:[indexPath row]];
    cell.imageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"%@.png",[TABLE_DATA objectAtIndex:indexPath.row]]];
    return cell;
}
 
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return [TABLE_DATA count];
}

 

numberOfRowsInSection metodu tabloda yer alan her bölüm için kaç satır olacağını belirtir. Biz burada sadece bir bölüm kullanacağımızdan TABLE_DATA adlı dizinin uzunluğunu döndürebiliriz. Eğer birden fazla bölüm kullanacaksanız burada bir kontrol yapısı kullanmanız gerekir. Buradaki satır sayısının yanlış verilmesi verinin görüntülenmesinde problem yaratabilir.

cellForRowAtIndexPath metodu her satıra denk gelen hücrenin tasarımını oluşturduğumuz yerdir ve UITableViewCell sınıfında bir görsel öğe döndürmesi gerekir. Burada ilk olarak cell adında bir değişken tanımlıyoruz. cell bizim satırımızı tanımlayacaktır. dequeueReusableCellWithIdentifier metodu, daha önceden oluşturulmuş bir satır varsa bunun tekrar kullanılmasını sağlar. Bu şekilde kullanıcı yukarı ve aşağı giderken, her satır için sürekli bir hücre oluşturulması gerekmez. Eğer önceden oluşturulmuş bir hücre yoksa bu metot nil döner ve bizim hücremizi oluşturmamız gerekir. CellIdentifier ise oluşturulan hücrenin tekrar kullanılmasını sağlayan tanımlayıcıdır.

textLabel özelliği satıra denk gelen metin öğesini (UILabel) belirtir. Bu şekilde her satırda yer alacak yazıyı değiştirebiliriz. Aynı şekilde satırda eklemek istediğimiz bir resim dosyası varsa bunu da imageView özelliğiyle UIImageView içerisinde yerleştirebiliriz. İşimiz bittikten sonra return cell yazarak değerleri girilen hücrenin ilgili satırda oluşturulmasını sağlıyoruz.

NOT: UITableViewCell sınıfından ürettiğiniz sınıflarla kendi satır tasarımlarınızı oluşturabilirsiniz.

Bu aşamada kodu çalıştırdığımızda aşağıdaki ekranla karşılaşırız:

Burada dizinin elemanlarını tanımladığımız TABLE_DATA adında bir diziden aldık. Bu dizi de yanda listelenen ülke adlarını içeriyordu. Aynı şekilde her satıra denk gelen ülke bayraklarını da projeye ülkeadı.png şeklinde eklediğimiz resim dosyalarından oluşturmuş olduk.

Şimdi kullanıcı bu satırlardan birine tıkladığında bir eylem alınmasını sağlayalım. Bu amaçla UITableViewDelegate içerinden didSelectRowAtIndexPath metodunu kullanmamız gerekiyor. Kullanıcı herhangi bir satırı tıkladığında satırı bulunduğu bölüm ve kaçıncı satır olduğu bilgisi indexPath adlı değişken ile bize bildirilir. Oluşturduğumuz tablo sadece bir bölüme sahip olduğundan indexPath.row ile ilgili satır değerini alabiliriz. Amacımız, kullanıcı ekrandaki satırlardan birine tıkladığında ülke adının bir uyarı ekranında görüntülenmesi olacaktır.

 

#pragma mark UITableViewDelegate

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    UIAlertView *message = [[UIAlertView alloc] initWithTitle:@"Ülkeler"
        message:[TABLE_DATA objectAtIndex:indexPath.row]
        delegate:self
        cancelButtonTitle:@"Tamam"
        otherButtonTitles:nil];
    [message show];
}

 

Burada yaptığımız işlem tıklanan satır numarasını alarak dizinin ilgili elemanını çağırmak ve ekranda görüntülemektir. Aşağıda satır tıklandığında görüntülenen uyarı ekranını bulabilirsiniz.

ViewController.m dosyasınında tamamı ise aşağıdaki gibidir. Buradaki örnekte diziyi sabit bir makro gibi oluşturduk ancak siz bunu NSMutableArray sınıfında bir değişken alabilir, uzaktaki bir sunucudan yükleyebilir ya da bir veritabanından alabilirsiniz. Diğer bölümlerde bunlarla ilgili örnekler yapılacaktır.

 

//
//  ViewController.m
//  UITableViewExample
//

#import "ViewController.h"

@interface ViewController ()
@end
@implementation ViewController
@synthesize myTableView;

#define TABLE_DATA [NSArray arrayWithObjects:@"Türkiye",@"Amerika",@"Almanya",@"Fransa",@"Belçika", nil]
- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
}
- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
    [myTableView reloadData];
}

#pragma mark UITableViewDataSource
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"CountryCell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil)
    {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
    }
    cell.textLabel.text = [TABLE_DATA objectAtIndex:[indexPath row]];
    cell.imageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"%@.png",[TABLE_DATA objectAtIndex:indexPath.row]]];
    return cell;
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return [TABLE_DATA count];
}