Interface Builder: nədir, Xcode-da vizual dizayn və storyboardlar

Interface Builder nədir?

Interface Builder — istifadəçi interfeyslərinin vizual layihələndirilməsi üçün Xcode komponenti. IB-nin tarixi iOS-un yaranmasından çox əvvəl, 1988-ci ildə NeXT şirkətində başlamışdır. Stefan Pope ilk versiyanı NeXTSTEP — macOS və iOS-un əsasına çevrilmiş əməliyyat sistemi üçün hazırlamışdır. 1996-cı ildə Apple NeXT-i satın aldı və Interface Builder-i Xcode-a inteqrasiya etdi.

Müasir Xcode-da Interface Builder üç fayl formatını dəstəkləyir: Storyboard, XIB (Xcode Interface Builder) və cədvəl xanaları üçün XIB faylları və fərdi görünüşlər. Bu formatların hər biri UI elementləri iyerarxiyasının, onların xassələrinin, məhdudiyyətlərinin və kodla əlaqələrinin XML təsvirini saxlayır.

IB UIKit səviyyəsində işləyir: düymələr, etiketlər, mətn sahələri, cədvəllər, kolleksiyalar və məhdudiyyətlər siçanla kanvasa sürüklənir. Xcode .storyboard və .xib fayllarını qurma mərhələsində nib-arxivlərə (compiled Interface Builder) kompilyasiya edir, bu da paketin ölçüsünü azaldır və yüklənməni sürətləndirir.

Apple-ın məlumatına görə, UIKit-də iOS layihələrinin 70%-dən çoxu inkişafın müxtəlif mərhələlərində Interface Builder-dən istifadə edir. SwiftUI-nin artmasına baxmayaraq, IB iOS 12 və daha köhnə versiyalarını dəstəkləyən kommersiya tətbiqləri, həmçinin Auto Layout-un incə tənzimlənməsini tələb edən mürəkkəb fərdi interfeyslər üçün standart olaraq qalır.

Interface Builder Xcode-a necə daxil oldu

Xcode 4-dən əvvəl Interface Builder kod redaktoru ilə paralel işlədilən ayrıca proqram idi. Xcode 4-də (2011) Apple IB və kod redaktorunu vahid IDE-də birləşdirdi. Bu, pəncərələri dəyişmədən kod və düzən arasında keçid etməyə, həmçinin Attributes Inspector paneli vasitəsilə xassələrdəki dəyişiklikləri real vaxtda görməyə imkan verdi.

2019-cu ildə SwiftUI-nin yaranması ilə Apple deklarativ inkişafa diqqət yetirdi, lakin Interface Builder UIKit layihələrini dəstəkləmək üçün Xcode-da qalır. Minlərlə mövcud tətbiq IB-dən istifadə etməyə davam edir və Apple onun silinəcəyini elan etməyib.

Storyboard və XIB: IB fayl formatları

Interface Builder iki əsas formatı dəstəkləyir: Storyboard (.storyboard) və XIB (.xib). Onlar arasındakı fərq görünmə sahəsi və istifadə ssenarisindədir.

Storyboard — tətbiqin bütün səhnəsini ehtiva edən fayl: bir neçə ekran (UIViewController), onlar arasında keçidlər (segues), naviqasiya kontrollerləri, tab-barlar və bütün UI elementləri. Storyboard işə salınma zamanı Info.plist-dən UIMainStoryboardFile (k) açarı vasitəsilə bir dəfə yüklənir. Bu, ekran axınının vizuallaşdırılması üçün rahatdır, lakin git-də merge konfliktlərində problemlər yaradır, çünki bütün tətbiqin XML təsviri bir faylda saxlanılır.

