Auto Layout: bu nədir, adaptiv iOS interfeys düzümü

Auto Layout nədir?

Auto Layout — UI-elementlərin yerləşdirilməsi üçün riyazi məhdudiyyətlərdən (constraints) istifadə edən Apple adaptiv düzüm sistemidir. Hər bir elementin sabit x, y, width, height koordinatlarına malik olduğu çərçivə əsaslı düzümdən (frame-based layout) fərqli olaraq, Auto Layout elementlər arasındakı əlaqələri təsvir edir: «düymə valideynin sağ kənarından 8pt məsafədədir» və ya «mətn sahəsinin eni ekran eninin yarısına bərabərdir». Mexanizm Washington Universitetində (Greg J. Badros, 1999) hazırlanmış və Apple tərəfindən iOS 6-da tətbiq edilmiş Cassowary alqoritminə əsaslanır. Cassowary prioritetlərlə xətti bərabərsizliklər sistemini həll edir — Required (1000), Default High (750), Default Low (250) — bu, məhdudiyyət münaqişələrini idarə etməyə imkan verir. Auto Layout üç növ ölçü dəstəkləyir: intrinsic (elementin məzmunla müəyyən edilən təbii ölçüsü), explicit (açıqca göstərilən constraint) və compressible/stretchable (Content Hugging Priority və Compression Resistance Priority vasitəsilə rejim).

Intrinsic Content Size və Prioritetlər

Auto Layout-da hər bir UI-element Intrinsic Content Size — məzmunu ilə müəyyən edilən təbii ölçüyə malikdir. UILabel üçün bu mətn və şriftdən, UIImageView üçün şəkil ölçülərindən asılıdır. Content Hugging Priority (uzanmaya müqavimət) və Compression Resistance Priority (sıxılmaya müqavimət) mövcud yer dəyişdikdə elementin davranışını idarə edir. Standart dəyərlər: hugging üçün 251 və compression resistance üçün 749. İki element yer uğrunda rəqabət apararsa, prioritet hansının birinci uzanacağını müəyyən edir. Bu prioritetləri başa düşmək, Xcode-un debugger-də vurğuladığı Ambiguous Layout (qeyri-müəyyən düzüm) aradan qaldırmaq üçün açardır.

Constraint-in Anatomiyası

Constraint tənliklə təsvir olunur: view1.attribute = multiplier × view2.attribute + constant. Atributlara leading, trailing, top, bottom, centerX, centerY, width, height, firstBaseline, lastBaseline daxildir. Multiplier mütənasib əlaqələr üçün istifadə olunur (en view1 = 0.5 × en superview). Constant sabit boşluğu təyin edir (leading = superview.leading + 16). Interface Builder alətləri constraints-ləri Ctrl-sürükləmə ilə vizual təyin etməyə imkan verir, lakin mürəkkəb düzümlər NSLayoutConstraint və ya Apple-ın iOS 9-dan etibarən NSLayoutConstraint ilə əvəz etməyi tövsiyə etdiyi VFL (Visual Format Language) vasitəsilə proqram yaradılmasını tələb edir.

iOS-da Constraints necə işləyir

Constraints sistemi xətti proqramlaşdırma məsələsi kimi həll olunur: Cassowary alqoritmi bütün elementlərin optimal yerləşməsini tapır, bütün məhdudiyyətləri onların prioritetləri nəzərə alaraq təmin edir. Əgər constraints bir-birinə ziddirsə, Unsatisfiable Layout yaranır — Xcode-un münaqişənin ətraflı təsviri ilə qeydə aldığı istisna. Əgər constraints ən azı bir elementin mövqeyini müəyyən etmək üçün kifayət deyilsə, Ambiguous Layout yaranır — elementlər təsadüfi mövqedə göstərilir. Apple minimal dəsti tövsiyə edir: hər bir element üçün position (x, y) və size (width, height) — açıqca və ya intrinsic content size vasitəsilə təyin edilməlidir. Constraints birinci dərəcəli ola bilər: aparıcı element (məsələn, superview) və asılı (uşaq view) iyerarxiya yaradır.

