Auto Layout: nó là gì, bố cục thích ứng giao diện iOS

Auto Layout là gì?

Auto Layout là hệ thống bố cục thích ứng của Apple sử dụng các ràng buộc toán học (constraints) để định vị các phần tử UI. Không giống như bố cục dựa trên khung (frame-based layout), nơi mỗi phần tử có tọa độ cố định x, y, width, height, Auto Layout mô tả mối quan hệ giữa các phần tử: «nút cách cạnh phải của phần tử cha 8pt» hoặc «chiều rộng trường văn bản bằng một nửa chiều rộng màn hình». Cơ chế dựa trên thuật toán Cassowary, được phát triển tại University of Washington (Greg J. Badros, 1999) và được Apple triển khai trong iOS 6. Cassowary giải một hệ bất phương trình tuyến tính với các ưu tiên — Required (1000), Default High (750), Default Low (250) — cho phép quản lý xung đột ràng buộc. Auto Layout hỗ trợ ba loại kích thước: intrinsic (kích thước tự nhiên của phần tử được xác định bởi nội dung), explicit (ràng buộc được xác định rõ ràng) và compressible/stretchable (chế độ co giãn qua Content Hugging Priority và Compression Resistance Priority).

Intrinsic Content Size và Ưu tiên

Mỗi phần tử UI trong Auto Layout có Intrinsic Content Size — kích thước tự nhiên được xác định bởi nội dung của nó. Đối với UILabel, điều này phụ thuộc vào văn bản và phông chữ, đối với UIImageView — phụ thuộc vào kích thước hình ảnh. Content Hugging Priority (khả năng chống kéo giãn) và Compression Resistance Priority (khả năng chống nén) kiểm soát hành vi của phần tử khi không gian khả dụng thay đổi. Giá trị tiêu chuẩn: 251 cho hugging và 749 cho compression resistance. Nếu hai phần tử cạnh tranh không gian, ưu tiên xác định phần tử nào sẽ giãn ra trước. Hiểu các ưu tiên này là chìa khóa để giải quyết Ambiguous Layout (bố cục không rõ ràng), mà Xcode đánh dấu trong trình gỡ lỗi.

Giải phẫu một Constraint

Một constraint được mô tả bằng phương trình: view1.attribute = multiplier × view2.attribute + constant. Các thuộc tính bao gồm leading, trailing, top, bottom, centerX, centerY, width, height, firstBaseline, lastBaseline. Multiplier được sử dụng cho các mối quan hệ tỷ lệ (chiều rộng view1 = 0,5 × chiều rộng superview). Constant xác định độ lệch cố định (leading = superview.leading + 16). Các công cụ Interface Builder cho phép tạo constraints trực quan qua Ctrl-kéo, nhưng bố cục phức tạp yêu cầu tạo lập trình qua NSLayoutConstraint hoặc VFL (Visual Format Language), mà Apple khuyến nghị thay thế bằng NSLayoutConstraint từ iOS 9.

Constraints hoạt động như thế nào trong iOS

Hệ thống constraints được giải như một bài toán quy hoạch tuyến tính: thuật toán Cassowary tìm cách bố trí tối ưu của tất cả các phần tử thỏa mãn mọi ràng buộc có xét đến ưu tiên của chúng. Nếu các constraints mâu thuẫn nhau, Unsatisfiable Layout xảy ra — một ngoại lệ mà Xcode ghi lại với mô tả xung đột chi tiết. Nếu không có đủ constraints để xác định vị trí của ít nhất một phần tử, Ambiguous Layout xảy ra — các phần tử hiển thị ở vị trí tùy ý. Apple khuyến nghị một bộ tối thiểu: cho mỗi phần tử, position (x, y) và size (width, height) phải được đặt — rõ ràng hoặc thông qua intrinsic content size. Các constraints có thể là hạng nhất: phần tử dẫn đầu (ví dụ: superview) và phần tử theo sau (view con) tạo ra một hệ thống phân cấp.

Thuật toán Cassowary và ưu tiên

Cassowary sử dụng phương pháp Sequential Quadratic Programming để giải các hệ bất phương trình tuyến tính. Mỗi constraint có ưu tiên từ 1 đến 1000. Required (1000) là ràng buộc bắt buộc; nếu không thể thực hiện được, ứng dụng sẽ gặp sự cố với NSConstraintException. Default High (750) được khuyến nghị; Default Low (250) là ít quan trọng nhất. Khi xảy ra xung đột, Cassowary nới lỏng các ràng buộc có ưu tiên thấp hơn. Ví dụ: nếu hai phần tử yêu cầu chiều rộng cố định nhưng màn hình quá hẹp, ràng buộc có ưu tiên thấp hơn sẽ được nới lỏng. Trong Xcode Debug View Hierarchy (công cụ gỡ lỗi có sẵn từ Xcode 6) chỉ đánh dấu các vấn đề với Required constraints — phần còn lại được xử lý không có lỗi.

UIStackView: quản lý Constraints tự động

UIStackView là một container được giới thiệu trong iOS 9 (2015) tự động tạo và quản lý constraints cho các arrangedSubviews lồng nhau. UIStackView hỗ trợ hai trục: ngang và dọc. Cài đặt distribution xác định phân bổ không gian: fill (điền tỷ lệ theo hugging priority), fillEqually (kích thước bằng nhau), fillProportionally (tỷ lệ với intrinsic content size), equalSpacing (khoảng cách đều), equalCentering (khoảng cách đều giữa các tâm). Alignment xác định căn chỉnh chéo trục: fill, leading, center, trailing (cho ngang) hoặc fill, top, center, bottom (cho dọc). UIStackView tự động quản lý khoảng cách, căn chỉnh đường cơ sở và thích ứng với 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)
        ])
    }
}