XIB (Xcode Interface Builder sözünün qısaltması) — bir komponent üçün fayl: ayrıca UIView, UITableViewCell, UICollectionViewCell və ya bir ViewController. XIB tələb əsasında UINib(nibName:bundle:) (k) və ya Bundle.loadNibNamed (k) metodu ilə yüklənir. XIB faylları merge etmək daha asandır, daha yığcamdır və daha sürətli yüklənir, çünki bütün tətbiqin təsvirini ehtiva etmir.

Xcode 11 versiyasından Apple ayrıca komponentlər üçün XIB-dən istifadə etməyi və monolit Storyboard-lardan qaçmağı tövsiyə edir. Ekranlar arasında naviqasiya üçün UIStoryboardSegue (k) vasitəsilə əl ilə kod naviqasiyası və ya koordinatorlar üstünlük təşkil edir.

IB fayllarında XML strukturu

.storyboard və .xib faylları XML-i Interface Builder Cocoa Touch XIB (dt) formatında saxlayır. Sadələşdirilmiş struktur nümunəsi:

<!-- XIB faylı UIView və UILabel ilə -->
<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB"
          version="3.0">
  <objects>
    <view id="abc-123"
          userLabel="CustomHeaderView"
          contentMode="scaleToFill">
      <subviews>
        <label id="def-456"
               text="Başlıq"
               textColor="darkTextColor"
               fontDescription="title1"/>
      </subviews>
    </view>
  </objects>
</document>

Hər bir elementin unikal id (an) var, onun vasitəsilə IB XML qovşağını runtime obyekti ilə birləşdirir. Kompilyasiya zamanı Xcode XML-i ikili nib formatına (.nib) çevirir, fayl ölçüsünü təxminən 40% azaldır.

Interface Builder-da Auto Layout və Size Classes

Auto Layout — riyazi əlaqələr (məhdudiyyətlər) vasitəsilə elementlərin ekranda yerləşdirilməsi sistemi. Interface Builder kod yazmadan məhdudiyyətlər yaratmaq, redaktə etmək və debug etmək üçün vizual interfeys təmin edir. Hər bir məhdudiyyət asılılığı təsvir edir: view.leading = superview.leading + 16 (k) və ya view.width = 2 * otherView.height (k).

IB-də məhdudiyyətlər Pin (boşluqların, enin, hündürlüyün bərkidilməsi) və Align (mərkəzə, kənarlara, baseline-a düzləndirmə) menyusu vasitəsilə yaradılır. Size Inspector paneli seçilmiş elementin bütün məhdudiyyətlərini, onların prioritetlərini (required/high/low) göstərir və çarpanların və sabitlərin redaktəsinə imkan verir.

IB həmçinin UIStackView-i dəstəkləyir — uşaq görünüşlərinin yerləşməsini avtomatik idarə edən konteyner. Elementləri kanvada stack view-ə yerləşdirmək kifayətdir və IB lazımi məhdudiyyətləri avtomatik yaradacaq. Bu, məhdudiyyətlərin əl ilə qurulması ilə müqayisədə düzəni əhəmiyyətli dərəcədə sürətləndirir.

Size Classes: cihazlara uyğunlaşma

Size Classes — cihazları ekranın eni və hündürlüyünə görə qruplaşdıran abstraksiya: Compact və Regular. Kombinasiyalar (iPhone portret üçün wC hR, iPad üçün wR hR) müxtəlif ssenarilər üçün fərqli məhdudiyyətlər və element yerləşməsi təyin etməyə imkan verir. Interface Builder-da size classes arasında keçid kanvada aktiv məhdudiyyətlər dəstini dəyişir.

Size class-a görə variasiya ilə məhdudiyyət nümunəsi:

import UIKit

class AdaptiveViewController: UIViewController {

    @IBOutlet weak var titleLabel: UILabel!
    @IBOutlet weak var leadingConstraint: NSLayoutConstraint!

    private func updateConstraints() {
        let isRegular = traitCollection.horizontalSizeClass == .regular
        leadingConstraint.constant = isRegular ? 40 : 16
        titleLabel.font = isRegular
            ? UIFont.preferredFont(forTextStyle: .largeTitle)
            : UIFont.preferredFont(forTextStyle: .title1)
    }

    override func traitCollectionDidChange(
        _ previousTraitCollection: UITraitCollection?
    ) {
        super.traitCollectionDidChange(previousTraitCollection)
        if traitCollection.horizontalSizeClass != previousTraitCollection?.horizontalSizeClass {
            updateConstraints()
        }
    }
}

Yuxarıdakı kodda traitCollectionDidChange size class dəyişikliyinə reaksiya verir, məhdudiyyəti və şrifti yeniləyir. Interface Builder hər bir size class üçün inspektor vasitəsilə default dəyərlər təyin etməyə imkan verir, kod isə statik təsvir edilə bilməyən dinamik ssenarilər üçün istifadə olunur.

IBOutlet, IBAction və kodun UI ilə əlaqəsi

Interface Builder-də vizual interfeyslə Swift/Objective-C kodu arasında əlaqə iki mexanizm vasitəsilə həyata keçirilir: IBOutlet (Interface Builder Outlet) və IBAction (Interface Builder Action). Hər ikisi IB kanvasından Ctrl düyməsi basılı halda sürükləməklə kontroller faylına yaradılır.

IBOutlet — UI elementinə istinad elan edən annotasiya. Xcode yükləmə zamanı onu nib-arxivində müvafiq obyektə avtomatik birləşdirir. Əgər əlaqə qırılarsa (məsələn, element adı dəyişdirilib), tətbiq NSUnknownKeyException (k) xətası ilə çökür. IBOutlet weak (k) olaraq qeyd olunur, çünki nib obyektə sahibdir, kontroller isə yalnız müşahidəçidir.

IBAction — UI elementinin hadisəsi zamanı çağırılan metod: düyməyə basma, mətn dəyişikliyi, keçid açarının dəyişdirilməsi. IB UIControlEvent (k) ilə metodu addTarget:action:forControlEvents: (k) vasitəsilə birləşdirir. Kodda IBAction IBAction (dt) qaytarma tipi ilə adi metod kimi görünür.

import UIKit

final class LoginViewController: UIViewController {

    @IBOutlet weak var emailTextField: UITextField!
    @IBOutlet weak var passwordTextField: UITextField!
    @IBOutlet weak var loginButton: UIButton!
    @IBOutlet weak var spinner: UIActivityIndicatorView!

    @IBAction private func loginButtonTapped(_ sender: UIButton) {
        guard let email = emailTextField.text, !email.isEmpty,
              let password = passwordTextField.text, !password.isEmpty
        else {
            showAlert(message: "Bütün sahələri doldurun")
            return
        }
        loginButton.isEnabled = false
        spinner.startAnimating()
        performLogin(email: email, password: password)
    }

    private func performLogin(email: String, password: String) {
        /// URLSession vasitəsilə API çağırışı
        let request = LoginRequest(email: email, password: password)
        APIClient.shared.login(request) { [weak self] result in
            DispatchQueue.main.async {
                guard let self else { return }
                self.spinner.stopAnimating()
                self.loginButton.isEnabled = true
                switch result {
                case .success:
                    self.navigateToMainScreen()
                case .failure(let error):
                    self.showAlert(message: error.localizedDescription)
                }
            }
        }
    }

    private func showAlert(message: String) {
        let alert = UIAlertController(
            title: "Xəta",
            message: message,
            preferredStyle: .alert
        )
        alert.addAction(UIAlertAction(title: "OK", style: .default))
        present(alert, animated: true)
    }
}

Nümunədə standart əlaqə göstərilib: mətn sahələri, düymə və spinner üçün IBOutlet, basma hadisəsini idarə etmək üçün IBAction. Bütün bu əlaqələr Interface Builder-da Ctrl+drag vasitəsilə qurulur. Əgər əlaqə konfiqurasiya edilməyibsə, IBOutlet runtime-da nil (v) olacaq və müraciət zamanı crash-a səbəb olacaq — buna görə IBOutlet weak var (k s) implicit unwrap ilə elan edilir.

@IBDesignable və @IBInspectable: fərdi komponentlər

@IBDesignable — fərdi UIView-i birbaşa Interface Builder kanvasında real vaxtda göstərməyə imkan verən Swift annotasiyası. Tərtibatçı tətbiqi işə salmadan kod dəyişikliklərinin nəticəsini görür. @IBInspectable — xassələr üçün annotasiya, onları IB Attributes Inspector panelinə əlavə edir, burada dəyərləri interaktiv şəkildə dəyişmək olar.

Bu annotasiyalar UI komponent kitabxanaları yaratarkən xüsusilə faydalıdır: fərdi düymələr, maskalı giriş sahələri, animasiyalı göstəricilər. IBDesignable tətbiqin əsas binar faylına təsir etməyən ayrıca qurma kodu üçün prepareForInterfaceBuilder() (fn) istifadə edir.

import UIKit

@IBDesignable
final class GradientButton: UIButton {

    @IBInspectable var startColor: UIColor = .systemBlue {
        didSet { updateGradient() }
    }

    @IBInspectable var endColor: UIColor = .systemPurple {
        didSet { updateGradient() }
    }

    @IBInspectable var cornerRadius: CGFloat = 12 {
        didSet {
            layer.cornerRadius = cornerRadius
            layer.masksToBounds = true
        }
    }

    private let gradientLayer = CAGradientLayer()

    override init(frame: CGRect) {
        super.init(frame: frame)
        setupGradient()
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupGradient()
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        gradientLayer.frame = bounds
    }

    private func setupGradient() {
        layer.insertSublayer(gradientLayer, at: 0)
        updateGradient()
    }

    private func updateGradient() {
        gradientLayer.colors = [startColor.cgColor, endColor.cgColor]
        gradientLayer.startPoint = CGPoint(x: 0, y: 0.5)
        gradientLayer.endPoint = CGPoint(x: 1, y: 0.5)
    }

    override func prepareForInterfaceBuilder() {
        super.prepareForInterfaceBuilder()
        setupGradient()
    }
}

Yuxarıdakı kodda GradientButton IBInspectable xassələri startColor (v), endColor (v) və cornerRadius (v) olan IBDesignable komponentidir. UIView-i IB kanvasına sürükləyib Identity Inspector-da sinfi GradientButton-a dəyişdikdə, kanvada real vaxtda gradientli düymə göstəriləcək. Bütün IBInspectable xassələri sağdakı Attributes Inspector panelində görünəcək.

Vacib: @IBDesignable kodu tamamilə IB-də göstərmək üçün kompilyasiya edir, ona görə də onun içərisində şəbəkə sorğuları və ya uzun əməliyyatlar yerinə yetirilməməlidir. Fərqləndirmək üçün #if TARGET_INTERFACE_BUILDER (k) — IB üçün nəzərdə tutulmayan kodu istisna edən şərti kompilyasiya istifadə olunur.

Kompilyasiya zamanı IB fayllarının həyat dövrü

Interface Builder fayllarının nib yaradılmasından ekranda göstərilməyə qədər transformasiya prosesi bir neçə mərhələni əhatə edir. Bu dövrü başa düşmək IB ilə bağlı problemləri diaqnoz etməyə kömək edir.

Qurma mərhələsində Xcode ibtool (k, fn) alətini işə salır — .storyboard və .xib fayllarını ikili nib formatına kompilyasiya etmək üçün komanda sətri yardımçı proqramı. ibtool həmçinin validasiya həyata keçirir: məhdudiyyətlərin düzgünlüyünü, bütün siniflərin mövcudluğunu, IBOutlet/IBAction əlaqə tiplərini yoxlayır. Validasiya səhvləri Xcode Issue Navigator-da göstərilir.

