Storyboard

มารู้จักกับ Storyboard กัน

ในการจัดการหน้าจอเราสามารถใช้ได้ทั้งโค้ด หรือ storyboard ก็ได้ โดยโปรเจคที่เราทำกันเราจะใช้ storyboard ในการจัดการหน้าจอเป็นหลัก

ให้เรากดเลือกไฟล์ Main.storyboard ส่วน editor จะแสดงดังรูป

ด้านซ้ายจะเป็น document outline แสดงโครงสร้างลำดับชั้นของ View ต่าง ๆ ที่เราใส่ลงไปในแต่ละหน้าจอ

ในตัวอย่างจะเป็นหน้า View Controller มี View หลัก 1 อัน (ที่ไฮไลท์สีเทา)

Document outline

ด้านขวาจะเป็น Utility panel ประกอบด้วยส่วนบนและล่าง ส่วนบนแบ่งเป็นกลุ่ม ๆ มี 6 กลุ่ม เราจะใช้ 4 อันหลังเป็นหลัก ได้แก่

1. Identity inspector ใช้กำหนด class ของ view

2. Attributes inspector ใช้กำหนดค่าต่าง ๆ ของ view เช่น สี background, ฟอนต์

3. Size inspector ใช้กำหนดขนาด และจัด Auto layout

4. Connection inspector ใช้ดูการเชื่อมโยงของ view กับ controller

ด้านล่างมี 4 ส่วน โดยจะเน้นส่วนที่ 3 คือ Object Library เป็นคลังของ view ต่าง ๆ ที่ iOS มีให้เราใช้ เช่น Label, TextField, Button เป็นต้น

ด้านล่างสุดกลางจอ มี shortcut ต่าง ๆ เมื่อกดด้านซ้ายเปิดขึ้นมาเราสามารถจำลองขนาดของหน้าจอต่าง ๆ ให้กับ storyboard ได้ ส่วนทางด้านขวาเป็น shortcut ในการจัด alignment หรือเพิ่ม Auto layout

เมื่อกดที่ View as จะปรากฎหน้าจอขนาดต่าง ๆ