# TextField and Switch

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

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

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

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

![เพิ่ม TextField, Label และ Switch](https://1168329629-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LGk7Utff0rVWsqK4eYO%2F-LGu0aZfaUYFSRbnd12d%2F-LGu0cfCWSMysbHYRrGn%2FaddForm.gif?alt=media\&token=41d76116-b541-4592-ae24-45202d5c67df)

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

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

![ระบุ Placeholder เป็น Title ให้ TextField](https://1168329629-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LGk7Utff0rVWsqK4eYO%2F-LGu0aZfaUYFSRbnd12d%2F-LGu1D4CWFpph4ebBU4p%2FScreen%20Shot%202018-07-08%20at%2020.15.28.png?alt=media\&token=36567f88-705e-4e52-9447-1e16dafaee63)

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

![ยังไม่ได้จัด Auto Layout](https://1168329629-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LGk7Utff0rVWsqK4eYO%2F-LGu0aZfaUYFSRbnd12d%2F-LGu1L-nOPU-LPAsoPUo%2FScreen%20Shot%202018-07-08%20at%2020.16.19.png?alt=media\&token=fa5bb561-beb3-4611-a2ac-01a69292d728)

## 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 และผูก Constraint](https://1168329629-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LGk7Utff0rVWsqK4eYO%2F-LGu0aZfaUYFSRbnd12d%2F-LGu2njca3acfEW_yixo%2FadjustLayout.gif?alt=media\&token=3f83371f-2cda-40c5-97fc-eeac8d9c0407)

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

![](https://1168329629-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LGk7Utff0rVWsqK4eYO%2F-LGu0aZfaUYFSRbnd12d%2F-LGu3Qo91T6kTRYA65yC%2Frotate.gif?alt=media\&token=572dbac7-4237-4adf-ae37-339abba8dd6e)

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

![](https://1168329629-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LGk7Utff0rVWsqK4eYO%2F-LGu0aZfaUYFSRbnd12d%2F-LGu3owB400GWnlA0t3b%2FScreen%20Shot%202018-07-08%20at%2020.27.02.png?alt=media\&token=85db6f97-edb1-445d-9e4e-e6b65cdf2283)

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

![เลือก Switch แล้วตั้ง State ใน Attributes Inspector เป็น Off](https://1168329629-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LGk7Utff0rVWsqK4eYO%2F-LGu0aZfaUYFSRbnd12d%2F-LGu3zYmqun8jb4XTvxI%2FScreen%20Shot%202018-07-08%20at%2020.27.49.png?alt=media\&token=d483c882-93ea-48fb-aad4-f47723ed4aef)

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

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

![](https://1168329629-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://1168329629-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 %}