🖥️
iOS App with Pop
UIKit Swift 5
UIKit Swift 5
  • iOS App development
  • Swift
    • Variable & Constant
    • Number & String
    • Operator
    • Array, Dictionary & Tuple
    • Enum
    • Optional
    • Function
    • Class & Struct
    • Branching
    • Loops
    • Error handler
    • Protocol
    • Extension
  • Create New Project
  • Introduction to Xcode
  • Scene-Based Life-Cycle
  • UIViewController
  • Storyboard
  • First Run
  • Display todo list
  • Basic Auto Layout
  • MVC
  • Model
  • Binding TableView
  • Binding TableViewCell
  • TableViewDelegate
  • Add navigationBar with + button
  • Add new item page
  • TextField and Switch
  • Binding action
  • Add mock item to todo list
  • What is weak?
  • Finish add item
  • Delete todo item
  • Edit todo item
  • Custom new layout
  • Adding new delegate
  • Refactor
  • Pushing edit view
  • Large navigation
  • Drag item
  • Drop item (in app)
  • Save data
  • Where to go from here?
Powered by GitBook
On this page
  • Auto Layout
  • ตั้ง Table ให้เต็มจอกัน

Basic Auto Layout

PreviousDisplay todo listNextMVC

Last updated 2 years ago

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 ทั้งหมดให้เป็น 0 เพื่อให้ชิดขอบทั้งสี่ด้าน

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

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

Understanding Auto Layou
t
Auto Layout Tutorial in iOS 11: Getting Started
ใส่ constraint ทั้งสี่ด้านให้ TableView
ตั้งค่า Constant ใน Constraint ให้เป็น 0