Yekun .nib-arxiv tətbiq paketində .nib (s) qovluğuna yerləşdirilir. nib faylının ölçüsü orijinal XML-dən əhəmiyyətli dərəcədə kiçikdir: ikili format sətirlərin tokenlərlə əvəz edilməsi və ədədi dəyərlərin sıxılması ilə optimallaşdırılmış təsvirdən istifadə edir. Tipik sıxılma orijinal XML ölçüsünün 50–60%-ni təşkil edir.

Runtime-da nib UINib(nibName:bundle:) (k) və ya avtomatik olaraq UIStoryboard.instantiateViewController(withIdentifier:) (k) vasitəsilə yüklənir. Yükləmə prosesi aşağıdakıları əhatə edir:

• İkili nib-in Objective-C/Swift obyekt qrafına deserializasiyası
• Arxivdən bütün UI elementlərinin nüsxələrinin yaradılması
• IBOutlet və IBAction əlaqələrinin (qruplar üçün outletCollection) bərpası
• Size class nəzərə alınmaqla arxivdən Auto Layout məhdudiyyətlərinin tətbiqi
• Yükləmədən sonrakı konfiqurasiya üçün giriş nöqtəsi — hər bir obyekt üçün awakeFromNib() (fn) metodunun çağırılması

awakeFromNib() (fn) metodu bütün IBOutlet-lər qurulduqdan sonra, lakin ilk layoutSubviews-dən əvvəl çağırılır. Bu, ilkin konfiqurasiya üçün rahatdır: yuvarlaqların qurulması, kölgələrin əlavə edilməsi, mətnin lokallaşdırılması. Lakin bütün IBOutlet-lər awakeFromNib-də artıq nil olmadığına zəmanət verilir.

Interface Builder SwiftUI Preview-ə qarşı

2019-cu ildə SwiftUI-nin buraxılması ilə iOS tərtibatçıları Interface Builder-a alternativ — real vaxtda Canvas Preview ilə deklarativ framework əldə etdilər. İki yanaşma arasındakı əsas fərqləri araşdıraq.

Interface Builder nib-ə kompilyasiya olunan XML təsviri yaradır. İnterfeys vizual yaradılır, kod yalnız məntiqə cavabdehdir. IB proqramlaşdırma bacarığı olmayan dizaynerlər üçün daha aşağı giriş həddi tələb edir, lakin kod baxışında çətindir (XML dəyişiklikləri diff-də görünmür).

SwiftUI Preview — tam kod əsaslı inkişaf. İnterfeys Swift-də təsvir olunur, önizləmə hər yaddaşda yenilənir. XML, nib yoxdur, IBOutlet əlaqələrinin qırılma riski yoxdur. SwiftUI Preview IB-dən daha sürətli işləyir, çünki ayrıca faylın kompilyasiyasını tələb etmir.

Təcrübədə IB və SwiftUI Preview arasında seçim layihənin tələblərindən asılıdır. Interface Builder köhnə iOS-u dəstəkləyən UIKit tətbiqləri, həmçinin Swift bacarığı olmayan dizaynerlərin Xcode-da işlədiyi kommersiya layihələri üçün əvəzolunmazdır. SwiftUI iOS 17+ üçün nəzərdə tutulmuş, inkişaf sürəti və reaktivliyin vacib olduğu yeni layihələr üçün üstünlük təşkil edir.

Apple Interface Builder-i Xcode-dan silməyi planlaşdırmır. Üstəlik, Xcode 16-da şirkət IB kanvasının performansını yaxşılaşdırdı və UIViewRepresentable Bridge vasitəsilə SwiftUI komponentlərinə dəstək əlavə etdi. IB-nin ən azı 2030-cu ilə qədər dəstəklənəcəyi gözlənilir.

Interface Builder ilə işləmək üçün ən yaxşı təcrübələr

