iOS Swift Auto Layout Constraints in Code
ได้มีโอกาสมาเขียนทางฝั่ง Mobile บ้าง แต่ก็ไม่ได้มีความเชียวชาญอะไรมายมาย ถ้ามีคำถามก็ถามได้เลยย ถ้าตอบไม่ได้ เดี๋ยวไปถามผู้รู้ให้น๊าาค่ะ
What is auto layout in Swift?
Auto Layout เป็นการคำนวณ size และ position ทั้งหมดของ view ที่อยู่บนหน้าจอ เพื่อให้สามารถปรับ position ให้เหมาะสมกับขนาดหน้าจอที่เปลี่ยนไป
ยกตัวอย่าง Auto layout ซึ่งจะต้องเขียนด้วย code
- รายละเอียดของตัวอย่างคือจะสร้าง UIView ขึ้นมาใน Main.storyboard เพื่อนำ xib file มาใส่ใน UIView และใน UIVIew จะต้องยึดความกว้าง ความสูงจาก content ใน xib file
- ในไฟล์ Main.storyboard จะกำหนดความสูง UIView = 125 แต่เราจะลบความสูงนั้นทิ้งเมื่อมีการ build ด้วยการเข้าไป เพื่อไม่ให้มันแดงใน storyboard
2. จะเห็นว่าใน xib file ที่เราสร้างขึ้นมาในวงกลมสีแดงจะมีการจัด Auto resizing Mask Into Constraints ให้อัตโนมัติอยู่แล้ว ในกรณีที่เราจะเขียน code ให้ auto layout จะต้องปิด feature นี้ด้วย จะสามารถดูได้ใน code บรรทัดที่ 16
3. ไปที่ไฟล์ ViewController.swift เรามาเขียน code กัน
- ใน บรรทัดที่ 16 จะมีการ disable Autoresizing Mask Into Constraints เพื่อไม่ให้ view ใน AddressViewController.xib ทำการ auto resizing
- ใน บรรทัดที่ 17–22 จะเป็นการ config ให้ UIView ที่ชื่อว่า addressView ซึ่งอยู่ใน Main.storyboard ให้ยึดตาม content ที่อยู่ใน AddressViewController.xib
- ในฝั่งซ้าย จะเห็นว่าเมื่อเรามีข้อมูลบรรทัดเดียวก็จะแสดงปรกติ
- ในฝั่งขวา เมื่อเรามีข้อมูลเพิ่มมากขึ้นก็จะ auto ความสูงตาม content ให้เราอัตโนมัติ
จดบันทึกไปเรื่อยๆ หวังว่าคงมีประโยชน์กับคนอื่นๆด้วยน๊าาค่ะ
ตัวอย่าง code: https://github.com/phatpan/auto-layout-using-activate
Reference
