TextField and Switch

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

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

1. TextField สำหรับกรอกชื่อรายการใหม่

2. Switch ที่ใช้ในการตั้งว่ารายการนี้ทำไปแล้วหรือยัง

3. Label ข้อความว่า is done สำหรับระบุว่า Switch ใช้ทำอะไร

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

เพิ่ม TextField, Label และ Switch

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

1. คลิ๊กที่ TextField

2. เลือก Attributes Inspector ด้านขวา ใส่ Title ลงใน Placeholder

ระบุ Placeholder เป็น Title ให้ TextField

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

ยังไม่ได้จัด Auto Layout

Auto Layout

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

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

อ่านเพิ่มเติมได้จาก UIStackView

1. เราจะรวม Label กับ Switch ให้อยู่ใน StackView แนวนอนก่อน

2. รวม TextField กับ StackView ในข้อแรกที่เราทำเป็น StackView แนวตั้ง

3. จัด spacing ระหว่าง TextField กับ Label โดยกำหนด Spacing เป็น 8 ใน Attributes Indicator ของ StackView

4. สร้าง Constraint ด้านบน 30 ด้านซ้ายและขวา อย่างละ 20

รวมใน StackView

ผูก Constraint

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

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

แก้ Label เป็น is done แต่ขนาดยังไม่ถูกต้อง

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

ปรับ spacing ให้ StackView

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

เลือก Switch แล้วตั้ง State ใน Attributes Inspector เป็น Off

Adjust UI กันหน่อย

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

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

ลองเปลี่ยนค่าอื่น ๆ ใน Attributes Inspector เช่น สีข้อความ ฟอนต์ ขนาด