> 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/add-new-item-page.md).

# Add new item page

## หน้าเพิ่ม Todo

หน้าเพิ่ม Todo item เราจะทำเป็นหน้าใหม่ที่เปิดขึ้นมาซ้อนหน้าแรก โดยเลื่อนจากด้านล่างมาด้านบน หน้าตาแบบนี้

![](https://759097476-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuqWEUpYllBlpWTYMEIgR%2Fuploads%2FXTXdnRaUvx59qdz90x5u%2FScreen%20Shot%202022-06-27%20at%209.03.31%20PM.png?alt=media\&token=8fd36110-fcba-4a9f-a47e-cf4e6854f948)

ให้เราลาก ViewController ใหม่ มาจาก Object Library วางลงใน Main.storyboard

จากนั้นเนื่องจากเราจะใช้วิธีแสดงซ้อนขึ้นมาบนหน้าแรก (Modal) เราจึงต้อง Embed In Navigation Controller แบบเดียวกับหน้าแรกเพื่อให้มี หัว Title ในหน้า Add และมีที่สำหรับปุ่ม Cancel และปุ่ม Done

{% hint style="info" %}
ลองไม่ Embed In Navigation Controller แล้วข้ามไปสร้าง Segue ตามหัวข้อถัดไปเลยจะเป็นอย่างไร และ Segue แบบ Show กับ Present Modally ต่างกันอย่างไร
{% endhint %}

![Embed In Navigation Controller](https://759097476-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuqWEUpYllBlpWTYMEIgR%2Fuploads%2FoAPGc6P6KmwR4zGJSPXA%2FJun-27-2022%208-50-08%20PM.gif?alt=media\&token=853bf631-55cf-489d-9b1c-15e7d332a49d)

ให้เราตั้งชื่อ Title เป็น Add New Item

![](https://759097476-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuqWEUpYllBlpWTYMEIgR%2Fuploads%2FMTHKeX0a0CUPb0KSh0BQ%2FScreen%20Shot%202022-06-27%20at%208.53.00%20PM.png?alt=media\&token=5df5d9d6-914c-431f-9068-b64ebefe5085)

ใส่ปุ่ม Cancel และ Done

![](https://759097476-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuqWEUpYllBlpWTYMEIgR%2Fuploads%2Fb1y7NMJJDZrrVZXG0Pqf%2FJun-27-2022%208-54-59%20PM.gif?alt=media\&token=aed4986c-6795-4225-87bc-78974073982d)

## เชื่อมกับหน้าแรกด้วย Segue

หลังจากนั้นเราจะสร้างการเชื่อมโยงด้วย **Segue** ให้เรากด **ctrl ค้างไว้** คลิ๊กที่ปุ่ม + ในหน้าแรก**ลาก**มายัง Navigation Controller

เลือก Action Segue เป็น **Present Modally** ตั้ง **Identifier** ให้ **Segue** โดยคลิ๊กที่ segue ก่อนแล้วตั้ง identifier ใน Attributes Inspector เป็น **openAddItemSegue** (เราจะใช้ในภายหลัง)

![](https://759097476-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuqWEUpYllBlpWTYMEIgR%2Fuploads%2Fv9uY4g2ee0IrfcSlaDXP%2FJun-27-2022%209-00-48%20PM.gif?alt=media\&token=ca021070-e39a-468b-a7e6-043b6fe46556)

รันแล้วลองกดปุ่ม + ในหน้าแรก

![](https://759097476-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuqWEUpYllBlpWTYMEIgR%2Fuploads%2F7EV0PfkcZWGKWXm91fv7%2FJun-27-2022%209-03-01%20PM.gif?alt=media\&token=86b84aa8-4dbd-4161-a118-445a1bba5fb7)