> For the complete documentation index, see [llms.txt](https://pakornpat.gitbook.io/ios-app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://pakornpat.gitbook.io/ios-app/storyboard.md).

# Storyboard

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

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

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

![](https://759097476-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuqWEUpYllBlpWTYMEIgR%2Fuploads%2FvfJLDcfOyhqHoDBn3awO%2FScreen%20Shot%202022-06-26%20at%207.20.18%20AM.png?alt=media\&token=c33cb31a-d8b1-46f9-bdbd-dd85ed6a0b34)

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

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

![Document outline](https://759097476-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuqWEUpYllBlpWTYMEIgR%2Fuploads%2FoV7vcm9bGgF5LplFRCSz%2FScreen%20Shot%202022-06-26%20at%207.21.13%20AM.png?alt=media\&token=9155df2b-c2db-45e9-8092-9b785e83f228)

ด้านขวาจะเป็น **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](https://759097476-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuqWEUpYllBlpWTYMEIgR%2Fuploads%2FlA5VzuUBCG5w36JgI9rL%2FScreen%20Shot%202022-06-26%20at%207.23.05%20AM.png?alt=media\&token=7c63acf9-ed30-4834-b72b-b5b4845b975d)

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

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

![](https://759097476-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuqWEUpYllBlpWTYMEIgR%2Fuploads%2F4WwpoqkddL1EpsGdcLCF%2FScreen%20Shot%202022-06-26%20at%207.26.47%20AM.png?alt=media\&token=463750ad-8daa-4217-90b1-01a32be34694)

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

![หน้าจอขนาดต่าง ๆ](https://759097476-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuqWEUpYllBlpWTYMEIgR%2Fuploads%2FPoPnzDBsn05KVPxnjOFq%2FScreen%20Shot%202022-06-26%20at%207.29.58%20AM.png?alt=media\&token=a7fc1c05-2ac7-4398-9a8c-144c05500415)