วันศุกร์ที่ 24 มิถุนายน พ.ศ. 2554

iPhone: Basic UITableView Example

iPhone: Basic UITableView Example
จากบทความก่อนๆ ที่เกี่ยวกับ UITableView คงทำให้เพื่อนๆ เข้าใจโครงสร้างและระบบของตัว UITableView มาบ้างแล้วนะครับ ต่อมาในบทความนี้ผมจะพามาลองเล่นกับ UITableView ในการใช้งานจริงกันเลยว่า เราจะจัดการการแสดงผลของข้อมูลบนเทเบิลวิวได้อย่างไร


ในบทความนี้จะพูดเกี่ยวกับการแสดงผลรายการในเทเบิลวิว แสดงผลการกดรายการในเทเบิลวิว ตัวอย่างการแสดงชื่อสีและเมื่อกดแล้วเปลี่ยนสีพื้นหลังของเทเบิลเป็นตามสีที่กด ฟังก์ชั่นที่จะได้ใช้งานได้แก่

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

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

  • - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath


1) เริ่มต้นด้วยการสร้างโปรเจคแบบ Navigation-based ก่อนนะครับ จะได้ง่ายๆ


2) มาดูที่ไฟล์ RootViewController.m เลยนะครับ เราจะมาสร้างตัวแปรเก็บชื่อสีและค่าของสีกันก่อน ตัวแปรสองตัวนี้เป็นตัวแปรชนิด NSArray ซึ่งเราจะประกาศแบบ Local นะครับ โดยประกาศไว้ที่ .m ได้เลย ตามโค้ดด้านล่างนี้

[sourcecode langauge="objc"]

#import "RootViewController.h"

@implementation RootViewController

NSArray *listData,*listColors;

...

...

@end

[/sourcecode]

เราทำการประกาศตัวแปร listData และ listColors เอาไว้เพื่อใช้งานดังนี้

  • listData ใช้แสดงรายชื่อของสี

  • listColors ใช้แสดงสีพื้นหลังเทเบิลเมื่อกดรายการสีตามชื่อ


ทำไมถึงกำหนดเป็น NSArray ? เหตุผลที่เรากำหนดเป็น NSArray เนื่องจาก จำนวนสมาชิกมีเยอะกว่า 1 ตัว คงจะไม่เหมาะที่จะสร้างตัวแปรหลายๆ ตัวนะครับ และ ข้อมูลสมาชิกที่จะใส่ลงไปนั้นเรารู้อยู่แล้วว่าต้องมีกี่ตัว และจะไม่ถูกเปลี่ยนแปลงภายหลัง

3) การกำหนดค่า NSArray ทั้งสองตัว ตัวแรกเราจะกำหนดให้เป็น NSString ส่วนตัวที่สองจะกำหนดให้เป็นค่าสีคือ UIColor  เราจะกำหนดค่าต่างๆ ของอาเรย์ในฟังก์ชั่น viewDidLoad เนื่องจากเป็นฟังก์ชั่นเริ่มเมื่อวิวนี้ถูกโหลดเสร็จแล้ว ตามโค้ดด้านล่างครับ

[sourcecode language="objc"]

- (void)viewDidLoad{
[super viewDidLoad];

[self setTitle:@"UITableView Demo (2)"];

listData = [[NSArray alloc] initWithObjects:@"Red",@"Green",@"Blue",@"Orange",@"Purple",@"Yellow", nil];
listColors = [[NSArray alloc] initWithObjects:[UIColor redColor],[UIColor greenColor],[UIColor blueColor],[UIColor orangeColor],[UIColor purpleColor],[UIColor yellowColor],nil];
}

[/sourcecode]

จะสังเกตได้ว่า การใส่ค่าสมาชิกของอาร์เรย์ในแต่ละตัวไม่เหมือนกันนะครับ ตัวแรก listData ใส่สมาชิกเป็น NSString @"Red" ส่วน listColors ใส่สมาชิกเป็น UIColor [UIColor redColor] แต่ฟังก์ชั่นที่ใช้สร้างอาร์เรย์เหมือนกันคือ initWithObjects: ... เนื่องจากเราสามารถสร้างอาร์เรย์ได้จาก Object หลายๆ ตัว ขึ้นอยู่กับว่าเราจะนำไปใช้อะไร หากเราใช้แสดงข้อมูลตัวหนังสือ ใช้ NSString หากเราใช้แสดงสี ก้อใช้ UIColor ให้ตรงกับที่เราจะนำไปใช้

