Xcode Programming VIII : NSArray & NSDictionary With Table View

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

ตัวอย่างที่ผมต้องการนะครับ

จากรูปตัวอย่าง ถ้าเราใช้วิธีการเขียนการเขียน Cell ที่ต่างกันแบบในบทความก่อน เราจะต้องเขียนแบบนี้ในส่วนของ Config Cell ครับ

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

• สร้าง Project ใหม่ นำ Object TableView มาวางใน Interface
• ทำการประกาศ Protocol UITableViewDataSource และ UITableViewDelegate
• สร้าง Object  IBOutlet สำหรับ TableView
• @synthesize และ - (void) dealloc {}
• เชื่อม Code กับ TableView Object ใน .xib File  

สิ่งที่ทำด้านบนเป็นการสร้างแม่แบบสำหรับการทำงานกับ TableView นั่นเองครับ ( วิธีทำโดยละเอียด สามารถดูได้ในบทความก่อนหน้านี้ )

• เพิ่ม Code ต่อไปนี้ลงไปใน ViewController.h

## อธิบาย Code ##

เป็นการสร้าง Object NSArray และสร้าง Method  ปกติครับ

• เพิ่ม Code ต่อไปนี้ลงไปใน ViewController.m

3 บรรทัดนะครับ

## อธิบาย Code ##

บรรทัดที่ 1 และ 2 เป็นหลักการจองพื้นที่ในหน่วยความจำและการคืนพื้นที่ให้หน่วยความจำในการเลิกใช้งาน Object NSArray นั่นเองครับ ส่วนบรรทัดที่ 3 เป็นการเรียกใช้งาน Method ตั้งแต่โปรแกรมเริ่มทำการโหลด View ขึ้นมาเลยครับ เรียกว่าแทบจะทำงานทันทีที่เริ่มโปรแกรมก็ว่าได้ครับ

ทำไม @synthesize  ถึงมีการแทนค่าด้วยเครื่องหมาย =

ความหมายก็คือการตั้งชื่อให้ Object นั้นๆ เหตุผลเพราะว่าในบางครั้งที่ชื่อ Object เหมือนกัน Xcode จะทำให้อาจเกิดความผิดพลาดขึ้นได้นั่นเอง ( ถ้าไม่มีก็ได้ครับ )

หลังจากที่เราเรียกใช้งาน Method initialArray แล้วแต่เรายังไม่ได้เขียนคำสั่งการทำงานของ Method เลย ดังนั้นให้เราไปเขียนคำสั่งตามนี้ครับ

• เพิ่ม Method ไปในViewController.m

## อธิบาย Code ##

เป็นการจองพื้นที่ในหน่วยความกับความทั้งกำหนดค่าเริ่มต้นให้กับ Array ที่เราได้สร้างไว้นั่นเองครับ

• แก้ไขในส่วนของ Config Cell ใน cellForRowAtIndexPath  

## อธิบาย Code ##

สร้าง NSString มาเก็บ ข้อความใน Array ทีละ Index แล้วนำไปแสดงทีละ Cell นั่นเองครับ เพื่อให้เข้าใจได้ง่ายขึ้นให้ลอง Build & Run ดูครับ

เราจะสังเกตได้ว่า DetailTextLabel.text ยังไม่มีอะไรแสดง เราก็สร้าง NSArray มาเก็บข้อความส่วนของ Detail อีกตัวหนึ่งแล้วนำไปแสดงครับ

คราวนี้ผมจะแนะนำอีกวิธีหนึ่งที่สามารถสร้าง Cell ในแบบที่เราต้องการเหมือนกับการใช้ NSArray อย่างเดียวครับ นั่นคือ NSDictionary ครับ

NSDictionary คืออะไร ?

NSDictionary เป็นข้อมูลชุดคล้ายกับ Array แต่สามารถเก็บได้ทั้งค่าข้อมูล (Value) และคำค้น (Key) ครับลองมาดูลักษณะการใช้งานของ NSDictionary ดูนะครับ

• แก้ไข Code ใน Method initailArray

## อธิบาย Code ##

1. สร้าง Object NSDictionary ชื่อ Starwar1 พร้อมทั้งกำหนดค่าเริ่มต้น "Starwar Episode I" โดยมี Key คือ "title" และ "The Phantom Menace" โดยมี Key คือ "detail"
2. Object NSDictionary ชื่อ Starwar2 พร้อมทั้งกำหนดค่าเริ่มต้น "Starwar Episode II" โดยมี Key คือ "title" และ "Attack of the Clones" โดยมี Key คือ "detail"
3. นำ Array ที่ได้ทำการประกาศเอาไว้มาเก็บ Object NSDictionary 

• เปลี่ยนแปลง Code ใน Method cellForRowAtIndexPath ในส่วนของ Config Cell

 ## อธิบาย Code ##

1. สร้าง Object NSDictionary มาเก็บข้อมูล  Array ทีละ Index
2. สร้าง NSString มาเก็บข้อมูลแต่ละชุด
3. นำไปแสดงใน Cell

ทดสอบโดยการ Build & Run ดูครับ

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

ยกตัวอย่างเราจะเก็บข้อมูลของคน 10 คน

• NSArray จะเก็บชื่อของคน 10 คน หากจะเก็บข้อมูลนามสกุลของคน 10 คนก็สร้าง NSArray อีกตัวมาเก็บ
• NSDictionary จะเก็บข้อมูลทั้งหมดของคน 1 คน หากจะเก็บข้อมูลของอีกคน ก็ต้องสร้าง NSDictionary อีกตัวมาเก็บ

ซึ่งแน่นอนครับวิธีเก็บข้อมูลต่างกัน ก็ต้องมีวิธีเรียกใช้งานต่างกัน

• NSArray สามารถเรียกใช้ค่าใน Array ได้โดยตรง
• NSDictionary ใช้ Key เป็นตัวอ้างถึงในการเรียกใช้งานค่า

บทความนี้ก็มีแค่นี้ครับ อย่างเคยนะครับถ้ามีอะไร ฝากข้อความไว้ได้เลยครับ แล้วผมจะมาตอบให้ครับ