Auto Layout: คืออะไร, การจัดวางอินเทอร์เฟส iOS แบบปรับเปลี่ยนได้

Auto Layout คืออะไร?

Auto Layout คือระบบการจัดวางแบบปรับเปลี่ยนได้ของ Apple ที่ใช้ข้อจำกัดทางคณิตศาสตร์ (constraints) เพื่อวางตำแหน่งองค์ประกอบ UI ต่างจากการจัดวางแบบเฟรม (frame-based layout) ที่แต่ละองค์ประกอบมีพิกัดคงที่ x, y, width, height Auto Layout อธิบายความสัมพันธ์ระหว่างองค์ประกอบ: «ปุ่มอยู่ห่างจากขอบขวาของพ่อแม่ 8pt» หรือ «ความกว้างของช่องข้อความเท่ากับครึ่งหนึ่งของความกว้างหน้าจอ» กลไกนี้อิงจากอัลกอริทึม Cassowary ซึ่งพัฒนาที่ University of Washington (Greg J. Badros, 1999) และนำไปใช้โดย Apple ใน iOS 6 Cassowary แก้ระบบอสมการเชิงเส้นที่มีลำดับความสำคัญ — Required (1000), Default High (750), Default Low (250) — ทำให้สามารถจัดการข้อขัดแย้งของข้อจำกัดได้ Auto Layout รองรับขนาดสามประเภท: intrinsic (ขนาดธรรมชาติขององค์ประกอบที่กำหนดโดยเนื้อหา), explicit (ข้อจำกัดที่กำหนดอย่างชัดเจน) และ compressible/stretchable (โหมดยืดหยุ่นผ่าน Content Hugging Priority และ Compression Resistance Priority)

Intrinsic Content Size และลำดับความสำคัญ

แต่ละองค์ประกอบ UI ใน Auto Layout มี Intrinsic Content Size — ขนาดธรรมชาติที่กำหนดโดยเนื้อหาของมัน สำหรับ UILabel ขึ้นอยู่กับข้อความและฟอนต์ สำหรับ UIImageView ขึ้นอยู่กับขนาดของรูปภาพ Content Hugging Priority (ความต้านทานต่อการยืด) และ Compression Resistance Priority (ความต้านทานต่อการบีบอัด) ควบคุมพฤติกรรมขององค์ประกอบเมื่อพื้นที่ว่างเปลี่ยนแปลง ค่ามาตรฐาน: 251 สำหรับ hugging และ 749 สำหรับ compression resistance หากสององค์ประกอบแข่งขันกันเพื่อพื้นที่ ลำดับความสำคัญจะเป็นตัวกำหนดว่าองค์ประกอบใดจะยืดออกก่อน การทำความเข้าใจลำดับความสำคัญเหล่านี้เป็นกุญแจสำคัญในการแก้ไข Ambiguous Layout (การจัดวางที่คลุมเครือ) ซึ่ง Xcode จะไฮไลต์ในดีบักเกอร์

โครงสร้างของ Constraint

Constraint อธิบายด้วยสมการ: view1.attribute = multiplier × view2.attribute + constant คุณลักษณะ (attribute) ประกอบด้วย leading, trailing, top, bottom, centerX, centerY, width, height, firstBaseline, lastBaseline Multiplier ใช้สำหรับความสัมพันธ์ตามสัดส่วน (ความกว้างของ view1 = 0.5 × ความกว้างของ superview) Constant กำหนดออฟเซ็ตคงที่ (leading = superview.leading + 16) เครื่องมือ Interface Builder ช่วยให้สามารถสร้าง constraints ด้วยภาพผ่านการลากโดยใช้ Ctrl แต่การจัดวางที่ซับซ้อนจำเป็นต้องสร้างโดยการเขียนโปรแกรมผ่าน NSLayoutConstraint หรือ VFL (Visual Format Language) ซึ่ง Apple แนะนำให้แทนที่ด้วย NSLayoutConstraint ตั้งแต่ iOS 9

