# Basic Auto Layout

## Auto Layout

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

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

![](https://759097476-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://759097476-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuqWEUpYllBlpWTYMEIgR%2Fuploads%2FJZDZ2jb6Zrwk6xAw4jr7%2FJun-26-2022%2011-44-31%20AM.gif?alt=media\&token=1ab5024c-e393-4f8d-964f-8a79fb1fef9b)

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

![ตั้งค่า Constant ใน Constraint ให้เป็น 0](https://759097476-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuqWEUpYllBlpWTYMEIgR%2Fuploads%2FNYakF4dpFnZYQamrf9OX%2FJun-26-2022%2011-47-53%20AM.gif?alt=media\&token=788bbb49-62be-484a-af48-01ec138d9dc1)

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

![](https://759097476-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuqWEUpYllBlpWTYMEIgR%2Fuploads%2F3AnDyTysO4pnkAekOqSK%2FScreen%20Shot%202022-06-26%20at%2011.50.56%20AM.png?alt=media\&token=7febcfa8-4368-4b46-b319-ca62959be073)

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

[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 %}
