TableView trong IOS (Simple TableView Project)

I. Thông tin chung:

– Nếu là một người sử dụng IOS lâu ngày thì bạn đã xem rất nhiều các ví dụ về table view. Đó chính là ứng dụng “Contact” và “Mail” của Apple (Không chỉ trên Iphone mà trên Ipad cũng là table view). Table View chính là cách tiện lợi nhất để người

– Do đặc tính của table view nên tôi quyết định sẽ giữ nguyên 2 thuật ngữ table và table view trong bài hướng dẫn này cho các bạn làm quen
II. Nội dung chính:
1. Các thứ cần lưu ý khi bắt đầu một table view:
– Number of Sections: Số lượng những phần trong table view. Những phần này được chia theo chiều dọc để làm cho table trở nên dễ hiểu, dễ nhìn hơn
– Number of Rows: Số lượng dữ liệu trong tableview để Xcode chuẩn bị để hiển thị
– Data inside each row: Dữ liệu hiện ra thế nào trong từng dòng

2. Lập trình với table view:
– Bây giờ chúng ta có thể bắt đầu với table view. Đây là các bước để chúng ta bắt đầu làm việc để có được một table view đơn giản:
+ Tạo một khung sườn cho chương trình
+ Tạo ra một vài dữ liệu để đưa vào trong table
+ Tạo ra một table view
+ Kết nối với datasource và delegate của table
+ Hoàn tất vài lệnh tương tác đơn giản với table view

a. Tạo khung sườn cho chương trình:
– Bạn tạo ra một chương trình (New Project)
– Tạo thêm một NSMutableArray lkTableData để lưu trữ dữ liệu.
– Tạo UILabel lblNotice để ghi nhận sự kiện click vào trong từng Cell
– Tạo UITextView txvNotice để ghi ra những thành phần có trong lkTableData

@property (nonatomic, strong) NSMutableArray *lkTableData;
@property (strong, nonatomic) IBOutlet UILabel *lblNotice;
@property (strong, nonatomic) IBOutlet UITextView *txvNotice;

* Trong IB, ta xây dựng các control như sau:
+ Một TableView để hiển thị dữ liệu
+ Một Label để ghi nhận sự kiện
+ Một UITextView để ghi nhận các thành phần có trong lkTableData
* Chúng ta sẽ có như trong hình:

* Lưu ý: Bạn cần phải set up DataSource và Delegate cho TableView để nó có thể chạy được trong chương trình. Bạn nhấn chuột phải vào trong Table View sẽ thấy hình như sau. Lúc này, dataSource và delegate chưa có kết nối. Bạn giữ Ctrl bấm vào cái vòng tròn rồi kéo vào File’s Owner. Sau khi có được hình như thế này là Okie:

b. Tạo dữ liệu mẫu để đưa vào trong table view:
* Khi view được tạo ra chúng ta thêm vào một số những item để test dữ liệu xem có thực sự TableView hoạt động hay không? Và ở đây tôi sẽ hiển thị nó lên trên TextView để chúng ta có thể tham khảo được những item nào có trong lkTableData.

– (void)viewDidLoad
{
[super viewDidLoad];
self.lkTableData = [[NSMutableArray alloc] init];

for (NSUInteger i=0; i<10; i++) {
NSString *dataString = [NSString stringWithFormat:@”Item %d”, i];
[self.lkTableData addObject:dataString];
}

NSString *messageString = [NSString stringWithFormat:@”The lkTableData array contains %@”, self.lkTableData];
_txvNotice.text = messageString;
}

Đầu tiên phải set số section của TableView và số dòng (Row) được hiển thị trong đó.

-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
return 1;
}

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

Set up phần hiển thị trên Table:

-(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 = [self.lkTableData objectAtIndex:indexPath.row];

return cell;

}

c. Thêm vào các sự kiện:
Đây là sự kiện khi người dùng chạm vào một dòng (row). Ở đây, tôi sẽ thay đổi thông báo lblNotice thành dòng mà người sử dụng chạm vào để chúng ta có thể thấy được việc chúng ta có thể bắt được những sự kiện này thành công:

-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
NSString *messageString = [NSString stringWithFormat:@”You tapped row %d”, indexPath.row];
_lblNotice.text = messageString;
}

III. Kết luận:
– Table view là một trong những hỗ trợ cho người dùng rất tốt để giúp cho chương trình hiển thị đồ họa tốt hơn dễ dàng hơn cho người sử dụng.

Source Code:

Google Drive: https://docs.google.com/file/d/0B3v7a0gMgVkBUG4xamUxWVY1aTQ/edit

Mediafire: http://www.mediafire.com/download.php?u54dk28ybtj540y

Tagged: , , , , , , , , , , , , , , , , , ,

2 thoughts on “TableView trong IOS (Simple TableView Project)

  1. blue January 30, 2013 at 2:16 am Reply

    chào bạn, mình mới học ios, mình dang làm 1 chuong trình cho ipad va iphone, mình dùng storyboard. trong đó có sử dụng tableview. nhưng đối với iphone thì click chuyển sang trang detail vì màn hình nhỏ, còn với ipad mình muốn nó nằm trên cùng 1 trang(giống như master detail) nhưng vì mình làm cho iphone nên không biết áp dụng sao cho nó hiệu quả. bạn có thể chỉ mình cách làm được không. thanks bạn nhiều.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: