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 ได้เลย ตามโค้ดด้านล่างนี้


#import "RootViewController.h"

@implementation RootViewController

NSArray *listData,*listColors;

...

...

@end

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

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

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

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


- (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];
}

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

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


// 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;
}

  • ในฟังก์ชั่น 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


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

จากโค้ดด้านบน เราเขียนโค้ดเพิ่มขึ้นแค่บรรทัดเดียวเอง คือการเปลี่ยนสีพื้นหลังใช้ฟังก์ชั่น [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 :)

About adaydesign

นักพัฒนาแอพพลิเคชั่นบนโมบาย [iPhone Android] คนหนึ่งซึ่งอยากจะบันทึกเรื่องราวของเส้นทางนักพัฒนาโมบายแอพพลิเคชั่นเอาไว้ในบล็อคน้อยๆ แห่งนี้ เผื่อจะแบ่งบันและแลกเปลี่ยนความรู้ให้กับคนอื่นๆ ได้บ้าง :) Mobile Application Developer; Flash Mobile, iPhone/iPad, Android Mobile Phone/Tablet and Blackberry Playbook.

Posted on มิถุนายน 23, 2011, in [Dev] iOS and tagged , . Bookmark the permalink. 8 ความเห็น.

  1. สอบถามหน่อยครับ ใน tableView didSelectRowAtIndexPath
    ผมอยากให้มันเปิด view ใหม่ที่สร้างไว้แล้ว แต่ไม่ได้เป็น addSubview:navController.view
    มันเขียนยังไงได้บ้างอ่ะครับ

    • หากใช้ storyboard ให้ลากเส้น segue ไปที่ view controller ใหม่ได้เลยครับ แล้วเรียกใช้ [self performseguewithidentifier: ชื่อ segue ] (ชื่อฟังก์ชั่นมันคล้ายๆ งี้ครับ ผมก็จำได้ไม่หมด)

      หากไม่ได้ใช้ storyboard
      หาก view controller เราเป็น view controller ธรรมดา ก็ [self presentModalViewController: ใส่วิวใหม่เข้าไป ]
      หากเป็น navigation controller ก้อใช้ [self.navigationcontroller pushViewController: ใส่วิวใหม่เข้าไป ]
      (ชื่อฟังก์ชั่นมันคล้ายๆ งี้ครับ ผมก็จำได้ไม่หมด)

  2. ขอบคุณมากครับ ตอนนี้ผมมีปัญหาใหม่ คือ ผมเปิด view ใหม่ได้แล้ว ผ่าน
    self.navigationcontroller pushViewController
    แต่ ตอนที่อยากจะปิด view ใหม่ เพื่อกลับมา view เดิม
    view เดิมมันค้าง ไม่ทำงานอ่ะครับ

  3. คือ ผมเปิด view ใหม่ ด้วย

    – (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {

    [tableView deselectRowAtIndexPath:indexPath animated:YES];

    DetailViewController *detailController = [[DetailViewController alloc] initWithNibName:@”DetailView” bundle:nil];
    [detailController changeSubjectText:[subject_data_Array objectAtIndex:indexPath.row]];

    navigationController = [[UINavigationController alloc] initWithRootViewController:detailController];

    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    [self.window addSubview:navigationController.view];
    [self.window makeKeyAndVisible];

    }

    แล้วใน view ใหม่ ผมจะมีปุ่ม close เขียนไว้ว่า

    – (void)doCloseView {
    NSLog(@”doCloseView”);

    [self.navigationController.view removeFromSuperview];

    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    self.viewController = [[MultipleViewController alloc] initWithNibName:@”MultipleViewController” bundle:nil];
    self.window.rootViewController = self.viewController;
    [self.window makeKeyAndVisible];

    }

    ปัญหาคือ ใน view แรก ที่มันกลับมา มันเหมือนเริ่มใหม่น่ะครับ
    ทั้งที่จริง จริงๆแล้ว ใน view แรก ก่อนเปิด view ใหม่ มันมีการ login ผ่านไปแล้ว
    แต่พอปิด view ใหม่ กลับมา view แรก มันต้อง login ใหม่น่ะครับ

    ผมอยากให้การเปิด view ใหม่ เป็นการเปิดขึ้นมาทับ view เดิม
    โดยที่ view เดิม ทำอะไรอยู่ ก็ปล่อยไว้อย่างงั้น
    แล้วพอปิด view ใหม่ ก็ปิดไปธรรมดา แล้วกลับมาทำงานที่ view เดิมต่อ น่ะครับ

    งงไหมครับ แต่ผม งง เพราะมือใหม่มากๆๆๆๆๆๆๆ ครับ

    • จากโค้ดด้านบนนิ ตัวผมเองก้อไม่เคยใช้แบบนี้นะครับ หลักๆ
      ถ้าจะให้ navigationcontroller เนี่ยเปิดไปหน้าต่อไปใช้ [self.navigationController pushViewController: ใส่ชื่อวิวเข้าไป]
      แต่ถ้าใช้ storyboard ก้อไม่ต้องทำแบบด้านบน แต่เรียกใช้ [self performSegueWithIdentifier: ชื่อ Segue] มันก้อจะไปหน้าตามเส้น segue ให้อัตโนมัติ

      หากอยากจะกลับ อันนี้เราต้องเขียนที่หน้าอื่นนะครับ เขียนว่า [self.navigationController popViewController] ใช้ได้ทั้งแบบใช้ storyboard และไม่ใช้ storyboard ครับ
      *ชื่อฟังก์ชั่นๆ มันจะคล้ายๆ ที่ผมเขียนนะครับ ลองหาดู

  4. เขียนโปรแกรม iOS จาก xCode เอาลงลองใช้ใน iPad ยังไง โดยไม่ต้องลงทะเบียนครับ

    คือ ผมกำลังอยู่ในช่วง ทดลอง ทดสอบ เขียนน่ะครับ (ยังไม่ค่อยเป็นเท่าไร)
    แต่ก็ได้ app ออกมาแล้ว 1 ตัว อยากจะเอาลง iPad
    เพื่อเอาไปลองใช้เล่นๆ ของตัวเอง ไม่ทราบว่าพอมีวิธีไหมครับ

    เพราะเห็นหลายๆครั้ง ที่เราสามารถโหลดโปรแกรมต่างๆ จากใน net
    มาเป็น file.dmg เอามาลงเองโดยไม่ผ่าน app store ยังได้เลย
    (ไม่รู้เค้าทำยังไง)
    ตอนจะลง iPad ก็แค่เตือนว่า โปรแกรมไม่ได้มาจาก app store จะลงไหม?
    เราก็ลงใช้งานได้ ไม่มีปัญหา

    เลยคิดว่า มันน่าจะมีวิธีน่ะครับ

    ใครพอทราบ ช่วยบอกขั้นตอน ตั้งแต่ทำที่ xCode เลยนะครับ
    เพราะตอนนี้ ผม test เป็นแค่กด command+R เพื่อดูใน Sim’ เป็นแค่นั้นเองครับ

    ขอบคุณมากครับผม

  5. เขียนโปรแกรม iOS จาก xCode เอาลงลองใช้ใน iPad ยังไง โดยไม่ต้องลงทะเบียนครับ

    คือ ผมกำลังอยู่ในช่วง ทดลอง ทดสอบ เขียนน่ะครับ (ยังไม่ค่อยเป็นเท่าไร)
    แต่ก็ได้ app ออกมาแล้ว 1 ตัว อยากจะเอาลง iPad
    เพื่อเอาไปลองใช้เล่นๆ ของตัวเอง ไม่ทราบว่าพอมีวิธีไหมครับ

    เพราะเห็นหลายๆครั้ง ที่เราสามารถโหลดโปรแกรมต่างๆ จากใน net
    มาเป็น file.dmg เอามาลงเองโดยไม่ผ่าน app store ยังได้เลย
    (ไม่รู้เค้าทำยังไง)
    ตอนจะลง iPad ก็แค่เตือนว่า โปรแกรมไม่ได้มาจาก app store จะลงไหม?
    เราก็ลงใช้งานได้ ไม่มีปัญหา

    เลยคิดว่า มันน่าจะมีวิธีน่ะครับ

    ใครพอทราบ ช่วยบอกขั้นตอน ตั้งแต่ทำที่ xCode เลยนะครับ
    เพราะตอนนี้ ผม test เป็นแค่กด command+R เพื่อดูใน Sim’ เป็นแค่นั้นเองครับ

    ขอบคุณมากครับผม

  6. ขอบคุณสำหรับบทความมากครับ

ใส่ความเห็น

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 / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s

%d bloggers like this: