Interface Builder: nima, Xcode-da vizual dizayn va storyboardlar

Interface Builder nima?

Interface Builder — foydalanuvchi interfeyslarini vizual loyihalash uchun Xcode komponenti. IB tarixi iOS paydo bo'lishidan ancha oldin, 1988 yilda NeXT kompaniyasida boshlangan. Stefan Pop birinchi versiyani NeXTSTEP — macOS va iOS ga asos bo'lgan operatsion tizim uchun ishlab chiqqan. 1996 yilda Apple NeXT ni sotib olib, Interface Builder-ni Xcode-ga integratsiya qildi.

Zamonaviy Xcode-da Interface Builder uchta fayl formatini qo'llab-quvvatlaydi: Storyboard, XIB (Xcode Interface Builder) va jadval katakchalari uchun XIB fayllari va maxsus ko'rinishlar. Ushbu formatlarning har biri UI elementlari iyerarxiyasining, ularning xususiyatlari, cheklovlari va kod bilan bog'lanishlarining XML tavsifini saqlaydi.

IB UIKit darajasida ishlaydi: tugmalar, yorliqlar, matn maydonlari, jadvallar, kollektsiyalar va cheklovlar sichqoncha bilan kanvasga tortiladi. Xcode .storyboard va .xib fayllarini qurish bosqichida nib-arxivlarga (compiled Interface Builder) kompilyatsiya qiladi, bu paket hajmini kamaytiradi va yuklanishni tezlashtiradi.

Apple ma'lumotlariga ko'ra, UIKit-dagi iOS loyihalarining 70% dan ortig'i rivojlanishning turli bosqichlarida Interface Builder-dan foydalanadi. SwiftUI o'sishiga qaramay, IB iOS 12 va undan eski versiyalarini qo'llab-quvvatlovchi tijorat ilovalari, shuningdek, Auto Layout-ni nozik sozlashni talab qiluvchi murakkab maxsus interfeyslar uchun standart bo'lib qolmoqda.

Interface Builder Xcode-ga qanday kirdi

Xcode 4 dan oldin, Interface Builder kod muharriri bilan parallel ravishda ishga tushiriladigan alohida dastur edi. Xcode 4 da (2011) Apple IB va kod muharririni yagona IDE ga birlashtirdi. Bu oynalarni almashtirmasdan kod va joylashuv o'rtasida o'tishni, shuningdek, Attributes Inspector paneli orqali xususiyat o'zgarishlarini real vaqtda ko'rishni imkon berdi.

2019 yilda SwiftUI paydo bo'lishi bilan Apple deklarativ rivojlanishga e'tibor qaratdi, ammo Interface Builder UIKit loyihalarini qo'llab-quvvatlash uchun Xcode-da qolmoqda. Minglab mavjud ilovalar IB-dan foydalanishda davom etmoqda va Apple uni olib tashlashni e'lon qilmagan.

Storyboard va XIB: IB fayl formatlari

Interface Builder ikkita asosiy formatni qo'llab-quvvatlaydi: Storyboard (.storyboard) va XIB (.xib). Ularning orasidagi farq ko'rinish doirasi va foydalanish stsenariysidadir.

Storyboard — ilovaning butun sahnasini o'z ichiga olgan fayl: bir nechta ekran (UIViewController), ular orasidagi o'tishlar (segues), navigatsiya kontrollerlari, tab-barlar va barcha UI elementlari. Storyboard ishga tushirish paytida Info.plist dan UIMainStoryboardFile (k) kaliti orqali bir marta yuklanadi. Bu ekran oqimini vizuallashtirish uchun qulay, ammo git-da merge konfliktlarida muammolar yaratadi, chunki butun ilovaning XML tavsifi bitta faylda saqlanadi.

XIB (Xcode Interface Builder qisqartmasi) — bitta komponent uchun fayl: alohida UIView, UITableViewCell, UICollectionViewCell yoki bitta ViewController. XIB talab bo'yicha UINib(nibName:bundle:) (k) yoki Bundle.loadNibNamed (k) metodi orqali yuklanadi. XIB fayllarini merge qilish osonroq, ular ixchamroq va tezroq yuklanadi, chunki butun ilova tavsifini o'z ichiga olmaydi.

Xcode 11 versiyasidan boshlab, Apple alohida komponentlar uchun XIB dan foydalanishni va monolit Storyboard-lardan qochishni tavsiya qiladi. Ekranlar orasidagi navigatsiya uchun UIStoryboardSegue (k) orqali qo'lda kod navigatsiyasi yoki koordinatorlar afzal ko'riladi.

IB fayllarida XML tuzilishi

.storyboard va .xib fayllari XML-ni Interface Builder Cocoa Touch XIB (dt) formatida saqlaydi. Soddalashtirilgan tuzilish namunasi:

<!-- UIView va UILabel bilan XIB fayli -->
<?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="Sarlavha"
               textColor="darkTextColor"
               fontDescription="title1"/>
      </subviews>
    </view>
  </objects>
</document>

Har bir element noyob id (an) ga ega, u orqali IB XML tugunini runtime obyekti bilan bog'laydi. Kompilyatsiya paytida Xcode XML-ni ikkilik nib formatiga (.nib) o'zgartiradi, fayl hajmini taxminan 40% ga kamaytiradi.

Interface Builder-da Auto Layout va Size Classes

Auto Layout — matematik munosabatlar (cheklovlar) orqali elementlarni ekranda joylashtirish tizimi. Interface Builder kod yozmasdan cheklovlar yaratish, tahrirlash va tuzatish uchun vizual interfeys taqdim etadi. Har bir cheklov bog'liqlikni tavsiflaydi: view.leading = superview.leading + 16 (k) yoki view.width = 2 * otherView.height (k).

IB-da cheklovlar Pin (bo'shliqlarni, kenglikni, balandlikni mahkamlash) va Align (markazga, qirralarga, baseline-ga tekislash) menyusi orqali yaratiladi. Size Inspector paneli tanlangan elementning barcha cheklovlarini, ularning ustuvorliklarini (required/high/low) ko'rsatadi va ko'paytiruvchilar va konstantalarni tahrirlash imkonini beradi.

IB shuningdek UIStackView-ni qo'llab-quvvatlaydi — bolali ko'rinishlarning joylashishini avtomatik boshqaradigan konteyner. Elementlarni kanvasda stack view-ga joylashtirish kifoya va IB kerakli cheklovlarni avtomatik yaratadi. Bu cheklovlarni qo'lda o'rnatish bilan solishtirganda joylashuvni sezilarli darajada tezlashtiradi.

Size Classes: qurilmalarga moslashish

Size Classes — qurilmalarni ekran kengligi va balandligi bo'yicha guruhlaydigan abstraktsiya: Compact va Regular. Kombinatsiyalar (iPhone portret uchun wC hR, iPad uchun wR hR) turli stsenariylar uchun turli cheklovlar va element joylashuvini o'rnatish imkonini beradi. Interface Builder-da size classes o'rtasida o'tish kanvasdagi faol cheklovlar to'plamini o'zgartiradi.

Size class bo'yicha variatsiya bilan cheklov namunasi:

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

Yuqoridagi kodda traitCollectionDidChange size class o'zgarishiga reaksiya beradi, cheklov va shriftni yangilaydi. Interface Builder har bir size class uchun inspektor orqali standart qiymatlarni o'rnatish imkonini beradi, kod esa statik tavsiflab bo'lmaydigan dinamik stsenariylar uchun ishlatiladi.

IBOutlet, IBAction va kodning UI bilan bog'lanishi

Interface Builder-dagi vizual interfeys bilan Swift/Objective-C kodi o'rtasidagi bog'lanish ikki mexanizm orqali amalga oshiriladi: IBOutlet (Interface Builder Outlet) va IBAction (Interface Builder Action). Ikkalasi IB kanvasidan Ctrl tugmasi bosilgan holda kontroller fayliga tortish orqali yaratiladi.

IBOutlet — UI elementiga havolani e'lon qiluvchi annotatsiya. Xcode yuklash paytida uni nib-arxivdagi tegishli obyektga avtomatik bog'laydi. Agar bog'lanish uzilsa (masalan, element nomi o'zgartirilgan bo'lsa), ilova NSUnknownKeyException (k) xatosi bilan ishdan chiqadi. IBOutlet weak (k) deb belgilanadi, chunki nib obyektga egalik qiladi, kontroller esa faqat kuzatuvchidir.

IBAction — UI elementi hodisasi paytida chaqiriladigan metod: tugmani bosish, matnni o'zgartirish, kalitni almashtirish. IB UIControlEvent (k) ni metod bilan addTarget:action:forControlEvents: (k) orqali bog'laydi. Kodda IBAction IBAction (dt) qaytarish turi bilan oddiy metod kabi ko'rinadi.

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: "Barcha maydonlarni to'ldiring")
            return
        }
        loginButton.isEnabled = false
        spinner.startAnimating()
        performLogin(email: email, password: password)
    }

    private func performLogin(email: String, password: String) {
        /// URLSession orqali API chaqiruvi
        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: "Xato",
            message: message,
            preferredStyle: .alert
        )
        alert.addAction(UIAlertAction(title: "OK", style: .default))
        present(alert, animated: true)
    }
}

Misol standart bog'lanishni ko'rsatadi: matn maydonlari, tugma va spinner uchun IBOutlet, bosishni boshqarish uchun IBAction. Bu bog'lanishlarning barchasi Interface Builder-da Ctrl+drag orqali o'rnatiladi. Agar bog'lanish sozlanmagan bo'lsa, IBOutlet runtime da nil (v) bo'ladi va murojaat paytida crashga sabab bo'ladi — shuning uchun IBOutlet weak var (k s) implicit unwrap bilan e'lon qilinadi.

@IBDesignable va @IBInspectable: maxsus komponentlar

@IBDesignable — maxsus UIView-ni to'g'ridan-to'g'ri Interface Builder kanvasida real vaqtda ko'rsatish imkonini beruvchi Swift annotatsiyasi. Dasturchi ilovani ishga tushirmasdan kod o'zgarishlari natijasini ko'radi. @IBInspectable — xususiyatlar uchun annotatsiya, ularni IB Attributes Inspector paneliga qo'shadi, bu erda qiymatlarni interaktiv tarzda o'zgartirish mumkin.

Ushbu annotatsiyalar UI komponentlar kutubxonalarini yaratishda ayniqsa foydalidir: maxsus tugmalar, niqobli kiritish maydonlari, animatsion ko'rsatkichlar. IBDesignable ilovaning asosiy binar fayliga ta'sir qilmaydigan alohida qurish kodi uchun prepareForInterfaceBuilder() (fn) dan foydalanadi.

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

Yuqoridagi kodda GradientButton IBInspectable xususiyatlari startColor (v), endColor (v) va cornerRadius (v) bo'lgan IBDesignable komponentidir. UIView-ni IB kanvasiga tortib, Identity Inspector-da sinfni GradientButton ga o'zgartirganda, kanvada real vaqtda gradientli tugma ko'rsatiladi. Barcha IBInspectable xususiyatlari o'ngdagi Attributes Inspector panelida paydo bo'ladi.

Muhim: @IBDesignable kodni to'liq IB-da ko'rsatish uchun kompilyatsiya qiladi, shuning uchun uning ichida tarmoq so'rovlari yoki uzoq operatsiyalar bajarilmasligi kerak. Farqlash uchun #if TARGET_INTERFACE_BUILDER (k) — IB uchun mo'ljallanmagan kodni istisno qiluvchi shartli kompilyatsiya ishlatiladi.

Kompilyatsiya paytida IB fayllarining hayot aylanishi

Interface Builder fayllarining nib yaratishdan ekranda ko'rsatishgacha bo'lgan transformatsiya jarayoni bir necha bosqichni o'z ichiga oladi. Ushbu tsiklni tushunish IB bilan bog'liq muammolarni tashxislashga yordam beradi.

Qurish bosqichida Xcode ibtool (k, fn) vositasini ishga tushiradi — .storyboard va .xib fayllarini ikkilik nib formatiga kompilyatsiya qilish uchun buyruq qatori yordamchi dasturi. ibtool shuningdek validatsiyani amalga oshiradi: cheklovlarning to'g'riligini, barcha sinflarning mavjudligini, IBOutlet/IBAction bog'lanish turlarini tekshiradi. Validatsiya xatolari Xcode Issue Navigator-da ko'rsatiladi.

Yakuniy .nib-arxiv ilova paketida .nib (s) papkasiga joylashtiriladi. nib faylining hajmi asl XML dan sezilarli darajada kichik: ikkilik format satrlarni tokenlar bilan almashtirish va raqamli qiymatlarni siqish bilan optimallashtirilgan tasvirdan foydalanadi. Odatdagi siqish asl XML hajmining 50-60% ni tashkil qiladi.

Runtime da nib UINib(nibName:bundle:) (k) yoki avtomatik ravishda UIStoryboard.instantiateViewController(withIdentifier:) (k) orqali yuklanadi. Yuklash jarayoni quyidagilarni o'z ichiga oladi:

• Ikkilik nib-ni Objective-C/Swift obyekt grafiga deserializatsiya qilish
• Arxivdan barcha UI elementlarining nusxalarini yaratish
• IBOutlet va IBAction bog'lanishlarini (guruhlar uchun outletCollection) tiklash
• Size class ni hisobga olgan holda arxivdan Auto Layout cheklovlarini qo'llash
• Yuklashdan keyingi sozlash uchun kirish nuqtasi — har bir obyekt uchun awakeFromNib() (fn) metodini chaqirish

awakeFromNib() (fn) metodi barcha IBOutletlar o'rnatilgandan so'ng, lekin birinchi layoutSubviews dan oldin chaqiriladi. Bu dastlabki sozlash uchun qulay: yumaloqliklarni o'rnatish, soyalarni qo'shish, matnni lokalizatsiya qilish. Biroq, barcha IBOutletlar awakeFromNib da nil emasligi kafolatlanadi.

Interface Builder SwiftUI Preview-ga qarshi

2019 yilda SwiftUI ning chiqarilishi bilan iOS dasturchilari Interface Builder-ga alternativ — real vaqtda Canvas Preview bilan deklarativ framework ga ega bo'ldilar. Ikki yondashuv o'rtasidagi asosiy farqlarni tahlil qilamiz.

Interface Builder nib ga kompilyatsiya qilinadigan XML tavsifini yaratadi. Interfeys vizual yaratiladi, kod faqat mantiq uchun javobgardir. IB dasturlash ko'nikmalariga ega bo'lmagan dizaynerlar uchun pastroq kirish chegarasini talab qiladi, ammo kodni ko'rib chiqishda qiyin (XML o'zgarishlari diff da ko'rinmaydi).

SwiftUI Preview — to'liq kod asosidagi rivojlanish. Interfeys Swift da tavsiflanadi, oldindan ko'rish har bir saqlashda yangilanadi. XML, nib yo'q, IBOutlet bog'lanishlarining uzilish xavfi yo'q. SwiftUI Preview IB dan tezroq ishlaydi, chunki alohida faylning kompilyatsiyasini talab qilmaydi.

Amalda IB va SwiftUI Preview o'rtasidagi tanlov loyiha talablariga bog'liq. Interface Builder eski iOS ni qo'llab-quvvatlovchi UIKit ilovalari, shuningdek Swift bilimiga ega bo'lmagan dizaynerlar Xcode da ishlaydigan tijorat loyihalari uchun ajralmas hisoblanadi. SwiftUI iOS 17+ ga mo'ljallangan, rivojlanish tezligi va reaktivlik muhim bo'lgan yangi loyihalar uchun afzal ko'riladi.

Apple Interface Builder ni Xcode dan olib tashlashni rejalashtirmaydi. Bundan tashqari, Xcode 16 da kompaniya IB kanvasining ishlashini yaxshiladi va UIViewRepresentable Bridge orqali SwiftUI komponentlarini qo'llab-quvvatlashni qo'shdi. IB kamida 2030 yilgacha qo'llab-quvvatlanishi kutilmoqda.

Interface Builder bilan ishlashning eng yaxshi amaliyotlari

Ko'p yillik iOS dasturlash tajribasi tijorat loyihalarida Interface Builder dan foydalanishda muammolar sonini kamaytiradigan tavsiyalar to'plamini shakllantirdi.

Storyboard o'rniga XIB dan foydalaning qayta ishlatiladigan komponentlar uchun. Har bir maxsus jadval katakchasi, sarlavha yoki pastki qism alohida XIB da bo'lishi kerak. Bu merge ni osonlashtiradi, yuklanishni tezlashtiradi va Swift Package Manager yoki CocoaPods orqali komponentlarni loyihalar o'rtasida qayta ishlatish imkonini beradi.

Katta storyboardlarni modullarga bo'lish uchun Storyboard References ni sozlang. 100 ekranli bitta Main.storyboard o'rniga har bir modul (Auth, Profile, Feed) uchun alohida storyboard yarating va ularni Storyboard Reference orqali bog'lang. Bu ibtool kompilyatsiya vaqtini kamaytiradi va jamoaviy ishni soddalashtiradi.

Tekshirmasdan File's Owner (k) ga IBOutlet bog'lanishlaridan saqlaning. Har bir bog'lanish weak (k) va ixtiyoriy bo'lishi kerak (implicitly unwrapped optional faqat playground da yaxshi). Ko'rinishda IBOutlet nomini o'zgartirganda Xcode bog'lanishni avtomatik yangilaydi, ammo XML ni qo'lda tahrirlashda xato qilish oson.

• IB faylini tahrirlagandan so'ng har doim Show Connection Panel (k) ni tekshiring — qizil ko'rsatkichlar uzilgan bog'lanishlarni ko'rsatadi
• User Defined Runtime Attributes (k) dan kodlarsiz xususiyatlarni o'rnatish uchun foydalaning: layer.cornerRadius, layer.borderWidth, tintColor
• IB-da cheklovlarni maqsadiga qarab guruhlang: o'lchamlar uchun cheklovlar, bo'shliqlar uchun cheklovlar, nisbatlar uchun cheklovlar
• Size Inspector da har bir cheklovga Identifier (k) belgilang — bu konfliktlarda tuzatishga yordam beradi
• awakeFromNib da biznes mantiqni joylashtirmang — faqat UI sozlash. Mantiqni viewDidLoad yoki alohida xizmatlarga qo'ying

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 yoki Kingfisher orqali avatarni yuklash
    }

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

Misol XIB ko'rinishi uchun eng yaxshi amaliyotni ko'rsatadi: statik metod instantiateFromNib (fn) sinf bilan bir xil nomdagi XIB dan ko'rinishni yuklaydi. awakeFromNib (fn) metodi UI ni sozlaydi (yumaloqliklar, shriftlar), configure(with:) (fn) metodi esa to'ldirish uchun ma'lumot modelini qabul qiladi. Mas'uliyatni taqsimlash test qilish va qayta foydalanishni osonlashtiradi.