iPhone: UITableView Tutorial

iPhone: UITableView Tutorial

วันนี้เรามาเริ่ม Tutorial ง่ายๆ ของ UITableView กันดีกว่า เนื่องจาก UITableView นั้นเป็น View ที่ถูกใช้มากที่สุดเลยก็ว่าได้ หากเราใช้  UITableView เป็นแล้วหละก็สามารถเขียนแอพรายการอาหาร หรือรายการอะไรสักอย่างขึ้นได้อย่างไม่ยากเลยครับ

ในเนื้อหาบทความชุด UITableView Tutorial ผมจะนำเสนอบทเรียนตั้งแต่การเริ่มต้นด้วยการใช้ UITableView จนไปถึงการประยุกต์ใช้ UITableView เพื่อแสดงผลแบบซับซ้อนต่างๆ ด้วยครับ

ตัวอย่าง Application ที่นำ UITableView ไปใช้

จากภาพ screen shot ของแอพด้านบนที่ผมนำมาเป็นตัวอย่าง ว่าแอพอย่าง facebook, FriendFeed, Four Squre, Hot Potato และ Gowalla ต่างก็ใช้ UITableView ในการนำเสนอ Activity Feed ต่างๆ ของ Social Network นะครับ ลักษณะหน้าตาของ UITableView ของแต่ละแอพพลิเคชั่นนั้นก็แตกต่างกันไปตามข้อมูลที่นำมาโชว์ ซึ่งการปรับแต่ง UITableView นั้นผมจะกล่าวถึงในช่วงหลังครับ เรามาเริ่มกันเลยดีกว่ากับ UITableView

1. การเริ่มต้นสร้างโปรเจคแบบ Navigation Controller จะช่วยให้เราเห็นภาพของ UITableView ได้ชัดเจนที่สุด

เปิดโปรแกรม XCode (ผมใช้ XCode4 นะครับ) ขึ้นมานะครับและเลือกที่ Navigaion-based Application กด Next และใส่ชื่อแอพของเราแล้วเริ่มกันได้เลย

2. เรามาดูที่ไฟล์โค้ดกันก่อนเลยนะครับว่ามีส่วนไหนที่เกี่ยวข้องกับ UITableView บ้าง

จากรูปด้านบนเป็นส่วนของโค้ดที่อยู่ใน Project ที่เราได้สร้างขึ้นเมื่อกี้นะครับ เมื่อดูที่ไฟล์ .h และ .m ที่อยู่ด้านนอกจะเห็นว่ามีทั้งหมด 4 ไฟล์ได้แก่

• DemoUITableViewAppDelegate.h
• DemoUITableViewAppDelegate.m
• RootViewController.h
• RootViewController.m

ไฟล์ที่เราสนใจคือ RootViewController นะครับ เนื่องจากไฟล์นี้จะเป็นไฟล์ที่เป็นคลาสของ UITableViewController ดูได้จากโค้ดใน .h ดังนี้ครับ

2.1 ไฟล์ RootViewController.h

@interface RootViewController : UITableViewController {

}
@end

หลังชื่อคลาส RootViewController จะ extends UITableViewController อยู่

2.2 ไฟล์ RootViewController.m ดูที่ฟังก์ชั่นต่างๆ ของ UITableViewController ที่เราต้องเขียนเข้าไป เนื่องจากคลาส UITableViewController ได้บังคับให้ implement ฟังก์ชั่นเหล่านี้

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

เป็นฟังก์ชั่นที่เราต้องใส่ค่าจำนวนแถวที่จะแสดงใน TableView ด้วยการ return ค่า int

ใส่ค่าไปก่อนเลยได้นะครับ เช่น return 0 เพื่อจะได้รันโปรแกรมผ่าน

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

เป็นฟังก์ชั่นที่เราสามารถปรับแต่ค่าของ cell ที่จะแสดงใน TableView ในตัวอย่างใช้ค่าของ UITableViewCellStyleDefault โดยจะสามารถปรับค่า ImageView, Text Label และ Detail Text Label ได้

ส่วนฟังก์ชั่น

-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView

เป็น optional datasource function จะ implement หรือไม่ก็ได้ โดยที่หากไม่ implement จำนวน section จะเท่ากับ 1 โดยอัตโนมัติ (ต้องลบฟังก์ชั่นนี้ออกนะครับ หากไม่ต้องการเขียน) แต่หากเราใช้มากกว่าหนึ่ง section จำเป็นต้อง return จำนวน section ที่เราใช้ออกไปด้วยนะครับ

3. UITableViewDelegate  และ UITableViewDatasource

เพื่อนๆ บางคนอาจจะสงสัยว่า ฟังก์ชั่นต่างๆ ของ UITableViewController เราจะเอามา implement เพิ่มเติมได้อย่างไร และใช้ยังไง? ผมจะอธิบายที่มาก่อนนะครับ

UITableViewController มี interface อยู่ 2 ตัวคือ UITableViewDelegate และ UITableViewDatasource ทั้งสอง interface นี้ทำงานแตกต่างกันคือ

UITableViewDelegate จะจัดการเกี่ยวกับ Event ต่างๆ เช่น การกดที่รายการใน TableView, การ delete, การเลื่อนตำแหน่ง, การกดที่ปุ่ม detail disclosurebutton เป็นต้น ฟังก์ชั่นทั้งหมดมีดังรูปด้านล่างนะครับ ฟังก์ชั่นที่อยู่ด้านล่าง @optional คือเราจะ implement หรือไม่ก็ได้ (จะเห็นว่าฟังก์ชั่นของ UITableViewDelegate จะมีแต่ optional ดังนั้นจึงต้องเลือกมาใช้ตามความเหมาะสมครับ)

UITableViewDatasource จะจัดการเกี่ยวกับ การจัดการข้อมูล เช่น มีกี่ row, มีกี่ section, การแสดง cell ในแต่ละ row เป็นต้น ฟังก์ชั่นทั้งหมดมีดังรูปด้านล่างนะครับ ฟังก์ชั่นที่อยู่ด้านล่าง @optional คือเราจะ implement หรือไม่ก็ได้

4. ในส่วนของการสร้าง Interface เราจะมาดูที่ไฟล์ RootViewController.xib จะพบว่า RootViewController นั้นเป็น UITableView ดังรูป

ใน Interface Builder นั้นจะแสดงตัวอย่างเฉพาะของรายการใน tableview โดยที่รายการต่างๆ นั้นเราจะต้องไปจัดการเขียนโค้ดใส่รายการต่างๆ นั้นเอง ปกติใช้ Array เป็นตัวเก็บรายการของเรา จะพูดในบทความหน้าครับ

ใน Interface Builder นั้น tableview ของเรา เราสามารถปรับค่าต่างๆ ได้นะครับ เช่น ปรับความสูงของแต่ละ cell, ปรับการแสดง scrollbar, เลือกแบบของ tableview จะเป็นแบบ Plain หรือ Group เป็นต้น อันนี้ก็เก็บไว้ในบทความหน้าเช่นกัน

5. เมื่อสร้างโปรเจคเรียบร้อยแล้ว มาลองกดรันโปรแกรมเลยแล้วกัน ว่าจะเกิดอะไรขึ้น เมื่อรันโปรแกรมดูแล้วจะเห็นดังภาพนี้

จะเห็นว่าไม่มีรายการอะไรมาแสดงเลยนะครับ เพราะเราต้องไปเขียนโปรแกรมเพิ่มเติมนั้นเอง

หาก!! เพื่อนๆ คนไหนรันแล้ว error เพราะยังไม่ได้ใส่ค่าในฟังก์ชั่นต่างๆ กลับไปดูในข้อ 2.2 นะครับ

บทความแรกของ UITableView เป็นอย่างไรบ้างครับพอจะเข้าใจหลักการการทำงาน การแสดงของ UITableView เพิ่มขึ้นหรือป่าวครับ เตรียมพร้อมที่จะลงมือเขียนโปรแกรมกับ UITableView กันหรือยังครับ ติดตามได้ในบทความหน้านะครับ จะพูดถึงการปรับแต่ UITableView ใน Interface Builder หากเพื่อนๆ คนไหนต้องการให้เพิ่มเนื้อหาส่วนไหนของ UITableView หรือแนะนำหละก็เม้นเข้ามาได้เลยนะครับ สวัสดีครับ

Reference

• UITableView Class Reference

adaydesign :)