Xcode Programming XVII : Story Board ( Part II )

ทำต่อจากบทความที่แล้วกันเลยนะครับ

• เลือก Tab Bar Controller >> คลิกขวาค้างแล้วลากไปยัง Navigation Controller >> เลือก View Controller

จะเห็นว่า Tab Bar มีการเพิ่ม Item เข้าไปและชี้ไปยัง Navigation Controller 

ตอนนี้เราต้องการให้ Table View ของเราถูกแสดงเป็นหน้าแรก ให้เราทำการ Drag Tab Bar Item มาวางไว้ซ้ายสุดของ Tab Bar ครับ สำหรับใครที่ทำการ Drag Item ไม่ได้ให้ลบ Relationship ของ Item2 ออกก่อนแล้วทำการสร้างความสัมพันธ์ใหม่ครับ



หากทำเสร็จเรียบร้อยแล้วลองทดสอบโดยการ Build & Run เราจะเห็น Table View ของเราแสดงเป็นหน้าแรกครับ

กลับมาที่ Story Board อีกครั้ง ให้ไปที่ Table View Cell ใน Table View Controller ในส่วนของ Attributes Inspector เราสามารถปรับแต่งได้ง่ายกว่าการเขียน Code มากเลยครับ เรียกได้ว่าเป็นจุดเด่นอีกอย่างหนึ่งของ Story Board เลยทีเดียว

ทำการ Custom Cell ได้ง่ายสุดๆ

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

• New File >> Subclass of  UITableViewController >> เลือกเครื่องหมายถูกออกหน้าข้อความ with XIB for user interface 
• Story Board >> Table View Controller >> Identity Inspector >> เลือก Object Class ที่เราได้สร้างขึ้น

ลอง Build & Run ดูจะเห็นว่า Cell จะแสดงผลตรงตามที่ตั้งค่าไว้แล้วครับ ( อย่าลืมไปกำหนดจำนวน Section และ Row ใน File ที่พึ่งสร้างมาใหม่ด้วยนะครับ )

คราวนี้มาทดลองใช้งาน Custom Cell กันนะครับ

• Story Board >> เลือก Prototype Cell ใน Table View Scene >> Attributes Inspector >> เปลี่ยน Style เป็น Custom

สังเกตว่า Object ต่างๆ ใน Prototype Cell จะหายไปทั้งหมด

หลังจากนั้นให้เราเพิ่ม Object Interface ต่างๆลงใน Prototype Cell ได้ตามต้องการเลยครับ

ของผม 2 Label 1 Image View

ทีนี้ก็จะเกิดคำถามขึ้นมาว่า แล้วเราจะทำการอ้างอิงแต่ละ Object อย่างไร ? เราอาจะทำการสร้าง Class ของ Custom Cell มาอ้างอิงก็ได้ แต่ผมจะนำเสนออีกวิธีที่สะดวกกว่า นั่นคือการใช้ Tag ครับ

• เลือก Object Interface >> Attributes Insoector >> ในหมวด View ทำการตั้งค่า Tag

ซึ่งการกำหนด Tag ให้ต่างกันนั้นเราสามารถนำไปใช้อ้างอิงได้ในเวลาเขียน Code ครับ ลองมาดูตัวอย่างการใช้งานกันนะครับ

• แก้ไข Code ใน File Table View Scene ที่ได้สร้างขึ้น โดยแก้ในส่วนของ Method cellForRowAtIndexPath ดังนี้

ทดสอบ Build & Run แล้วสังเกตลที่ได้ครับ ( อย่าลืมหารูปมาใส่ใน Project เพื่อลองใช้งาน UIImageView นะครับ )

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