> 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/v2/textfield-and-switch.md).

# TextField and Switch

## ทำหน้ากรอกข้อมูล

หน้ากรอกเพิ่ม Todo ใหม่ของเราจะประกอบด้วย

1. **TextField** สำหรับกรอกชื่อรายการใหม่
2. **Switch** ที่ใช้ในการตั้งว่ารายการนี้ทำไปแล้วหรือยัง
3. Label ข้อความว่า **is done** สำหรับระบุว่า Switch ใช้ทำอะไร

ทั้งหมดนี้ให้เราลากมาจาก Object Library เหมือนเดิม

![เพิ่ม TextField, Label และ Switch](https://144845262-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LGk7Utff0rVWsqK4eYO%2F-LfKI2EaBK7nCNv2qf4i%2F-LfKI4m8DtOJB7Ryx4Gw%2F17.gif?alt=media\&token=750ce29f-7c40-42fd-9053-c8a5e8aadf98)

เพื่อให้หน้าจอเวลาแสดงขึ้นมาเรารู้ว่า TextField ให้กรอกอะไร ให้เราตั้ง Placeholder ใน Attributes Inspector เป็น Title

1. คลิ๊กที่ TextField
2. เลือก Attributes Inspector ด้านขวา ใส่ Title ลงใน Placeholder

![ระบุ Placeholder เป็น Title ให้ TextField](https://144845262-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LGk7Utff0rVWsqK4eYO%2F-LfKI2EaBK7nCNv2qf4i%2F-LfKIHzadRL6O5GPs857%2FScreen%20Shot%202019-05-20%20at%2019.52.31.png?alt=media\&token=17190860-42bf-433e-9c4c-ffa3376f8d24)

เมื่อเรารัน แนวตั้งจะดูปกติดี แต่พอเราหมุนเป็นแนวนอน (Cmd + ลูกศรซ้ายขวา) จะเห็นว่าเบี้ยวอีกแล้ว เพราะเรายังไม่ได้จัด Auto layout อีกเช่นเคย

![ยังไม่ได้จัด Auto Layout](https://144845262-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LGk7Utff0rVWsqK4eYO%2F-LfKI2EaBK7nCNv2qf4i%2F-LfKIUALN7CsK1Ul_Jc2%2FScreen%20Shot%202019-05-20%20at%2019.53.20.png?alt=media\&token=14a55f8a-eacf-40d1-a8cc-7b48cb33eb56)

## Auto Layout

เราจะจัด Auto layout ด้วยการจัดกลุ่มของของก่อน ด้วย StackView จากนั้นจึงค่อยระบุ constraint ด้านซ้าย ด้านบน และด้านขวา

{% hint style="info" %}
StackView ถูกเพิ่มเข้ามาใน iOS 9 ทำให้เราสามารถจัดกลุ่มของของ ให้เหมือนกับอยู่ใน Table ของที่อยู่ภายในจะยืดหดตามขนาดของ StackView ได้โดยไม่ต้องสร้าง Constraint ทำให้สะดวกขึ้นเวลาที่ต้องเพิ่มหรือลดของออกจากกลุ่ม

อ่านเพิ่มเติมได้จาก [UIStackView](https://developer.apple.com/documentation/uikit/uistackview) 
{% endhint %}

1. เราจะรวม Label กับ Switch ให้อยู่ใน StackView แนวนอนก่อน
2. รวม TextField กับ StackView ในข้อแรกที่เราทำเป็น StackView แนวตั้ง
3. จัด spacing ระหว่าง TextField กับ Label โดยกำหนด Spacing เป็น 8 ใน Attributes Indicator ของ StackView
4. สร้าง Constraint ด้านบน 30 ด้านซ้ายและขวา อย่างละ 15

![รวมใน StackView](https://144845262-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LGk7Utff0rVWsqK4eYO%2F-LfKIfKh1BHnzMfmrxAO%2F-LfKJYS2NrOW9XK5y8vx%2F18.gif?alt=media\&token=ae32afa5-1413-466d-9ee9-0e2df3a96516)

![ผูก Constraint](https://144845262-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LGk7Utff0rVWsqK4eYO%2F-LfKIfKh1BHnzMfmrxAO%2F-LfKKNSub5LxDbCwNgJ3%2F19.gif?alt=media\&token=4fab89de-5cdc-4714-8cd4-5e4e65d77ac1)

เมื่อเราผูกเสร็จแล้วให้รันดู จะได้ผลลัพธ์ตามรูป

![](https://144845262-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LGk7Utff0rVWsqK4eYO%2F-LfKIfKh1BHnzMfmrxAO%2F-LfKKaR6SarmwveiWJ2f%2FScreen%20Shot%202019-05-20%20at%2020.02.36.png?alt=media\&token=ba1095f1-0148-4b8a-b7bf-790def6acf8b)

แก้ Label ให้เป็น is done ใน Attributes Inspector

![แก้ Label เป็น is done แต่ขนาดยังไม่ถูกต้อง](https://144845262-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LGk7Utff0rVWsqK4eYO%2F-LfKIfKh1BHnzMfmrxAO%2F-LfKKz4HvTe1Oe63axaj%2FScreen%20Shot%202019-05-20%20at%2020.03.46.png?alt=media\&token=74977cc8-c0b4-43bd-81af-3025026cdaa2)

ปรับขนาด spacing ของ StackView (เลือกที่ StackView ) ให้เป็น 0 เพื่อให้ label แสดง is done ได้อย่างถูกต้อง

![ปรับ spacing ให้ StackView](https://144845262-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LGk7Utff0rVWsqK4eYO%2F-LfKIfKh1BHnzMfmrxAO%2F-LfKL4tR7zB3BlbZ9yyj%2FScreen%20Shot%202019-05-20%20at%2020.04.15.png?alt=media\&token=6116fe69-e3f2-4ec2-bb06-3a43f8aaa944)

ปรับ State ของ Switch ให้ default เป็น Turn Off ใน Attributes Inspector

![เลือก Switch แล้วตั้ง State ใน Attributes Inspector เป็น Off](https://144845262-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LGk7Utff0rVWsqK4eYO%2F-LfKIfKh1BHnzMfmrxAO%2F-LfKLe3LbO0DAnC6DpLt%2FScreen%20Shot%202019-05-20%20at%2020.07.11.png?alt=media\&token=c45d6bc7-6c6a-49c2-94e2-426638aeb7c1)

## Adjust UI กันหน่อย

ต้องการให้แป้นพิมพ์กำหนดตัวแรกเป็นตัวใหญ่อัตโนมัติ ให้เลือก TextField แล้วตั้ง Capitalization เป็น Sentences

![](https://144845262-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LGk7Utff0rVWsqK4eYO%2F-LHNw0fYoyhZa2uGYF7k%2F-LHNw8lTl-gAT4q_uSAW%2FScreen%20Shot%202018-07-14%20at%2020.16.38.png?alt=media\&token=06d8b8ee-05f8-44b5-bd5e-42ba7d53f2c1)

หรือ เพิ่มให้มีปุ่ม clear เวลาพิมพ์

![](https://144845262-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LGk7Utff0rVWsqK4eYO%2F-LHNxzMgVVXYOHco-8gQ%2F-LHNy5RcDx3-_575qu1U%2FScreen%20Shot%202018-07-14%20at%2020.25.31.png?alt=media\&token=7148c441-fec6-40b3-b30b-2ef085b7ddc4)

{% hint style="info" %}
ลองเปลี่ยนค่าอื่น ๆ ใน Attributes Inspector เช่น สีข้อความ ฟอนต์ ขนาด
{% endhint %}