Basic Auto Layout
Last updated
Last updated
Auto Layout คือ constraint-based layout system นั่นคือระบบวางเลย์เอาท์โดยอาศัยการสร้างความสัมพันธ์ระหว่าง element เพื่อให้ element ต่าง ๆ สามารถปรับตัวเองไปตามแต่ละขนาดหน้าจอได้เองอัตโนมัติ
ดังตัวอย่างรูปด้านล่างเป็นรูปของ TableViewCell อันหนึ่งที่เรากำหนดความกว้าง ความสูงของรูปโปรไฟล์ ระยะห่างจากด้านซ้าย ด้านบน และด้านขวา ส่วนของ Title ก็มีระยะจากขอบขวา แต่ไม่ได้กำหนดความกว้าง นั่นหมายความว่า เมื่อ Cell แคบลง Title จะเป็นส่วนที่แคบลง โดยที่ระยะจากภาพโปรไฟล์ และขนาดของภาพจะเท่าเดิม เมื่อ Title ยาวเป็นสองบรรทัด ก็จะดันส่วนของวันที่และเนื้อหาลงด้านล่างอัตโนมัติ โดยระยะห่างระหว่างวันที่กับ Title จะเท่าเดิม ก็จะทำให้ Cell นี้มีความสูงที่มากขึ้นเองอัตโนมัติ
เรามาตั้งให้ TableView เต็มจอพอดีกัน เริ่มโดยการที่เราใส่ Constraint ทั้งสี่ด้าน ซ้าย บน ขวา และล่าง
โดยเลือกที่ TableView แล้วกด Add new constraint
โดยปกติ Storyboard จะไม่แสดงเส้นขอบเขตของ View แต่ละอันบางครั้งทำให้เราเห็นไม่ชัด เราสามารถเปิดให้เห็นได้ง่ายขึ้นที่ Editor -> Canvas -> Show Bounds Rectangles
จากนั้นให้เราตั้งค่า Constraint ทั้งหมดให้เป็น 0 เพื่อให้ชิดขอบทั้งสี่ด้าน
เมื่อรันใหม่จะพบว่า ไม่ว่าจะหมุนยังไง TableView ก็จะปรับตัวเองให้เป็นไปตาม Constraint ที่เราตั้งไว้
อ่านเพิ่มเติมเกี่ยวกับ Auto layout ได้ที่
Understanding Auto Layout Auto Layout Tutorial in iOS 11: Getting Started
