Basic Auto Layout

Auto Layout

Auto Layout คือ constraint-based layout system นั่นคือระบบวางเลย์เอาท์โดยอาศัยการสร้างความสัมพันธ์ระหว่าง element เพื่อให้ element ต่าง ๆ สามารถปรับตัวเองไปตามแต่ละขนาดหน้าจอได้เองอัตโนมัติ

ดังตัวอย่างรูปด้านล่างเป็นรูปของ TableViewCell อันหนึ่งที่เรากำหนดความกว้าง ความสูงของรูปโปรไฟล์ ระยะห่างจากด้านซ้าย ด้านบน และด้านขวา ส่วนของ Title ก็มีระยะจากขอบขวา แต่ไม่ได้กำหนดความกว้าง นั่นหมายความว่า เมื่อ Cell แคบลง Title จะเป็นส่วนที่แคบลง โดยที่ระยะจากภาพโปรไฟล์ และขนาดของภาพจะเท่าเดิม เมื่อ Title ยาวเป็นสองบรรทัด ก็จะดันส่วนของวันที่และเนื้อหาลงด้านล่างอัตโนมัติ โดยระยะห่างระหว่างวันที่กับ Title จะเท่าเดิม ก็จะทำให้ Cell นี้มีความสูงที่มากขึ้นเองอัตโนมัติ

ตั้ง Table ให้เต็มจอกัน

เรามาตั้งให้ TableView เต็มจอพอดีกัน เริ่มโดยการที่เราใส่ Constraint ทั้งสี่ด้าน ซ้าย บน ขวา และล่าง

โดยเลือกที่ TableView แล้วกด Add new constraint

ใส่ constraint ทั้งสี่ด้านให้ TableView

โดยปกติ Storyboard จะไม่แสดงเส้นขอบเขตของ View แต่ละอันบางครั้งทำให้เราเห็นไม่ชัด เราสามารถเปิดให้เห็นได้ง่ายขึ้นที่ Editor -> Canvas -> Show Bounds Rectangles

enable Show Bounds Rectangles

จากนั้นให้เราตั้งค่า Constraint ทั้งหมดให้เป็น 0 เพื่อให้ชิดขอบทั้งสี่ด้าน

ตั้งค่า Constant ใน Constraint ให้เป็น 0

เมื่อรันใหม่จะพบว่า ไม่ว่าจะหมุนยังไง TableView ก็จะปรับตัวเองให้เป็นไปตาม Constraint ที่เราตั้งไว้

อ่านเพิ่มเติมเกี่ยวกับ Auto layout ได้ที่

Understanding Auto Layout Auto Layout Tutorial in iOS 11: Getting Started