(Tutorial iOS) Working with UITableView iOS

Salah satu komponen UI yang penting di iOS Apps dikenal dengan UITableView. Dengan UITableView, kita dapat menampilkan dalam bentuk list dari data set sederhana. Selain list sederhana, kita juga dapat mengkostum bukan hanya text saja melainkan dengan gambar atau yang lainnya. Pada tutorial kali ini saya akan menjelaskan bagaimana menampilkan list berupa text saja di dalam UITableView.

Untuk lebih jelasnya simak tutorial sederhana berikut :

Kita mulai dari Main.storyboard, buat sebuah ViewController untuk menampilkan list berikut ini.

Kemudian embed Navigation Controller lalu letakkan komponen Table View dan Table View Cell di dalamnya.

Atur atribut dari Table View Cell seperti dibawah ini. Di sini kita menggunakan style Basic (Text Saja)

Buat View Controller satu lagi untuk menampilkan detail dari list item dengan tampilan berikut ini.

Hubungkan kedua ViewController dengan segue.

Oke selanjutnya kita masuk ke coding.

Buka ViewController.h, sebelumnya kita harus meng-instance TableView dari storyboard terlebih dahulu.

Pada DetailController juga sama, instance label-label yang ada di storyboard.

Selanjutnya New File-> Cocoa Touch Class, dengan nama Item
Item.h

#import <Foundation/Foundation.h>

@interface Item : NSObject

@property (nonatomic, copy) NSString* itemId;
@property (nonatomic, copy) NSString* itemName;

+ (void) setItemId: (NSString*) itemId;
+ (void) setItemName: (NSString*) itemName;

@end

Item.m

#import "Item.h"

@implementation Item

+ (void) setItemId:(NSString *)itemId {
    self.itemId = itemId;
}

+ (void) setItemName:(NSString *)itemName {
    self.itemName = itemName;
}

@end

Buka kelas ViewController.h lalu implement UITableViewDataSource dan UITableViewDelegate.

#import <UIKit/UIKit.h>
#import "Item.h"
#import "DetailController.h"

@interface ViewController : UIViewController<UITableViewDataSource, UITableViewDelegate>

@property (weak, nonatomic) IBOutlet UITableView *tableView;

@end

Kemudian kita masuk ke ViewController.m, disini kita mengimplementasi beberapa method dari TableView diantaranya :

- (NSInteger) tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return 0;
}

Method ini untuk mengembalikan size atau length dari list data.

- (UITableViewCell*) tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    UITableViewCell* cell = [tableView dequeueReusableCellWithIdentifier:@"Identifier"];
   
    return cell;
}

Method ini untuk mengakses cell-cell dari table view per index.

- (void) prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
    
}

Method ini biasanya digunakan untuk berpindah ke ViewController lainnya. Karena tadi kita telah menambahkan segue maka untuk berpindah ke screen selanjutnya menggunakan method ini.

Berikut Source Code lengkapnya :
ViewController.m

#import "ViewController.h"

@implementation ViewController

NSString* const ITEM_CELL_ID = @"ITEM_CELL";
NSString* const ITEM_DETAIL_ID = @"ITEM_DETAIL";

NSMutableArray* itemList;

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    
    [self initMenu];
    
    self.tableView.dataSource = self;
    self.tableView.delegate = self;
    [self.tableView reloadData];
}


- (void) initMenu {
    itemList = [[NSMutableArray alloc] init];
    for (int i = 1; i <= 5; i++) {
        Item* item = [[Item alloc] init];
        [item setItemId:[NSString stringWithFormat:@"%i", i]];
        [item setItemName:[NSString stringWithFormat:@"%@%i", @"Item ", i]];
        
        [itemList addObject:item];
    }

}

- (NSInteger) tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return [itemList count];
}

- (UITableViewCell*) tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    UITableViewCell* cell = [tableView dequeueReusableCellWithIdentifier:ITEM_CELL_ID];
    
    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:ITEM_CELL_ID];
    }
    
    Item *item = [itemList objectAtIndex:indexPath.row];
    
    cell.textLabel.text = [item itemName];
    
    return cell;
}

- (void) prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
    if ([segue.identifier isEqualToString:ITEM_DETAIL_ID]) {
        NSIndexPath* index = [self.tableView indexPathForSelectedRow];
        Item *item = [itemList objectAtIndex:index.row];
        
        DetailController* destView = segue.destinationViewController;
        destView.item = item;
    }
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}


@end

DetailController.h

#import <UIKit/UIKit.h>
#import "Item.h"

@interface DetailController : UIViewController

@property (weak, nonatomic) IBOutlet UILabel *txtItemId;
@property (weak, nonatomic) IBOutlet UILabel *txtItemName;

@property Item *item;

@end

DetailController.m

#import "DetailController.h"

@interface DetailController ()

@end

@implementation DetailController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
    if(self.item != nil){
        [self.txtItemId setText:[NSString stringWithFormat:@"%@%@", @"ID : ", self.item.itemId]];
        [self.txtItemName setText:[NSString stringWithFormat:@"%@%@", @"NAME : ", self.item.itemName]];
    }
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}


@end

Terakhir jalankan, maka hasilnya sepeti berikut :

Selesai juga…. Huffttt

Semoga agan pembaca sekalian tidak bingung dengan penjelasan saya *Yang nulis aja bingung :v

Source Lengkap bisa dilihat di https://github.com/wimsonevel/iOS-UITableView
*star/fork/follow ya :)

Sekian dan Semoga bermanfaat
Happy Coding :)

Share this :