TextField and Switch
ทำหน้ากรอกข้อมูล
หน้ากรอกเพิ่ม Todo ใหม่ของเราจะประกอบด้วย
TextField สำหรับกรอกชื่อรายการใหม่
Switch ที่ใช้ในการตั้งว่ารายการนี้ทำไปแล้วหรือยัง
Label ข้อความว่า is done สำหรับระบุว่า Switch ใช้ทำอะไร
ทั้งหมดนี้ให้เราลากมาจาก Object Library เหมือนเดิม
เพิ่ม TextField, Label และ Switch เพื่อให้หน้าจอเวลาแสดงขึ้นมาเรารู้ว่า TextField ให้กรอกอะไร ให้เราตั้ง Placeholder ใน Attributes Inspector เป็น Title
เลือก Attributes Inspector ด้านขวา ใส่ Title ลงใน Placeholder
ระบุ Placeholder เป็น Title ให้ TextField เมื่อเรารัน แนวตั้งจะดูปกติดี แต่พอเราหมุนเป็นแนวนอน (Cmd + ลูกศรซ้ายขวา) จะเห็นว่าเบี้ยวอีกแล้ว เพราะเรายังไม่ได้จัด Auto layout อีกเช่นเคย
เราจะจัด Auto layout ด้วยการจัดกลุ่มของของก่อน ด้วย StackView จากนั้นจึงค่อยระบุ constraint ด้านซ้าย ด้านบน และด้านขวา
เราจะรวม Label กับ Switch ให้อยู่ใน StackView แนวนอนก่อน
รวม TextField กับ StackView ในข้อแรกที่เราทำเป็น StackView แนวตั้ง
จัด spacing ระหว่าง TextField กับ Label โดยกำหนด Spacing เป็น 8 ใน Attributes Indicator ของ StackView
สร้าง Constraint ด้านบน 30 ด้านซ้ายและขวา อย่างละ 15
เมื่อเราผูกเสร็จแล้วให้รันดู จะได้ผลลัพธ์ตามรูป
แก้ 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 เวลาพิมพ์
