Auto Layout: apa itu, tata letak adaptif antarmuka iOS

Apa itu Auto Layout?

Auto Layout — adalah sistem tata letak adaptif Apple, yang menggunakan batasan matematis (constraints) untuk memposisikan elemen UI. Berbeda dengan tata letak berbasis bingkai (frame-based layout), di mana setiap elemen memiliki koordinat tetap x, y, width, height, Auto Layout menggambarkan hubungan antar elemen: «tombol berada 8pt dari tepi kanan induk» atau «lebar bidang teks sama dengan setengah lebar layar». Mekanismenya didasarkan pada algoritma Cassowary, dikembangkan di University of Washington (Greg J. Badros, 1999) dan diimplementasikan oleh Apple di iOS 6. Cassowary memecahkan sistem ketidaksetaraan linear dengan prioritas — Required (1000), Default High (750), Default Low (250) — yang memungkinkan pengelolaan konflik batasan. Auto Layout mendukung tiga jenis ukuran: intrinsic (ukuran alami elemen yang ditentukan oleh konten), explicit (batasan yang ditentukan secara eksplisit) dan compressible/stretchable (mode elastis melalui Content Hugging Priority dan Compression Resistance Priority).

Intrinsic Content Size dan Prioritas

Setiap elemen UI di Auto Layout memiliki Intrinsic Content Size — ukuran alami yang ditentukan oleh kontennya. Untuk UILabel tergantung pada teks dan font, untuk UIImageView — pada dimensi gambar. Content Hugging Priority (ketahanan terhadap peregangan) dan Compression Resistance Priority (ketahanan terhadap kompresi) mengelola perilaku elemen saat ruang yang tersedia berubah. Nilai standar: 251 untuk hugging dan 749 untuk compression resistance. Jika dua elemen bersaing untuk ruang, prioritas menentukan mana yang akan meregang terlebih dahulu. Memahami prioritas ini adalah kunci untuk menghilangkan Ambiguous Layout (tata letak ambigu), yang disorot Xcode di debugger.

Anatomi Constraint

Constraint dijelaskan dengan persamaan: view1.attribute = multiplier × view2.attribute + constant. Atribut mencakup leading, trailing, top, bottom, centerX, centerY, width, height, firstBaseline, lastBaseline. Multiplier digunakan untuk hubungan proporsional (lebar view1 = 0.5 × lebar superview). Constant menentukan jarak tetap (leading = superview.leading + 16). Alat Interface Builder memungkinkan pengaturan constraints secara visual melalui seret Ctrl, tetapi tata letak kompleks memerlukan pembuatan programatis melalui NSLayoutConstraint atau VFL (Visual Format Language), yang direkomendasikan Apple untuk diganti dengan NSLayoutConstraint sejak iOS 9.

Bagaimana Constraints bekerja di iOS

Sistem constraints diselesaikan sebagai masalah pemrograman linear: algoritma Cassowary menemukan posisi optimal semua elemen, memenuhi semua batasan dengan mempertimbangkan prioritasnya. Jika constraints saling bertentangan, muncul Unsatisfiable Layout — pengecualian yang dicatat Xcode dengan deskripsi konflik terperinci. Jika constraints tidak cukup untuk menentukan posisi setidaknya satu elemen, muncul Ambiguous Layout — elemen ditampilkan di posisi sembarang. Apple merekomendasikan set minimal: untuk setiap elemen harus ditentukan position (x, y) dan size (width, height) — secara eksplisit atau melalui intrinsic content size. Constraints bisa first-class: elemen utama (misalnya superview) dan dependen (view anak) menciptakan hierarki.

Algoritma Cassowary dan prioritas

Cassowary menggunakan metode Sequential Quadratic Programming untuk menyelesaikan sistem ketidaksetaraan linear. Setiap constraint memiliki prioritas dari 1 hingga 1000. Required (1000) — batasan wajib; jika tidak dapat dipenuhi, aplikasi crash dengan NSConstraintException. Default High (750) — direkomendasikan; Default Low (250) — paling tidak penting. Saat terjadi konflik, Cassowary melonggarkan batasan dengan prioritas lebih rendah. Misalnya, jika dua elemen memerlukan lebar tetap dan layar terlalu sempit, constraint dengan prioritas lebih rendah dilonggarkan. Di Xcode Debug View Hierarchy (alat debug yang tersedia sejak Xcode 6) hanya menyoroti masalah dengan Required constraints — sisanya diproses tanpa kesalahan.

UIStackView: manajemen otomatis Constraints

UIStackView — wadah yang diperkenalkan di iOS 9 (2015), yang secara otomatis membuat dan mengelola constraints untuk arrangedSubviews bertingkat. UIStackView mendukung dua sumbu: horizontal (tata letak horizontal) dan vertical (vertikal). Pengaturan distribution menentukan distribusi ruang: fill (pengisian proporsional terhadap hugging priority), fillEqually (ukuran sama), fillProportionally (proporsional terhadap intrinsic content size), equalSpacing (jarak sama), equalCentering (jarak sama antara pusat). Alignment menentukan perataan melintang sumbu: fill, leading, center, trailing (untuk horizontal) atau fill, top, center, bottom (untuk vertical). UIStackView secara otomatis mengelola spacing, baseline alignment dan adaptasi ke 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 = "Panduan Auto Layout"
        label.font = UIFont.preferredFont(forTextStyle: .headline)
        
        let button = UIButton(type: .system)
        button.setTitle("Terapkan", 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)
        ])
    }
}

