Auto Layout: bu nima, adaptiv iOS interfeys tartibi

Auto Layout nima?

Auto Layout — UI-elementlarni joylashtirish uchun matematik cheklovlardan (constraints) foydalanadigan Apple adaptiv tartib tizimi. Har bir element qat'iy x, y, width, height koordinatalariga ega bo'lgan ramka asosidagi tartibdan (frame-based layout) farqli o'laroq, Auto Layout elementlar orasidagi munosabatlarni tasvirlaydi: «tugma ota-onaning o'ng chetidan 8pt masofada» yoki «matn maydonining kengligi ekran kengligining yarmiga teng». Mexanizm Washington universitetida (Greg J. Badros, 1999) ishlab chiqilgan va Apple tomonidan iOS 6'da joriy qilingan Cassowary algoritmiga asoslanadi. Cassowary prioritetlar bilan chiziqli tengsizliklar tizimini yechadi — Required (1000), Default High (750), Default Low (250) — bu cheklovlar ziddiyatlarini boshqarishga imkon beradi. Auto Layout uch turdagi o'lchamni qo'llab-quvvatlaydi: intrinsic (elementning tarkib bilan aniqlanadigan tabiiy o'lchami), explicit (aniq ko'rsatilgan constraint) va compressible/stretchable (Content Hugging Priority va Compression Resistance Priority orqali elastik rejim).

Intrinsic Content Size va Prioritetlar

Auto Layout'dagi har bir UI-element Intrinsic Content Size — tarkibi bilan aniqlanadigan tabiiy o'lchamga ega. UILabel uchun bu matn va shriftga, UIImageView uchun esa rasm o'lchamlariga bog'liq. Content Hugging Priority (cho'zilishga qarshilik) va Compression Resistance Priority (siqilishga qarshilik) mavjud joy o'zgarganda elementning xatti-harakatini boshqaradi. Standart qiymatlar: hugging uchun 251 va compression resistance uchun 749. Ikki element joy uchun raqobatlashsa, prioritet qaysi biri birinchi cho'zilishini aniqlaydi. Ushbu prioritetlarni tushunish, Xcode debugger'da ta'kidlaydigan Ambiguous Layout (noaniq tartib) ni bartaraf etish uchun kalitdir.

Constraint Anatomiyasi

Constraint tenglama bilan tavsiflanadi: view1.attribute = multiplier × view2.attribute + constant. Atributlarga leading, trailing, top, bottom, centerX, centerY, width, height, firstBaseline, lastBaseline kiradi. Multiplier proporsional munosabatlar uchun ishlatiladi (kenglik view1 = 0.5 × kenglik superview). Constant qat'iy masofani belgilaydi (leading = superview.leading + 16). Interface Builder vositalari constraints'larni Ctrl-sudrab olib vizual belgilashga imkon beradi, ammo murakkab tartiblar NSLayoutConstraint yoki Apple iOS 9'dan boshlab NSLayoutConstraint bilan almashtirishni tavsiya qiladigan VFL (Visual Format Language) orqali dasturiy yaratishni talab qiladi.

iOS'da Constraints qanday ishlaydi

Constraints tizimi chiziqli dasturlash masalasi sifatida yechiladi: Cassowary algoritmi barcha elementlarning optimal joylashuvini topadi, barcha cheklovlarni ularning prioritetlarini hisobga olgan holda qondiradi. Agar constraints bir-biriga zid bo'lsa, Unsatisfiable Layout yuzaga keladi — Xcode ziddiyatning batafsil tavsifi bilan qayd qiladigan istisno. Agar constraints kamida bitta elementning joylashuvini aniqlash uchun yetarli bo'lmasa, Ambiguous Layout yuzaga keladi — elementlar tasodifiy joyda ko'rsatiladi. Apple minimal to'plamni tavsiya qiladi: har bir element uchun position (x, y) va size (width, height) — aniq yoki intrinsic content size orqali belgilanishi kerak. Constraints first-class bo'lishi mumkin: yetakchi element (masalan, superview) va tobe (bolaviy view) iyerarxiya yaratadi.

Cassowary Algoritmi va prioritetlar

Cassowary chiziqli tengsizliklar tizimini yechish uchun Sequential Quadratic Programming usulidan foydalanadi. Har bir constraint 1 dan 1000 gacha prioritetga ega. Required (1000) — majburiy cheklov; agar uni bajarish mumkin bo'lmasa, ilova NSConstraintException bilan ishdan chiqadi. Default High (750) — tavsiyaviy; Default Low (250) — eng kam ahamiyatli. Ziddiyat bo'lganda, Cassowary past prioritetli cheklovlarni zaiflashtiradi. Masalan, ikki element qat'iy kenglik talab qilsa va ekran juda tor bo'lsa, past prioritetli constraint zaiflashtiriladi. Xcode Debug View Hierarchy (Xcode 6'dan mavjud disk raskadrovka vositasi) faqat Required constraints bilan bog'liq muammolarni ta'kidlaydi — qolganlari xatosiz ishlanadi.

UIStackView: Constraints'ni avtomatik boshqarish

UIStackView — iOS 9'da (2015) taqdim etilgan, ichki arrangedSubviews uchun constraints'larni avtomatik yaratadigan va boshqaradigan konteyner. UIStackView ikki o'qni qo'llab-quvvatlaydi: horizontal (gorizontal tartib) va vertical (vertikal). Distribution sozlamalari joyning taqsimlanishini aniqlaydi: fill (hugging priority ga mutanosib to'ldirish), fillEqually (teng o'lchamlar), fillProportionally (intrinsic content size ga mutanosib), equalSpacing (teng bo'shliqlar), equalCentering (markazlar orasidagi teng masofalar). Alignment o'q bo'ylab tekislashni belgilaydi: fill, leading, center, trailing (horizontal uchun) yoki fill, top, center, bottom (vertical uchun). UIStackView avtomatik ravishda spacing, baseline alignment va Dynamic Type ga moslashishni boshqaradi.

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 Qo'llanma"
        label.font = UIFont.preferredFont(forTextStyle: .headline)
        
        let button = UIButton(type: .system)
        button.setTitle("Qo'llash", 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)
        ])
    }
}

