Storyboard in Xcode 4

Storyboard ใน Xcode คืออะไร หลายๆคนอาจจะสงสัยว่าเอาไว้ทำไม หรือใช้งานได้อย่างไร จริงๆแล้วเป็นเครื่องมือตัวใหม่ที่ทาง Apple ช่วยให้เราออกแบบ Application ได้ง่ายขึ้นและมีระบบระเบียบที่ดีขึ้น คล้ายเวลาจะสร้างหนังซักเรื่อง ก็ต้องมีการเขียน Storyboard เพื่อเป็น Guideline ก่อนนั่นเอง

โดย Storyboard นี้เริ่มมีมาตั้งแต่ Xcode 4 เป็นต้นมา หลักการเบื้องต้นคือการสร้าง UI ของ Application และการเชื่อมโยงต่างๆของ Application เช่น กดปุ่มนี้แล้วจะไปยังหน้าจอใด โดยไม่ต้องเขียน Code แม้แต่เพียงบรรทัดเดียว

ผมจะแสดงตัวอย่างเบื้องต้นให้ดูนะครับ
1. Create Project ใหม่ ให้คลิกไปที่ File -> New -> New Project…
2. เลือก iOS -> Application -> Single View Application

3. ให้ติ๊กถูกที่ ​Use Storyboard จากนั้นตั้งชื่อโปรเจคว่า “StoryboardTest”

4. ตอนนี้เราจะได้โปรเจคใหม่มาแล้ว ให้ดูที่แถบด้านซ้ายมือ เราจะไม่เห็นไฟล์ .xib ที่คุ้นเคยกัน เพราะเรากำลังจะสร้าง Storyboard ดังนั้นไฟล์จำพวก .xib จึงไม่จำเป็น เราจะเห็นไฟล์ชื่อ ​MainStoryboard.storyboard ขึ้นมาแทน ให้คลิกเลยครับ จากนั้นเราจะเห็นหน้าจอเปล่าๆมา ให้เราลาก View Controller ตัวสีเหลืองๆไปไว้ใน canvas ได้เลย


5. ให้สร้างหน้าจอโดยลาก Objects ใส่เข้าไปตามภาพนี้เลยครับ

6. ตอนนี้เราได้ View มาครบแล้ว ให้ลองลากการเชื่อมต่อระหว่าง View ดู โดยการกด Control ค้างแล้วใช้เมาส์ลากจากปุ่ม “Go To Second View” แล้วก็ลากไปยัง Second View เลยครับ จะเห็นเส้นสีฟ้า ลากไปตามเมาส์ครับ เมื่อปล่อยเมาส์ให้เลือก performSegueWithIdentifier:sender ครับ จากนั้นก็ทำแบบเดียวกันกับ First View ครับ

7. จากนั้นกด Run เพื่อดูผลลัพธ์ครับ ให้ลองคลิกปุ่ม “Go To Second View” สลับกับ First ครับ จะเห็นผลลัพธ์เบื้องต้นว่าเราสามารถสร้างการเชื่อมต่อระหว่าง View ได้แล้ว
8. กด Stop แล้วกลับมาเพิ่มรายละเอียดอีกนิดหน่อย ผมจะเพิ่มให้มีการ Alert ข้อความขึ้นมาเมื่อมีการกดปุ่ม “Current View Info” โดยการสร้าง IBAction ให้กับปุ่ม “Current View Info” ให้กับ First View ก่อนครับ วิธีการก็กด Control ค้าง แล้วลากจากปุ่มไปยังไฟล์ StoryboardTestViewController.h ให้เลือกเป็น Action แล้วตั้งชื่อเป็น “showFirstViewInfo”

9. จากนั้นใส่โค๊ดนี้ลงไปใน StoryboardTestViewController.m เพื่อแสดง Alert เมื่อมีการกดปุ่มนี้

10. หากลอง Run อีกครั้งจะพบว่าปุ่ม Current View Info ของ First View สามารถทำงานได้แล้ว แต่เราจะทำให้ของ Second View ทำงานด้วยเช่นกัน โดยการสร้าง Class ใหม่เพื่อรองรับการทำงานของ Second View
New File…->UIViewController subclass ตั้งค่าเป็น Subclass of : UIViewController และ uncheck With XIB for user Interface จากนั้นตั้งชื่อว่า “SecondViewController”


11. ให้กลับไปที่หน้า MainStoryboard.storyboard แล้วคลิกที่ Second View เพื่อเปลี่ยน Property ของ View ให้ใช้ Class ของ SecondViewController

12. จากนั้นให้ทำเหมือนกับข้อ 8-9 เพื่อให้แสดง Alert กับ SecondView แทน
13. ทดสอบ Run แสดงผลลัพธ์ดูครับ

เพียงเท่านี้เราก็สามารถออกแบบหน้าตาของ Application ได้ก่อนที่จะลงมือ Coding ได้ เพื่อลดข้อผิดพลาดต่างๆ และเพื่อการทำงานอย่างเป็นขั้นเป็นตอน

หวังว่าบทความของผมจะเป็นประโยชน์กับทุกคน ไม่มากก็น้อยนะครับ ^ ^