Storyboard

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

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

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

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

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

Document outline

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

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

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

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

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

Attributes Inspector

เหนือขึ้นด้านบนจะมีปุ่ม + อยู่สำหรับเรียกเปิด Object Library

Object Library เป็นคลังของ view ต่าง ๆ ที่ iOS มีให้เราใช้ เช่น Label, TextField, Button เป็นต้น

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

หน้าจอขนาดต่าง ๆ