Constraints ทำงานอย่างไรใน iOS

ระบบ constraints ได้รับการแก้ไขเป็นปัญหาการเขียนโปรแกรมเชิงเส้น: อัลกอริทึม Cassowary ค้นหาการจัดเรียงที่เหมาะสมที่สุดขององค์ประกอบทั้งหมดที่ตรงตามข้อจำกัดทั้งหมดโดยพิจารณาจากลำดับความสำคัญ หาก constraints ขัดแย้งกัน จะเกิด Unsatisfiable Layout — ข้อยกเว้นที่ Xcode บันทึกพร้อมคำอธิบายข้อขัดแย้งโดยละเอียด หากมี constraints ไม่เพียงพอที่จะกำหนดตำแหน่งขององค์ประกอบอย่างน้อยหนึ่งองค์ประกอบ จะเกิด Ambiguous Layout — องค์ประกอบจะแสดงในตำแหน่งตามอำเภอใจ Apple แนะนำชุดขั้นต่ำ: สำหรับแต่ละองค์ประกอบ ต้องกำหนด position (x, y) และ size (width, height) — อย่างชัดเจนหรือผ่าน intrinsic content size Constraints สามารถเป็นแบบ first-class: องค์ประกอบนำ (เช่น superview) และองค์ประกอบตาม (วิวลูก) สร้างลำดับชั้น

อัลกอริทึม Cassowary และลำดับความสำคัญ

Cassowary ใช้วิธีการ Sequential Quadratic Programming เพื่อแก้ระบบอสมการเชิงเส้น แต่ละ constraint มีลำดับความสำคัญตั้งแต่ 1 ถึง 1000 Required (1000) เป็นข้อจำกัดบังคับ หากไม่สามารถปฏิบัติตามได้ แอปจะหยุดทำงานด้วย NSConstraintException Default High (750) เป็นคำแนะนำ Default Low (250) มีความสำคัญน้อยที่สุด ในระหว่างข้อขัดแย้ง Cassowary จะผ่อนคลายข้อจำกัดที่มีลำดับความสำคัญต่ำกว่า ตัวอย่างเช่น หากสององค์ประกอบต้องการความกว้างคงที่แต่หน้าจอแคบเกินไป ข้อจำกัดที่มีลำดับความสำคัญต่ำกว่าจะถูกผ่อนคลาย ใน Xcode Debug View Hierarchy (เครื่องมือดีบักที่พร้อมใช้งานตั้งแต่ Xcode 6) จะไฮไลต์เฉพาะปัญหากับ Required constraints เท่านั้น — ส่วนที่เหลือจะถูกจัดการโดยไม่มีข้อผิดพลาด

UIStackView: การจัดการ Constraints อัตโนมัติ

UIStackView คือคอนเทนเนอร์ที่เปิดตัวใน iOS 9 (2015) ซึ่งสร้างและจัดการ constraints สำหรับ arrangedSubviews ที่ซ้อนกันโดยอัตโนมัติ UIStackView รองรับสองแกน: แนวนอนและแนวตั้ง การตั้งค่า distribution กำหนดการกระจายพื้นที่: fill (การเติมตามสัดส่วนตาม hugging priority), fillEqually (ขนาดเท่ากัน), fillProportionally (ตามสัดส่วนกับ intrinsic content size), equalSpacing (ระยะห่างเท่ากัน), equalCentering (ระยะห่างเท่ากันระหว่างจุดศูนย์กลาง) Alignment กำหนดการจัดตำแหน่งตามแกนขวาง: fill, leading, center, trailing (สำหรับแนวนอน) หรือ fill, top, center, bottom (สำหรับแนวตั้ง) UIStackView จัดการระยะห่าง การจัดตำแหน่งเส้นฐาน และการปรับให้เข้ากับ Dynamic Type โดยอัตโนมัติ

import UIKit

class StackViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let stack = UIStackView()
        stack.axis = NSLayoutConstraint.Axis.vertical
        stack.distribution = .fillEqually
        stack.spacing = 8
        stack.translatesAutoresizingMaskIntoConstraints = false
        
        let label = UILabel()
        label.text = "Auto Layout Guide"
        label.font = UIFont.preferredFont(forTextStyle: .headline)
        
        let button = UIButton(type: .system)
        button.setTitle("Apply", for: .normal)
        
        stack.addArrangedSubview(label)
        stack.addArrangedSubview(button)
        view.addSubview(stack)
        
        NSLayoutConstraint.activate([
            stack.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            stack.centerYAnchor.constraint(equalTo: view.centerYAnchor),
            stack.leadingAnchor.constraint(greaterThanOrEqualTo: view.leadingAnchor, constant: 16),
            stack.trailingAnchor.constraint(lessThanOrEqualTo: view.trailingAnchor, constant: -16)
        ])
    }
}

โค้ดสร้าง UIStackView แนวตั้งที่มีสององค์ประกอบ (UILabel และ UIButton) กระจายอย่างเท่าเทียมกัน (fillEqually) ด้วยระยะห่าง 8pt สแต็กถูกจัดกึ่งกลางบนหน้าจอโดยมีระยะขอบจากขอบอย่างน้อย 16pt translatesAutoresizingMaskIntoConstraints = false จำเป็นเมื่อสร้าง constraints โดยการเขียนโปรแกรม — หากไม่มี Auto Layout จะไม่ทำงาน ที่ IT Sectr เราใช้ UIStackView ใน 80% ของหน้าจอโปรเจกต์ iOS สำหรับสร้างฟอร์มที่ปรับเปลี่ยนได้ รายการตั้งค่า และการ์ด

Stack Views ที่ซ้อนกัน

UIStackView สามารถซ้อนกันได้: สแต็กแนวนอนภายในสแต็กแนวตั้งเป็นรูปแบบมาตรฐานสำหรับการจัดวางที่ซับซ้อน สแต็กภายนอกจัดการแถว สแต็กภายในจัดการคอลัมน์ภายในแต่ละแถว การรวมกันของ axis, alignment และ distribution ในแต่ละระดับให้ความยืดหยุ่นที่ไร้ขีดจำกัดโดยไม่ต้องมี constraint ด้วยตนเองแม้แต่ครั้งเดียว Apple แนะนำให้ใช้ UIStackView เป็นเครื่องมือจัดวางหลักใน UIKit โดยใช้ NSLayoutConstraint ด้วยตนเองเฉพาะกรณีที่สแต็กไม่ครอบคลุม: วิวที่ทับซ้อนกัน การวางตำแหน่งพิกเซลที่แม่นยำ แอนิเมชัน bounds ที่กำหนดเอง

NSLayoutConstraint: การสร้างข้อจำกัดโดยการเขียนโปรแกรม

NSLayoutConstraint คือ API สำหรับเขียนโปรแกรมเพื่อสร้างข้อจำกัดแต่ละรายการในโค้ด แต่ละ constraint ถูกสร้างขึ้นผ่านตัวเริ่มต้นด้วยพารามิเตอร์: item, attribute, relatedBy, toItem, attribute, multiplier, constant ตั้งแต่ iOS 9 Apple ได้เปิดตัว Anchor API — ไวยากรณ์ที่อ่านง่ายขึ้นผ่านคุณสมบัติ view.leadingAnchor, view.trailingAnchor, view.topAnchor, view.bottomAnchor, view.centerXAnchor, view.centerYAnchor, view.widthAnchor, view.heightAnchor Anchor API ตั้งค่า relatedBy = .equal โดยอัตโนมัติและใช้ First Item/Second Item จาก Anchors ทำให้โค้ดลดลง 40% เมื่อเทียบกับ NSLayoutConstraint แบบคลาสสิก

import UIKit

class ConstraintViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let childView = UIView()
        childView.backgroundColor = .systemBlue
        childView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(childView)
        
        NSLayoutConstraint.activate([
            childView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 24),
            childView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 16),
            childView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -16),
            childView.heightAnchor.constraint(equalToConstant: 120),
            childView.bottomAnchor.constraint(lessThanOrEqualTo: view.bottomAnchor, constant: -24)
        ])
    }
}