Uzun illər iOS tərtibatı təcrübəsi kommersiya layihələrində Interface Builder istifadə edərkən problemlərin sayını azaldan tövsiyələr dəsti formalaşdırmışdır.

XIB-dən Storyboard əvəzinə istifadə edin təkrar istifadə olunan komponentlər üçün. Hər bir fərdi cədvəl xanası, başlıq və ya altlıq ayrıca XIB-də olmalıdır. Bu, merge-i asanlaşdırır, yüklənməni sürətləndirir və Swift Package Manager və ya CocoaPods vasitəsilə komponentlərin layihələr arasında təkrar istifadəsinə imkan verir.

Böyük storyboard-ları modullara bölmək üçün Storyboard References konfiqurasiya edin. 100 ekranlı bir Main.storyboard əvəzinə hər modul üçün (Auth, Profile, Feed) ayrıca storyboard yaradın və onları Storyboard Reference vasitəsilə birləşdirin. Bu, ibtool kompilyasiya vaxtını azaldacaq və komanda işini asanlaşdıracaq.

Yoxlamadan File's Owner (k) -ə IBOutlet əlaqələrindən çəkinin. Hər bir əlaqə weak (k) və ixtiyari olmalıdır (implicitly unwrapped optional yalnız playground-da yaxşıdır). Görünüşdə IBOutlet-in adını dəyişdikdə Xcode əlaqəni avtomatik yeniləyir, lakin XML-i əl ilə redaktə edərkən səhv etmək asandır.

• IB faylını redaktə etdikdən sonra həmişə Show Connection Panel (k) yoxlayın — qırmızı göstəricilər qırılmış əlaqələri göstərir
• User Defined Runtime Attributes (k) istifadə edin kod olmadan xassələri təyin etmək üçün: layer.cornerRadius, layer.borderWidth, tintColor
• IB-də məhdudiyyətləri təyinatına görə qruplaşdırın: ölçülər üçün məhdudiyyətlər, boşluqlar üçün məhdudiyyətlər, nisbətlər üçün məhdudiyyətlər
• Size Inspector-da hər bir məhdudiyyətə Identifier (k) təyin edin — bu, konfliktlər zamanı debug-da kömək edir
• awakeFromNib-də biznes məntiqi yerləşdirməyin — yalnız UI konfiqurasiyası. Məntiqi viewDidLoad və ya ayrıca xidmətlərə qoyun

import UIKit

final class ProfileHeaderView: UIView {

    @IBOutlet weak var avatarImageView: UIImageView!
    @IBOutlet weak var nameLabel: UILabel!
    @IBOutlet weak var bioLabel: UILabel!
    @IBOutlet weak var editButton: UIButton!

    override func awakeFromNib() {
        super.awakeFromNib()
        avatarImageView.layer.cornerRadius = avatarImageView.bounds.width / 2
        avatarImageView.layer.masksToBounds = true
        nameLabel.font = UIFont.preferredFont(forTextStyle: .headline)
        bioLabel.font = UIFont.preferredFont(forTextStyle: .subheadline)
    }

    func configure(with profile: UserProfile) {
        nameLabel.text = profile.fullName
        bioLabel.text = profile.bio
        /// SDWebImage və ya Kingfisher vasitəsilə avatarın yüklənməsi
    }

    static func instantiateFromNib() -> ProfileHeaderView {
        let nib = UINib(nibName: String(describing: self), bundle: nil)
        return nib.instantiate(withOwner: nil).first as! ProfileHeaderView
    }
}

Nümunədə XIB görünüşü üçün best practice göstərilib: statik metod instantiateFromNib (fn) siniflə eyni ada malik XIB-dən görünüşü yükləyir. awakeFromNib (fn) metodu UI-ni konfiqurasiya edir (yuvarlaqlar, şriftlər), configure(with:) (fn) metodu isə doldurulmaq üçün məlumat modelini qəbul edir. Məsuliyyətin bölünməsi test etməyi və təkrar istifadəni asanlaşdırır.