Mã tạo một UIStackView dọc với hai phần tử (UILabel và UIButton), phân bổ đều (fillEqually) với khoảng cách 8pt. Stack được căn giữa màn hình với lề ít nhất 16pt từ các cạnh. translatesAutoresizingMaskIntoConstraints = false là bắt buộc khi tạo constraints bằng lập trình — nếu không có nó, Auto Layout không hoạt động. Tại IT Sectr, UIStackView được sử dụng trong 80% màn hình dự án iOS để xây dựng các biểu mẫu thích ứng, danh sách cài đặt và thẻ.

Stack Views lồng nhau

UIStackView có thể được lồng nhau: một stack ngang bên trong stack dọc là một mẫu tiêu chuẩn cho bố cục phức tạp. Stack bên ngoài quản lý các hàng, stack bên trong quản lý các cột trong mỗi hàng. Sự kết hợp của axis, alignment và distribution ở mỗi cấp độ mang lại sự linh hoạt gần như vô hạn mà không cần một constraint thủ công nào. Apple khuyến nghị UIStackView là công cụ bố cục chính trong UIKit, chỉ sử dụng NSLayoutConstraint thủ công cho các trường hợp không được stack bao phủ: các view chồng chéo, định vị chính xác pixel, hoạt ảnh bounds tùy chỉnh.

NSLayoutConstraint: tạo ràng buộc bằng lập trình

NSLayoutConstraint là API lập trình để tạo các ràng buộc riêng lẻ trong mã. Mỗi constraint được tạo qua một bộ khởi tạo với các tham số: item, attribute, relatedBy, toItem, attribute, multiplier, constant. Từ iOS 9, Apple giới thiệu Anchor API — cú pháp dễ đọc hơn qua các thuộc tính view.leadingAnchor, view.trailingAnchor, view.topAnchor, view.bottomAnchor, view.centerXAnchor, view.centerYAnchor, view.widthAnchor, view.heightAnchor. Anchor API tự động đặt relatedBy = .equal và sử dụng First Item/Second Item từ Anchors, giảm mã 40% so với NSLayoutConstraint cổ điển.

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)
        ])
    }
}

Mã định vị childView với lề từ safeAreaLayoutGuide (top) và các cạnh màn hình (leading/trailing). lessThanOrEqualTo cho bottom đảm bảo view không vượt quá ranh giới dưới. Anchor API ném ra ngoại lệ tại thời điểm biên dịch nếu các anchor không tương thích (ví dụ: leadingAnchor trộn với rightAnchor), ngăn ngừa lỗi thời gian chạy. Apple khuyến nghị Anchor API là tiêu chuẩn cho Auto Layout lập trình từ iOS 9.

Safe Area và Layout Margins trong Auto Layout

Safe Area là vùng màn hình không bị che bởi các phần tử hệ thống: Dynamic Island, Notch, Status Bar, Home Indicator, góc bo tròn. Trong iOS 11, Apple đã thay thế topLayoutGuide/bottomLayoutGuide bằng safeAreaLayoutGuide, tự động thích ứng với hướng thiết bị và sự hiện diện của phần cắt màn hình. Layout Margins là lề trong mặc định của view (16pt trên iOS, 20pt trên iPadOS). Đối với UILayoutGuide, bạn có thể đặt directionalLayoutMargins tùy chỉnh có tính đến bản địa hóa RIGHT-TO-LEFT. Auto Layout tự động tôn trọng safe area khi sử dụng safeAreaLayoutGuide trong các anchor.

Thích ứng với Dynamic Island và Notch

Trên các thiết bị có Dynamic Island (iPhone 14 Pro trở lên) và Notch (iPhone X–13), Safe Area loại trừ 44pt ở phía trên ở chế độ dọc (59pt với Dynamic Island ở trạng thái hoạt động). Home Indicator thêm 34pt ở phía dưới. Để thích ứng chính xác, tất cả các constraint trên phải được gắn vào safeAreaLayoutGuide.topAnchor, không phải view.topAnchor. Các constraint dưới phải được gắn vào safeAreaLayoutGuide.bottomAnchor hoặc view.bottomAnchor có lề cho Home Indicator. Tại IT Sectr, chúng tôi kiểm tra tất cả các màn hình trên trình mô phỏng iPhone SE (2022), iPhone 14 Pro Max và iPad Pro 12.9″ — ba thiết bị bao phủ mọi biến thể safe area.

Các lỗi Auto Layout thường gặp

Các lỗi phổ biến nhất khi làm việc với Auto Layout: quên translatesAutoresizingMaskIntoConstraints = false, xung đột Required constraints (ưu tiên 1000), Ambiguous Layout (không đủ constraints để xác định vị trí), Content Hugging Priority không chính xác cho UILabel nhiều dòng và trộn anchor leading/trailing với left/right. Xcode 15+ hiển thị vấn đề bố cục trong Runtime Issue Navigator và đề xuất sửa chữa tự động. Đối với bố cục phức tạp, hãy sử dụng Debug View Hierarchy: điểm đánh dấu màu vàng chỉ ambiguous layout, màu đỏ chỉ unsatisfiable.