4) เมื่อเรากำหนดค่าของ อาร์เรย์ เรียบร้อยแล้ว ต่อไปเราจะมาใส่ค่าในฟังก์ชั่น datasource ของเทเบิลวิว กัน

[sourcecode language="objc"]

// Customize the number of sections in the table view.
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
return 1;
}

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

// Customize the appearance of table view cells.
- (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] autorelease];
}

// Configure the cell.
cell.textLabel.text = [listData objectAtIndex:indexPath.row];
return cell;
}

[/sourcecode]

  • ในฟังก์ชั่น numberOfSectionsInTableView กำหนดค่า section = 1

  • ในฟังก์ชั่น numberOfRowsInSection กำหนดค่า row = [listData count] เป็นการบอกจำนวนสมาชิกของอาร์เรย์ listData

  • ในฟังก์ชั่น cellForRowAtIndexPath กำหนดค่าการแสดงผลในแต่ละแถว ให้ cell.textLabel.text ด้วย ค่าในอารเรย์ listData โดยใช้ฟังก์ชั่น [listData objectAtIndex: ..(index).. ]


อธิบายเพิ่มเติม เกี่ยวกับ NSIndexPath ในตัวแปร indexPath จะมีค่าที่เก็บคือ row บอกลำดับแถว และ section บอกลำดับกลุ่ม วิธีใช้ indexPath.row หรือ [indexPath row] / indexPath.section หรือ [indexPath section]

พอเสร็จขั้นตอนนี้เราลองรันโปรแกรมดูก่อน


5) ในขั้นตอนต่อไป เมื่อเรากดที่รายการสีใดสีหนึ่งแล้วให้เปลี่ยนสีเทเบิลวิวไปเป็นสีนั้นเลย โดยเราจะไปเขียนเพิ่มรายละเอียดใน delegate function ในฟังก์ชั่น cellForRowAtIndexPath

[sourcecode language="objc"]

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
[self.view setBackgroundColor:[listColors objectAtIndex:indexPath.row]];
}

[/sourcecode]

จากโค้ดด้านบน เราเขียนโค้ดเพิ่มขึ้นแค่บรรทัดเดียวเอง คือการเปลี่ยนสีพื้นหลังใช้ฟังก์ชั่น [self.view setBackgroundColor: ..(Color)..]

self.view หากดูจากไฟล์ .xib จะเห็นว่า view ลิ้งมาที่ tableView ดังนั้น self.view ก็คือ tableView นั้นเอง การเปลี่ยนสี self.view ก้อคือการเปลี่ยนสี tableView ของเรา

พารามิเตอร์ที่เป็นสี UIColor เราเอามาจากอาเรย์ listColors ด้วยฟังก์ชั่น [listColors objectAtIndex:indexPath.row] ค่าที่ส่งออกมาจะเป็นค่าของ UIColor ที่เราใส่เข้าไปตอนแรก

เมื่อรันดูผลลัพธ์โปรแกรมและกดดูแต่ละพื้นหลังของเทเบิลวิวจะเปลี่ยนตามสีที่เรากด



เท่านี้ก็เรียบร้อยแล้วครับ Tutorial การเปลี่ยนสีพื้นหลังเทเบิล ด้วยการกดชื่อสีที่แสดงขึ้นมา เป็นอย่างไรบ้างครับในการเขียนโค้ดแสดงค่าต่างๆ เพื่อโชวในเทเบิลวิว หากเพื่อนๆ คนไหนติดปัญหาที่จุดไหนก็เม้นมาได้เลยนะครับ ในบทความต่อไปจะพูดถึงการปรับแต่งโค้ดในฟังก์ชั่น cellForRowAtIndexPath ว่า DefaultStyle นั้นมีการกำหนดค่าอะไรบ้างและเราสามารถนำมาใช้อะไรได้บ้าง นะครับ ติดตามกันต่อในบทความหน้าครับ สวัสดีครับ

บทความที่เกี่ยวข้อง

adaydesign :)

ไม่มีความคิดเห็น:

แสดงความคิดเห็น