Kod ikki elementli (UILabel va UIButton) vertikal UIStackView yaratadi, teng taqsimlangan (fillEqually) 8pt bo'shliq bilan. Stack chekkalardan kamida 16pt bo'shliq bilan ekranda markazlashtirilgan. translatesAutoresizingMaskIntoConstraints = false dasturiy constraints yaratishda majburiydir — usiz Auto Layout ishlamaydi. IT Sectr'da UIStackView iOS loyihalarining 80% ekranlarida adaptiv formalar, sozlamalar ro'yxatlari va kartalar qurish uchun ishlatiladi.

Ichki Stack View'lar

UIStackView'lar ichki bo'lishi mumkin: vertikal ichidagi gorizontal stack — murakkab tartiblar uchun standart naqsh. Tashqi stack qatorlarni, ichki stack esa qator ichidagi ustunlarni boshqaradi. Har bir darajadagi axis, alignment va distribution kombinatsiyasi bironta ham qo'lda constraintsiz deyarli cheksiz moslashuvchanlikni beradi. Apple UIStackView'dan UIKit'da asosiy tartib vositasi sifatida foydalanishni tavsiya qiladi, qo'lda NSLayoutConstraint ga faqat stack qamrab olmagan holatlarda murojaat qiladi: bir-birining ustiga chiqadigan view'lar, piksel aniqligida joylashtirish, maxsus bounds animatsiyasi.

NSLayoutConstraint: dasturiy cheklovlarni yaratish