Kode membuat UIStackView vertikal dengan dua elemen (UILabel dan UIButton), didistribusikan secara merata (fillEqually) dengan jarak 8pt. Stack dipusatkan di layar dengan margin dari tepi setidaknya 16pt. translatesAutoresizingMaskIntoConstraints = false wajib saat membuat constraints secara programatis — tanpanya Auto Layout tidak berfungsi. Di IT Sectr, UIStackView digunakan di 80% layar proyek iOS untuk membangun formulir adaptif, daftar pengaturan dan kartu.

Tumpukan View Bertingkat

UIStackView dapat bertingkat: tumpukan horizontal di dalam vertikal — pola standar untuk tata letak kompleks. Tumpukan luar mengelola baris, tumpukan dalam — kolom di dalam baris. Kombinasi axis, alignment dan distribution di setiap tingkat memberikan fleksibilitas hampir tak terbatas tanpa satu pun constraint manual. Apple merekomendasikan penggunaan UIStackView sebagai alat tata letak utama di UIKit, menggunakan NSLayoutConstraint manual hanya untuk kasus yang tidak tercakup oleh tumpukan: view tumpang tindih, penentuan posisi presisi piksel, animasi bounds kustom.

NSLayoutConstraint: pembuatan batasan secara programatis

NSLayoutConstraint — API pemrograman untuk membuat batasan individu dalam kode. Setiap constraint dibuat melalui inisialisasi dengan parameter: item, attribute, relatedBy, toItem, attribute, multiplier, constant. Sejak iOS 9 Apple memperkenalkan Anchor API — sintaks yang lebih mudah dibaca melalui properti view.leadingAnchor, view.trailingAnchor, view.topAnchor, view.bottomAnchor, view.centerXAnchor, view.centerYAnchor, view.widthAnchor, view.heightAnchor. Anchor API secara otomatis menetapkan relatedBy = .equal dan menggunakan First Item/Second Item dari Anchor, mengurangi kode sebesar 40% dibandingkan dengan NSLayoutConstraint klasik.

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

Kode memposisikan childView dengan margin dari safeAreaLayoutGuide (top) dan tepi layar (leading/trailing). lessThanOrEqualTo untuk bottom memastikan bahwa view tidak melebihi batas bawah. Anchor API melempar pengecualian pada tahap kompilasi jika anchor tidak kompatibel (misalnya, leadingAnchor dicampur dengan rightAnchor), mencegah kesalahan runtime. Apple merekomendasikan Anchor API sebagai standar untuk Auto Layout programatis sejak iOS 9.

Safe Area dan Layout Margins di Auto Layout

Safe Area — area layar yang tidak tertutup oleh elemen sistem: Dynamic Island, Notch, Status Bar, Home Indicator, sudut membulat. Di iOS 11 Apple mengganti topLayoutGuide/bottomLayoutGuide dengan safeAreaLayoutGuide, yang secara otomatis menyesuaikan dengan orientasi perangkat dan keberadaan potongan layar. Layout Margins — margin internal default view (16pt di iOS, 20pt di iPadOS). Untuk UILayoutGuide dapat diatur directionalLayoutMargins khusus dengan mempertimbangkan lokalisasi RIGHT-TO-LEFT. Auto Layout secara otomatis memperhitungkan safe area saat menggunakan safeAreaLayoutGuide di anchors.

Adaptasi ke Dynamic Island dan Notch

Pada perangkat dengan Dynamic Island (iPhone 14 Pro dan lebih baru) dan Notch (iPhone X–13) Safe Area mengecualikan 44pt dari atas dalam potret (59pt dengan Dynamic Island dalam keadaan aktif). Home Indicator menambahkan 34pt dari bawah. Untuk adaptasi yang benar, semua top-constraints harus terikat ke safeAreaLayoutGuide.topAnchor, bukan ke view.topAnchor. Bottom-constraints — ke safeAreaLayoutGuide.bottomAnchor atau view.bottomAnchor dengan cadangan untuk Home Indicator. Di IT Sectr kami menguji semua layar pada simulator iPhone SE (2022), iPhone 14 Pro Max dan iPad Pro 12.9″ — tiga perangkat yang mencakup semua varian safe area.

Kesalahan umum Auto Layout

Kesalahan paling umum saat bekerja dengan Auto Layout: translatesAutoresizingMaskIntoConstraints = false terlupakan, konflik Required constraints (prioritas 1000), Ambiguous Layout (constraints tidak cukup untuk menentukan posisi), Content Hugging Priority salah untuk UILabel dengan teks multi-baris dan percampuran leading/trailing dengan left/right anchors. Xcode 15+ menampilkan masalah tata letak di Runtime Issue Navigator dan menawarkan koreksi otomatis. Untuk tata letak kompleks gunakan Debug View Hierarchy: label kuning menunjukkan ambiguous layout, merah — unsatisfiable.