# 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://pakornpat.gitbook.io/ios-app/v2/textfield-and-switch.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.