โค้ดวางตำแหน่ง childView โดยมีระยะขอบจาก safeAreaLayoutGuide (top) และขอบหน้าจอ (leading/trailing) lessThanOrEqualTo สำหรับ bottom รับประกันว่าวิวจะไม่เกินขอบเขตด้านล่าง Anchor API จะโยนข้อยกเว้นในเวลาคอมไพล์หาก anchors เข้ากันไม่ได้ (เช่น การผสม leadingAnchor กับ rightAnchor) ซึ่งป้องกันข้อผิดพลาดในขณะรันไทม์ Apple แนะนำ Anchor API เป็นมาตรฐานสำหรับ Auto Layout โดยการเขียนโปรแกรมตั้งแต่ iOS 9

Safe Area และ Layout Margins ใน Auto Layout

Safe Area คือพื้นที่หน้าจอที่ไม่ถูกบดบังโดยองค์ประกอบระบบ: Dynamic Island, Notch, Status Bar, Home Indicator, มุมโค้งมน ใน iOS 11 Apple แทนที่ topLayoutGuide/bottomLayoutGuide ด้วย safeAreaLayoutGuide ซึ่งปรับให้เข้ากับการวางแนวของอุปกรณ์และการมีอยู่ของรอยบากหน้าจอโดยอัตโนมัติ Layout Margins คือระยะขอบภายในเริ่มต้นของวิว (16pt บน iOS, 20pt บน iPadOS) สำหรับ UILayoutGuide คุณสามารถตั้งค่า directionalLayoutMargins แบบกำหนดเองโดยคำนึงถึงการแปลภาษา RIGHT-TO-LEFT Auto Layout ให้เกียรติ safe area โดยอัตโนมัติเมื่อใช้ safeAreaLayoutGuide ใน anchors

การปรับให้เข้ากับ Dynamic Island และ Notch

บนอุปกรณ์ที่มี Dynamic Island (iPhone 14 Pro และใหม่กว่า) และ Notch (iPhone X–13) Safe Area ไม่รวม 44pt ที่ด้านบนในแนวตั้ง (59pt กับ Dynamic Island ในสถานะทำงาน) Home Indicator เพิ่ม 34pt ที่ด้านล่าง เพื่อการปรับตัวอย่างถูกต้อง ข้อจำกัดด้านบนทั้งหมดควรยึดกับ safeAreaLayoutGuide.topAnchor ไม่ใช่ view.topAnchor ข้อจำกัดด้านล่างควรยึดกับ safeAreaLayoutGuide.bottomAnchor หรือ view.bottomAnchor โดยมีระยะเผื่อสำหรับ Home Indicator ที่ IT Sectr เราทดสอบทุกหน้าจอบนซิมulator iPhone SE (2022), iPhone 14 Pro Max และ iPad Pro 12.9″ — สามอุปกรณ์ที่ครอบคลุมทุกรูปแบบของ safe area

ข้อผิดพลาด Auto Layout ที่พบบ่อย

ข้อผิดพลาดที่พบบ่อยที่สุดเมื่อทำงานกับ Auto Layout: การลืม translatesAutoresizingMaskIntoConstraints = false, ขัดแย้งของ Required constraints (ลำดับความสำคัญ 1000), Ambiguous Layout (constraints ไม่เพียงพอในการกำหนดตำแหน่ง), Content Hugging Priority ไม่ถูกต้องสำหรับ UILabel หลายบรรทัด และการผสม leading/trailing กับ left/right anchors Xcode 15+ แสดงปัญหาการจัดวางใน Runtime Issue Navigator และเสนอการแก้ไขอัตโนมัติ สำหรับการจัดวางที่ซับซ้อน ให้ใช้ Debug View Hierarchy: เครื่องหมายสีเหลืองบ่งชี้ ambiguous layout สีแดงบ่งชี้ unsatisfiable