Cassowary Alqoritmi və prioritetlər

Cassowary xətti bərabərsizliklər sistemlərini həll etmək üçün Sequential Quadratic Programming metodundan istifadə edir. Hər bir constraint 1-dən 1000-dək prioritetə malikdir. Required (1000) — məcburi məhdudiyyət; onu yerinə yetirmək mümkün deyilsə, tətbiq NSConstraintException ilə çökür. Default High (750) — tövsiyə; Default Low (250) — ən az əhəmiyyətli. Münaqişə zamanı Cassowary aşağı prioritetli məhdudiyyətləri zəiflədir. Məsələn, iki element sabit en tələb edirsə və ekran çox dardırsa, daha aşağı prioritetli constraint zəiflədilir. Xcode Debug View Hierarchy (Xcode 6-dan mövcud olan debug aləti) yalnız Required constraints ilə problemləri vurğulayır — qalanları xətasız işlənir.

UIStackView: Constraints-lərin avtomatik idarə edilməsi

UIStackView — iOS 9-da (2015) təqdim edilmiş, daxili arrangedSubviews üçün constraints-ləri avtomatik yaradan və idarə edən konteyner. UIStackView iki ox dəstəkləyir: horizontal (üfüqi düzüm) və vertical (şaquli). Distribution parametrləri yerin bölüşdürülməsini müəyyən edir: fill (hugging priority-ə mütənasib doldurma), fillEqually (bərabər ölçülər), fillProportionally (intrinsic content size-ə mütənasib), equalSpacing (bərabər boşluqlar), equalCentering (mərkəzlər arasında bərabər məsafələr). Alignment ox boyunca düzülüşü təyin edir: fill, leading, center, trailing (horizontal üçün) və ya fill, top, center, bottom (vertical üçün). UIStackView avtomatik olaraq spacing, baseline alignment və Dynamic Type-a uyğunlaşmanı idarə edir.

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 Bələdçisi"
        label.font = UIFont.preferredFont(forTextStyle: .headline)
        
        let button = UIButton(type: .system)
        button.setTitle("Tətbiq et", 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 iki elementli (UILabel və UIButton) şaquli UIStackView yaradır, bərabər paylanmış (fillEqually) 8pt boşluqla. Stack kənarlardan ən azı 16pt boşluqla ekranda mərkəzləşdirilir. translatesAutoresizingMaskIntoConstraints = false proqram constraints yaradılması zamanı məcburidir — onsuz Auto Layout işləmir. IT Sectr-da UIStackView iOS layihələrinin 80% ekranlarında adaptiv formalar, parametr siyahıları və kartlar qurmaq üçün istifadə olunur.

Daxili Stack View-lər

UIStackView-lər daxili ola bilər: şaquli içərisində üfüqi stack — mürəkkəb düzümlər üçün standart nümunə. Xarici stack sətirləri, daxili stack isə sətir daxilində sütunları idarə edir. Hər səviyyədə axis, alignment və distribution kombinasiyası bir ədəd də olsun əl constraint olmadan praktiki olaraq limitsiz çeviklik verir. Apple UIStackView-dən UIKit-də əsas düzüm aləti kimi istifadə etməyi tövsiyə edir, əl NSLayoutConstraint-ə yalnız stack-in əhatə etmədiyi hallarda müraciət edir: üst-üstə düşən view-lər, piksel dəqiqliyində yerləşdirmə, xüsusi bounds animasiyası.

NSLayoutConstraint: proqram məhdudiyyətlərinin yaradılması

NSLayoutConstraint — koddakı fərdi məhdudiyyətləri yaratmaq üçün proqram API. Hər bir constraint parametrlərlə initilizator vasitəsilə yaradılır: item, attribute, relatedBy, toItem, attribute, multiplier, constant. iOS 9-dan etibarən Apple Anchor API-ni təqdim etdi — view.leadingAnchor, view.trailingAnchor, view.topAnchor, view.bottomAnchor, view.centerXAnchor, view.centerYAnchor, view.widthAnchor, view.heightAnchor xassələri vasitəsilə daha oxunaqlı sintaksis. Anchor API avtomatik olaraq relatedBy = .equal təyin edir və Anchor-dan First Item/Second Item istifadə edir, kodu klassik NSLayoutConstraint ilə müqayisədə 40% qısaldır.

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-i safeAreaLayoutGuide (top) və ekran kənarlarından (leading/trailing) boşluqlarla yerləşdirir. Bottom üçün lessThanOrEqualTo view-in aşağı sərhəddən kənara çıxmamasını təmin edir. Anchor API anchor-lar uyğun gəlmədikdə (məsələn, leadingAnchor rightAnchor ilə qarışdırıldıqda) kompilyasiya mərhələsində istisna atır, bu da runtime səhvlərinin qarşısını alır. Apple iOS 9-dan etibarən proqram Auto Layout üçün Anchor API-ni standart olaraq tövsiyə edir.

Auto Layout-da Safe Area və Layout Margins

Safe Area — sistem elementləri ilə örtülməyən ekran sahəsi: Dynamic Island, Notch, Status Bar, Home Indicator, yuvarlaq künclər. iOS 11-də Apple topLayoutGuide/bottomLayoutGuide-ni safeAreaLayoutGuide ilə əvəz etdi, bu da avtomatik olaraq cihazın oriyentasiyasına və ekran kəsiklərinin mövcudluğuna uyğunlaşır. Layout Margins — view-lərin standart daxili boşluqları (iOS-da 16pt, iPadOS-da 20pt). UILayoutGuide üçün RIGHT-TO-LEFT lokalizasiyası nəzərə alınmaqla xüsusi directionalLayoutMargins təyin edilə bilər. Auto Layout anchor-larda safeAreaLayoutGuide istifadə edərkən avtomatik olaraq safe area-nı nəzərə alır.

Dynamic Island və Notch-a uyğunlaşma

Dynamic Island (iPhone 14 Pro və daha yeni) və Notch (iPhone X–13) olan cihazlarda Safe Area portret oriyentasiyasında yuxarıdan 44pt (aktiv vəziyyətdə Dynamic Island ilə 59pt) istisna edir. Home Indicator aşağıdan 34pt əlavə edir. Düzgün uyğunlaşma üçün bütün top-constraints safeAreaLayoutGuide.topAnchor-a bağlanmalıdır, view.topAnchor-a deyil. Bottom-constraints — safeAreaLayoutGuide.bottomAnchor və ya Home Indicator ehtiyatı ilə view.bottomAnchor-a. IT Sectr-da bütün ekranları iPhone SE (2022), iPhone 14 Pro Max və iPad Pro 12.9″ simulyatorlarında test edirik — safe area-nın bütün variantlarını əhatə edən üç cihaz.

Auto Layout-un tipik səhvləri

Auto Layout ilə işləyərkən ən çox yayılmış səhvlər: unudulmuş translatesAutoresizingMaskIntoConstraints = false, ziddiyyətli Required constraints (prioritet 1000), Ambiguous Layout (mövqeyi müəyyən etmək üçün kifayət qədər constraint olmaması), çoxsətirli mətnli UILabel üçün səhv Content Hugging Priority və leading/trailing-in left/right anchors ilə qarışdırılması. Xcode 15+ düzüm problemlərini Runtime Issue Navigator-da göstərir və avtomatik düzəlişlər təklif edir. Mürəkkəb düzümlər üçün Debug View Hierarchy istifadə edin: sarı etiketlər ambiguous layout-u, qırmızı etiketlər unsatisfiable-ı göstərir.