TextField and Switch
Last updated
Last updated
หน้ากรอกเพิ่ม Todo ใหม่ของเราจะประกอบด้วย
TextField สำหรับกรอกชื่อรายการใหม่
Switch ที่ใช้ในการตั้งว่ารายการนี้ทำไปแล้วหรือยัง
Label ข้อความว่า is done สำหรับระบุว่า Switch ใช้ทำอะไร
ทั้งหมดนี้ให้เราลากมาจาก Object Library เหมือนเดิม
เพื่อให้หน้าจอเวลาแสดงขึ้นมาเรารู้ว่า TextField ให้กรอกอะไร ให้เราตั้ง Placeholder ใน Attributes Inspector เป็น Title
คลิ๊กที่ TextField
เลือก Attributes Inspector ด้านขวา ใส่ Title ลงใน Placeholder
เมื่อเรารัน แนวตั้งจะดูปกติดี แต่พอเราหมุนเป็นแนวนอน (Cmd + ลูกศรซ้ายขวา) จะเห็นว่าเบี้ยวอีกแล้ว เพราะเรายังไม่ได้จัด Auto layout อีกเช่นเคย
เราจะจัด Auto layout ด้วยการจัดกลุ่มของของก่อน ด้วย StackView จากนั้นจึงค่อยระบุ constraint ด้านซ้าย ด้านบน และด้านขวา
StackView ถูกเพิ่มเข้ามาใน iOS 9 ทำให้เราสามารถจัดกลุ่มของของ ให้เหมือนกับอยู่ใน Table ของที่อยู่ภายในจะยืดหดตามขนาดของ StackView ได้โดยไม่ต้องสร้าง Constraint ทำให้สะดวกขึ้นเวลาที่ต้องเพิ่มหรือลดของออกจากกลุ่ม
อ่านเพิ่มเติมได้จาก UIStackView
เราจะรวม Label กับ Switch ให้อยู่ใน StackView แนวนอนก่อน
รวม TextField กับ StackView ในข้อแรกที่เราทำเป็น StackView แนวตั้ง
จัด spacing ระหว่าง TextField กับ Label โดยกำหนด Spacing เป็น 8 ใน Attributes Indicator ของ StackView
สร้าง Constraint ด้านบน 30 ด้านซ้ายและขวา อย่างละ 15
เมื่อเราผูกเสร็จแล้วให้รันดู จะได้ผลลัพธ์ตามรูป
แก้ Label ให้เป็น is done ใน Attributes Inspector
ปรับขนาด spacing ของ StackView (เลือกที่ StackView ) ให้เป็น 0 เพื่อให้ label แสดง is done ได้อย่างถูกต้อง
ปรับ State ของ Switch ให้ default เป็น Turn Off ใน Attributes Inspector
ต้องการให้แป้นพิมพ์กำหนดตัวแรกเป็นตัวใหญ่อัตโนมัติ ให้เลือก TextField แล้วตั้ง Capitalization เป็น Sentences
หรือ เพิ่มให้มีปุ่ม clear เวลาพิมพ์
ลองเปลี่ยนค่าอื่น ๆ ใน Attributes Inspector เช่น สีข้อความ ฟอนต์ ขนาด
