Storyboard
มารู้จักกับ Storyboard กัน
ในการจัดการหน้าจอเราสามารถใช้ได้ทั้งโค้ด หรือ storyboard ก็ได้ โดยโปรเจคที่เราทำกันเราจะใช้ storyboard ในการจัดการหน้าจอเป็นหลัก
ให้เรากดเลือกไฟล์ Main.storyboard ส่วน editor จะแสดงดังรูป
ด้านซ้ายจะเป็น document outline แสดงโครงสร้างลำดับชั้นของ View ต่าง ๆ ที่เราใส่ลงไปในแต่ละหน้าจอ
ในตัวอย่างจะเป็นหน้า View Controller มี View หลัก 1 อัน (ที่ไฮไลท์สีน้ำเงิน)
ด้านขวาจะเป็น Utility panel แบ่งเป็นกลุ่ม ๆ มี 6 กลุ่ม เราจะใช้ 4 อันหลังเป็นหลัก ได้แก่
Identity inspector ใช้กำหนด class ของ view
Attributes inspector ใช้กำหนดค่าต่าง ๆ ของ view เช่น สี background, ฟอนต์
Size inspector ใช้กำหนดขนาด และจัด Auto layout
Connection inspector ใช้ดูการเชื่อมโยงของ view กับ controller
เหนือขึ้นด้านบนจะเป็น toolbar มี Object Library อยู่ด้านซ้าย ถัดมาเป็นโหมดการแสดงส่วน editor หลัก ส่วนด้านขวาจะใช้ในการซ่อนแสดง ส่วนต่าง ๆ เพื่อเพิ่มพื้นที่ส่วนตรงกลาง
Object Library เป็นคลังของ view ต่าง ๆ ที่ iOS มีให้เราใช้ เช่น Label, TextField, Button เป็นต้น
ด้านล่างสุดกลางจอ มี shortcut ต่าง ๆ เมื่อกดด้านซ้ายเปิดขึ้นมาเราสามารถจำลองขนาดของหน้าจอต่าง ๆ ให้กับ storyboard ได้ ส่วนทางด้านขวาเป็น shortcut ในการจัด alignment หรือเพิ่ม Auto layout
Last updated