NSLayoutConstraint — koddagi alohida cheklovlarni yaratish uchun dasturiy API. Har bir constraint parametrlar bilan initilizator orqali yaratiladi: item, attribute, relatedBy, toItem, attribute, multiplier, constant. iOS 9'dan boshlab Apple Anchor API ni taqdim etdi — view.leadingAnchor, view.trailingAnchor, view.topAnchor, view.bottomAnchor, view.centerXAnchor, view.centerYAnchor, view.widthAnchor, view.heightAnchor xususiyatlari orqali o'qilishi osonroq sintaksis. Anchor API avtomatik ravishda relatedBy = .equal ni o'rnatadi va Anchor'dan First Item/Second Item dan foydalanadi, kodni klassik NSLayoutConstraint bilan solishtirganda 40% qisqartiradi.

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

Kod childView ni safeAreaLayoutGuide (top) va ekran chekkalaridan (leading/trailing) bo'shliqlar bilan joylashtiradi. Bottom uchun lessThanOrEqualTo viewning pastki chegaradan chiqmasligini ta'minlaydi. Anchor API anchor'lar mos kelmaganda (masalan, leadingAnchor rightAnchor bilan aralashtirilganda) kompilyatsiya bosqichida istisno tashlaydi, bu runtime xatolarining oldini oladi. Apple iOS 9'dan boshlab dasturiy Auto Layout uchun Anchor API ni standart sifatida tavsiya qiladi.

Auto Layout'da Safe Area va Layout Margins

Safe Area — tizim elementlari bilan qoplanmagan ekran maydoni: Dynamic Island, Notch, Status Bar, Home Indicator, yumaloq burchaklar. iOS 11'da Apple topLayoutGuide/bottomLayoutGuide ni safeAreaLayoutGuide bilan almashtirdi, u avtomatik ravishda qurilma yo'nalishi va ekran kesimining mavjudligiga moslashadi. Layout Margins — view'larning standart ichki chegaralari (iOS'da 16pt, iPadOS'da 20pt). UILayoutGuide uchun RIGHT-TO-LEFT lokalizatsiyasini hisobga olgan holda maxsus directionalLayoutMargins o'rnatilishi mumkin. Auto Layout anchor'larda safeAreaLayoutGuide ishlatilganda avtomatik ravishda safe area ni hisobga oladi.

Dynamic Island va Notch ga moslashish

Dynamic Island (iPhone 14 Pro va undan yangi) va Notch (iPhone X–13) bo'lgan qurilmalarda Safe Area portret yo'nalishida yuqoridan 44pt (faol holatda Dynamic Island bilan 59pt) istisno qiladi. Home Indicator pastdan 34pt qo'shadi. To'g'ri moslashish uchun barcha top-constraints safeAreaLayoutGuide.topAnchor ga bog'lanishi kerak, view.topAnchor ga emas. Bottom-constraints — safeAreaLayoutGuide.bottomAnchor yoki Home Indicator zaxirasi bilan view.bottomAnchor ga. IT Sectr'da barcha ekranlarni iPhone SE (2022), iPhone 14 Pro Max va iPad Pro 12.9″ simulyatorlarida sinovdan o'tkazamiz — safe area ning barcha variantlarini qamrab oluvchi uchta qurilma.

Auto Layout'ning odatiy xatolari

Auto Layout bilan ishlashda eng keng tarqalgan xatolar: unutilgan translatesAutoresizingMaskIntoConstraints = false, ziddiyatli Required constraints (prioritet 1000), Ambiguous Layout (joylashuvni aniqlash uchun constraints yetarli emas), ko'p qatorli matnli UILabel uchun noto'g'ri Content Hugging Priority va leading/trailing ni left/right anchors bilan aralashtirish. Xcode 15+ tartib muammolarini Runtime Issue Navigator'da ko'rsatadi va avtomatik tuzatishlarni taklif qiladi. Murakkab tartiblar uchun Debug View Hierarchy dan foydalaning: sariq belgilar ambiguous layout ni, qizil belgilar unsatisfiable ni ko'rsatadi.