> For the complete documentation index, see [llms.txt](https://pakornpat.gitbook.io/ios-app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://pakornpat.gitbook.io/ios-app/v1/basic-auto-layout.md).

# Basic Auto Layout

## Auto Layout

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

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

![](https://1168329629-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LGk7Utff0rVWsqK4eYO%2F-LHbCERI5mGCw71xvZMe%2F-LHbCGd9F0feKhXh1oOD%2FScreen%20Shot%202018-07-17%20at%2014.46.47.png?alt=media\&token=c9f25c1f-0ae7-4d62-a0bc-235a3e96b1ab)

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

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

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

![ใส่ constraint ทั้งสี่ด้านให้ TableView](https://1168329629-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LGk7Utff0rVWsqK4eYO%2F-LGn51wrWuKvb_12osxv%2F-LGn6YgNiskZ5zN2xdZG%2FaddAutoLayout.gif?alt=media\&token=f23f824d-16a3-4b17-b1b9-1983cdf16345)

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

![enable Show Bounds Rectangles](https://1168329629-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LGk7Utff0rVWsqK4eYO%2F-LGn3SiCdPfWXiuSnxzg%2F-LGn3V6noas6y_9uV5Zn%2FScreen%20Shot%202018-07-06%20at%2022.55.16.png?alt=media\&token=e920d688-dce9-449f-b909-2cc1afc6e71a)

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

![ตั้งค่า Constant ใน Constraint ให้เป็น 0](https://1168329629-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LGk7Utff0rVWsqK4eYO%2F-LGnNMwzm-OGEkZXEF6g%2F-LGnNPtlK4cgy2g1XtOt%2FadjustAutoLayout.gif?alt=media\&token=cbb109a1-ce50-4750-8d0a-34c6ef28bf96)

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

![](https://1168329629-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LGk7Utff0rVWsqK4eYO%2F-LGnNxqmrdYTworteBDd%2F-LGnO05JObBo4qSgrgPW%2FrunAfterAddAutoLayout.gif?alt=media\&token=84e226d3-1c28-4ac1-abf0-4e913f1c8db4)

{% hint style="info" %}
อ่านเพิ่มเติมเกี่ยวกับ Auto layout ได้ที่ 

[Understanding Auto Layou](https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/AutolayoutPG/index.html)[t](https://www.raywenderlich.com/160527/auto-layout-tutorial-ios-11-getting-started)\
[Auto Layout Tutorial in iOS 11: Getting Started](https://www.raywenderlich.com/160527/auto-layout-tutorial-ios-11-getting-started)
{% endhint %}