Xcode Programming VI : Table View Part II

กลับมาอีกครั้งนะครับ หายไปนานพอสมควรเลย แหะๆ แต่ต่อจากนี้ผมจะลงให้อย่างน้อยอาทิตย์ 1 บทความแล้วกันนะครับ

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

วันนี้เราจะได้ Table View หน้าตาแบบนี้ครับ

• สร้าง New Project เลือก Single View Application
• ตั้งชื่อ Project โดยไม่เลือกเครื่องหมายถูกเลย
• ไปที่ Interface Builder นำ Table View Object มาวาง

หลังจากที่เราวาง Object ลงไปใน Interface Builder แล้วเราก็ต้องมาเขียน code เพื่อเชื่อมวัตถุ เหมือนเดิมครับ

• เปลี่ยนแปลง Code ใน ViewController.h เป็นดังนี้

## อธิบาย Code ##

@interface ViewController : UIViewController <UITableViewDataSource, UITableViewDelegate>

เป็นการกำหนด Protocol ของ Project นั่นเองครับ เนื่องจากการที่เราจะใช้ UITableView เราจำเป็นที่ต้องมี Object Helper มาช่วยในการทำงาน โดยแบ่งเป็น DataSource และ Delegate นั่นเองครับ ส่วนแต่ละตัวมีหน้าที่อย่างไร ในบทความพิเศษผมไปบอกไปแล้วนะครับ

@property (nonatomic, strong) IBOutlet UITableView *tableview;

สร้าง Object ของ UITableView ขึ้นมาเชื่อมต่อกับวัตถุที่อยู่ใน Interface Builder พร้อมกำหนดคุณสมบัติของวัตถุนั่นเองครับ

• เพิ่ม Code ใน ViewController.m ดังนี้

## อธิบาย Code ##

@synthesize tableview;

จองพื้นที่ในหน่วยความจำให้วัตถุ tableview นั่นเองครับ

-(void) dealloc {

 [super dealloc];

 [tableview release];

}

เป็นการคืนพื้นที่ที่จองไว้สำหรับใช้งานวัตถุ tableview กลับคืนไปยังหน่วยความจำนั่นเองครับ Method นี้ทาง Xcode มีมาให้ครับ โดย Xcode จะตรวจสอบเองครับว่า เมื่อไหร่ถึงจะไม่ได้ใช้งานวัตถุนั้นแล้วและจะคืนพื้นที่ที่จองไว้โดยอัตโนมัติครับ

• ไปที่ .xib File ทำการเชื่อมวัตถุกับ Code รวมไปถึงเชื่อม Datasource และ Delegate
• เลือก Object TableView
• Drag เชื่อต่อ Object ตามรูป

อย่าลืมเลือก Object ก่อนนะครับ โดยการกด TableView Object ใน Interface

• ในขั้นตอนการเลือก Referencing Outlets ให้เลือกวัตถุที่เราสร้างขึ้นใน Code

ของผมเลือก tableview ครับ

เมื่อเราทำการเชื่อมเสร็จเรียบร้อยแล้วคราวนี้เราก็ต้องนำ required method มา implement ใส่ไว้ใน ViewController.m ครับ แล้วเราจะรู้ได้อย่างไรว่า method ไหนที่เป็น required method บ้าง ?

ให้เราเปิด Document  ของ UITableView ขึ้นมาครับ ( ยังจำวิธีการเปิด Document กันได้นะครับ ) โดยการกดปุ่ม option แล้วนำลูกศรไปกดที่ UITableView ใน Code ครับ

จะได้แบบนี้ครับ

ให้เรากดไปยัง UITableView Class Reference ครับ แล้วอ่านในส่วนของ Overview ไปเรื่อยจะเจอข้อความนี้ครับ

อย่างที่ผมได้อธิบายไปแล้วครับ

หลังจากที่ทราบแล้วเราก็ลองเข้าไปดู Document ของ UITableViewDataSource และ UITableViewDelegate ครับ ซึ่งในส่วนของ Task จะบอกไว้ว่า Method ไหนที่จำเป็นต้องมีในการใช้งาน UITableView บ้างครับ โดยใน UITableViewDataSource มี 2 Required method ส่วน UITableViewDelegate ไม่มีครับ

Task ในส่วนของ UITableViewDataSource

• นำ Method ทั้งสองมาใส่ใน ViewController.m  (กดตาม Link ชื่อ Method นะครับ) หรือจะเอา Code เก่าในบทความ TableView Part 1 มาใช้ก็ได้ครับ เพราะใน Document ของ Xcode เองไม่ได้มี Code การตั้งค่าเบื้องต้นของ Cell มาให้

ทีนี้ลอง Build & Run เพื่อทดสอบดูครับ ถ้าสามารถ Run ได้แล้วออกมาตามที่ต้องการ แปลว่าความรู้เก่าๆ ยังอยู่ครับ ^ ^ ทำต่อไปได้เลยครับ

• เลือก .xib File แล้วเลือก Object TableView
• เลือก Attributes inspector แล้วเปลี่ยน Style ของ TableView จาก Plain เป็น Grouped

4 ขั้นตอนครับ

หลังจากเสร็จเรียบร้อยแล้วลอง Build & Run ดูครับ จะเห็นได้ว่ารูปแบบตารางของเราเปลี่ยนไปแล้ว

• เพิ่ม  Code ในส่วนของ ViewController.m

เป็น Method ที่บอกจำนวน Section ใน TableView ของเรานั่นเองครับถ้าเราลอง Build & Run จะเห็นได้ว่าตารางของเราจะถูกแบ่งเป็นตารางย่อยๆ ตามจำนวนตัวเลขที่เรา Return ใน Method นี้นั่นเองครับและในแต่ละ Section จะมีจำนวนแถวเท่ากันหมด

ของผม 3 Section และ Section ละ 3แถว

พึ่งได้แค่นี้เองบทความก็ยาวมากซะแล้ว เอาเป็นว่าผมขออนุญาติแบ่งเป็นสองบทความนะครับ