Interface Builder: nedir, Xcode'da görsel tasarım ve storyboard'lar

Interface Builder Nedir?

Interface Builder — kullanıcı arayüzlerinin görsel olarak tasarlanması için Xcode'un bir bileşenidir. IB'nin tarihi, iOS'tan çok önce, 1988 yılında NeXT şirketinde başladı. Stefan Pope, macOS ve iOS'un temelini oluşturan işletim sistemi NeXTSTEP için ilk sürümü geliştirdi. 1996 yılında Apple, NeXT'i satın aldı ve Interface Builder'ı Xcode'a entegre etti.

Modern Xcode'da Interface Builder üç dosya biçimini destekler: Storyboard, XIB (Xcode Interface Builder) ve tablo hücreleri ve özel view'lar için XIB dosyaları. Bu biçimlerin her biri, UI öğeleri hiyerarşisinin, özelliklerinin, constraint'lerinin ve kod bağlantılarının XML tanımını saklar.

IB, UIKit düzeyinde çalışır: düğmeler, etiketler, metin alanları, tablolar, koleksiyonlar ve constraint'ler fare ile tuval üzerine sürüklenir. Xcode, .storyboard ve .xib dosyalarını derleme aşamasında nib arşivlerine (compiled Interface Builder) dönüştürerek bundle boyutunu küçültür ve yüklemeyi hızlandırır.

Apple verilerine göre, UIKit üzerindeki iOS projelerinin %70'inden fazlası geliştirmenin çeşitli aşamalarında Interface Builder'ı kullanmaktadır. SwiftUI'nin yükselişine rağmen, IB, iOS 12 ve altını destekleyen ticari uygulamalar için ve Auto Layout'un ince ayarını gerektiren karmaşık özel arayüzler için standart olmaya devam etmektedir.

Interface Builder Xcode'a Nasıl Geldi?

Xcode 4'ten önce Interface Builder, kod düzenleyiciye paralel olarak çalıştırılan ayrı bir uygulamaydı. Xcode 4'te (2011) Apple, IB ve kod düzenleyiciyi tek bir IDE'de birleştirdi. Bu, pencere değiştirmeden kod ve layout arasında geçiş yapmayı ve Attributes Inspector paneli aracılığıyla özellik değişikliklerini gerçek zamanlı olarak görmeyi sağladı.

2019'da SwiftUI'nin gelişiyle Apple, bildirimsel geliştirmeye odaklandı, ancak Interface Builder, UIKit projelerini desteklemek için Xcode'da yerleşik olarak kalmaya devam ediyor. Binlerce mevcut uygulama IB'yi kullanmaya devam ediyor ve Apple kaldırılacağını duyurmadı.

Storyboard ve XIB: IB Dosya Biçimleri

Interface Builder iki ana biçimi destekler: Storyboard (.storyboard) ve XIB (.xib). Aralarındaki fark, kapsam ve kullanım senaryosundadır.

Storyboard — uygulamanın tüm sahnesini içeren dosya: birden çok ekran (UIViewController), aralarındaki geçişler (segues), navigasyon denetleyicileri, sekmeli çubuklar ve tüm UI öğeleri. Storyboard, başlatma sırasında Info.plist'ten UIMainStoryboardFile (k) anahtarı aracılığıyla bir kez yüklenir. Ekran akışını görselleştirmek için kullanışlıdır, ancak tüm uygulamanın XML tanımı tek bir dosyada saklandığından git'te merge çakışmalarına neden olur.

XIB (Xcode Interface Builder'ın kısaltması) — tek bir bileşen için dosya: ayrı bir UIView, UITableViewCell, UICollectionViewCell veya tek bir ViewController. XIB, ihtiyaç halinde UINib(nibName:bundle:) (k) veya Bundle.loadNibNamed (k) yöntemi aracılığıyla yüklenir. XIB dosyalarını merge etmek daha kolaydır, daha kompakttır ve tüm uygulamanın tanımını içermedikleri için daha hızlı yüklenirler.

Xcode 11 sürümünden itibaren Apple, tek tek bileşenler için XIB kullanılmasını ve monolitik Storyboard'lardan kaçınılmasını önermektedir. Ekranlar arasında gezinme için UIStoryboardSegue (k) ile manuel kod tabanlı navigasyon veya koordinatörler tercih edilir.

IB Dosyalarında XML Yapısı

.storyboard ve .xib dosyaları, XML'i Interface Builder Cocoa Touch XIB (dt) biçiminde saklar. Basitleştirilmiş yapı örneği:

<!-- UIView ve UILabel içeren XIB dosyası -->
<?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ık"
               textColor="darkTextColor"
               fontDescription="title1"/>
      </subviews>
    </view>
  </objects>
</document>

Her öğenin, IB'nin XML düğümünü runtime nesnesine bağladığı benzersiz bir id'si (an) vardır. Derleme sırasında Xcode, XML'i ikili nib biçimine (.nib) dönüştürerek dosya boyutunu yaklaşık %40 oranında azaltır.

Interface Builder'da Auto Layout ve Size Classes

Auto Layout — öğeleri matematiksel ilişkiler (constraint'ler) aracılığıyla ekranda konumlandırma sistemidir. Interface Builder, kod yazmadan constraint'ler oluşturmak, düzenlemek ve hata ayıklamak için görsel bir arayüz sağlar. Her constraint bir bağımlılığı tanımlar: view.leading = superview.leading + 16 (k) veya view.width = 2 * otherView.height (k).

IB'de constraint'ler Pin (kenar boşlukları, genişlik, yükseklik sabitleme) ve Align (ortaya, kenarlara, baseline hizalama) menüleri aracılığıyla oluşturulur. Size Inspector paneli, seçili öğenin tüm constraint'lerini, önceliklerini (required/high/low) gösterir ve çarpanları ve sabitleri düzenlemeye olanak tanır.

IB ayrıca UIStackView'ı da destekler — alt view'ların yerleşimini otomatik olarak yöneten bir kapsayıcı. Öğeleri tuvalde bir stack view'e yerleştirmek yeterlidir; IB gerekli constraint'leri otomatik olarak oluşturacaktır. Bu, manuel constraint yerleştirmeye kıyasla layout'u önemli ölçüde hızlandırır.

Size Classes: Cihazlara Uyum

Size Classes — cihazları ekran genişliği ve yüksekliğine göre gruplandıran bir soyutlama: Compact ve Regular. Kombinasyonlar (iPhone dikey için wC hR, iPad için wR hR), farklı senaryolar için farklı constraint'ler ve öğe düzenleri belirlemeye olanak tanır. Interface Builder'da size classes arasında geçiş yapmak, tuvaldeki aktif constraint'ler kümesini değiştirir.

Size class'a göre değişiklik içeren constraint örneği:

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

Yukarıdaki kodda traitCollectionDidChange, size class değişikliğine tepki vererek constraint'i ve yazı tipini günceller. Interface Builder, her size class için denetçi aracılığıyla varsayılan değerler ayarlamaya olanak tanır ve kod, statik olarak tanımlanamayan dinamik senaryolar için kullanılır.

IBOutlet, IBAction ve Kodun UI ile Bağlantısı

Interface Builder'daki görsel arayüz ile Swift/Objective-C kodu arasındaki bağlantı iki mekanizma aracılığıyla gerçekleşir: IBOutlet (Interface Builder Outlet) ve IBAction (Interface Builder Action). Her ikisi de IB tuvalinden Ctrl tuşuna basılıyken denetleyici dosyasına sürükleyerek oluşturulur.

IBOutlet — bir UI öğesine referans bildiren ek açıklamadır. Xcode, yükleme sırasında onu nib arşivindeki ilgili nesneye otomatik olarak bağlar. Bağlantı koparsa (örneğin, öğe yeniden adlandırılırsa), uygulama NSUnknownKeyException (k) hatasıyla çöker. IBOutlet, weak (k) olarak işaretlenir, çünkü nib nesneye sahiptir ve denetleyici yalnızca bir gözlemcidir.

IBAction — bir UI öğesi olayında çağrılan yöntemdir: düğmeye basma, metin değiştirme, anahtar değiştirme. IB, UIControlEvent'i (k) yönteme addTarget:action:forControlEvents: (k) aracılığıyla bağlar. Kodda IBAction, dönüş türü IBAction (dt) olan normal bir yöntem olarak 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: "Tüm alanları doldurun")
            return
        }
        loginButton.isEnabled = false
        spinner.startAnimating()
        performLogin(email: email, password: password)
    }

    private func performLogin(email: String, password: String) {
        /// URLSession ile API çağrısı
        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: "Hata",
            message: message,
            preferredStyle: .alert
        )
        alert.addAction(UIAlertAction(title: "OK", style: .default))
        present(alert, animated: true)
    }
}

Örnekte standart bir bağlantı gösterilmektedir: metin alanları, düğme ve spinner için IBOutlet, düğmeye basmayı işlemek için IBAction. Tüm bu bağlantılar Interface Builder'da Ctrl+drag aracılığıyla kurulur. Bağlantı yapılandırılmamışsa, IBOutlet çalışma zamanında nil (v) olur ve erişimde çökmeye neden olur — bu nedenle IBOutlet, implicit unwrap ile weak var (k s) olarak bildirilir.

@IBDesignable ve @IBInspectable: Özel Bileşenler

@IBDesignable — özel bir UIView'i gerçek zamanlı olarak doğrudan Interface Builder tuvalinde görüntülemeye olanak tanıyan Swift ek açıklamasıdır. Geliştirici, uygulamayı başlatmadan kod değişikliklerinin sonucunu görür. @IBInspectable — özellikleri IB'nin Attributes Inspector paneline ekleyen ve değerlerin etkileşimli olarak değiştirilmesine olanak tanıyan ek açıklamadır.

Bu ek açıklamalar, UI bileşen kitaplıkları oluştururken özellikle kullanışlıdır: özel düğmeler, maskeli giriş alanları, animasyonlu göstergeler. IBDesignable, uygulamanın ana ikili dosyasını etkilemeyen ayrı bir derleme için prepareForInterfaceBuilder() (fn) kullanır.

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

Yukarıdaki kodda GradientButton, startColor (v), endColor (v) ve cornerRadius (v) IBInspectable özelliklerine sahip bir IBDesignable bileşenidir. Tuvaldeki bir UIView'i sürükleyip Identity Inspector'da sınıfı GradientButton olarak değiştirdiğinizde, tuvalde gerçek zamanlı olarak gradyanlı bir düğme görüntülenecektir. Tüm IBInspectable özellikleri sağdaki Attributes Inspector panelinde görünecektir.

Önemli: @IBDesignable, IB'de görüntüleme için kodu tamamen derler, bu nedenle içinde ağ istekleri veya uzun işlemler yapılmamalıdır. Ayrım için #if TARGET_INTERFACE_BUILDER (k) kullanılır — IB için tasarlanmamış kodu hariç tutan koşullu derleme.

IB Dosyalarının Derleme Sırasında Yaşam Döngüsü

Interface Builder dosyalarının nib oluşturmadan ekranda görüntülemeye kadar dönüşüm süreci birkaç aşamadan oluşur. Bu döngüyü anlamak, IB ile ilgili sorunları teşhis etmeye yardımcı olur.

Derleme aşamasında Xcode, ibtool (k, fn) aracını çalıştırır — .storyboard ve .xib dosyalarını ikili nib biçimine derlemek için bir komut satırı yardımcı programı. ibtool ayrıca doğrulama da yapar: constraint'lerin doğruluğunu, tüm sınıfların varlığını, IBOutlet/IBAction bağlantı türlerini kontrol eder. Doğrulama hataları Xcode'un Issue Navigator'ında görüntülenir.

Son .nib arşivi, uygulama paketindeki .nib (s) klasörüne yerleştirilir. Nib dosyasının boyutu, orijinal XML'den önemli ölçüde daha küçüktür: ikili biçim, dizelerin token'larla değiştirilmesi ve sayısal değerlerin sıkıştırılmasıyla optimize edilmiş bir temsil kullanır. Tipik sıkıştırma, orijinal XML boyutunun %50-60'ı kadardır.

Çalışma zamanında nib, UINib(nibName:bundle:) (k) veya otomatik olarak UIStoryboard.instantiateViewController(withIdentifier:) (k) aracılığıyla yüklenir. Yükleme süreci şunları içerir:

• Serileştirmeyi kaldırma — ikili nib'in Objective-C/Swift nesne grafiğine dönüştürülmesi
• Oluşturma — arşivdeki tüm UI öğelerinin örneklerinin oluşturulması
• Geri yükleme — IBOutlet ve IBAction bağlantılarının (gruplar için outletCollection) geri yüklenmesi
• Uygulama — size class dikkate alınarak arşivdeki Auto Layout constraint'lerinin uygulanması
• Çağrı — yükleme sonrası yapılandırma için giriş noktası olan awakeFromNib() (fn) yönteminin her nesne için çağrılması

awakeFromNib() (fn) yöntemi, tüm IBOutlet'ler ayarlandıktan sonra ancak ilk layoutSubviews'tan önce çağrılır. Bu, yuvarlama ayarlama, gölge ekleme, metin yerelleştirme gibi ilk yapılandırma için kullanışlıdır. Ancak, awakeFromNib'de tüm IBOutlet'lerin nil olmaması garanti edilir.

Interface Builder'a Karşı SwiftUI Preview

2019'da SwiftUI'nin piyasaya sürülmesiyle iOS geliştiricileri Interface Builder'a bir alternatif elde etti: gerçek zamanlı Canvas Preview ile bildirimsel bir framework. İki yaklaşım arasındaki temel farkları inceleyelim.

Interface Builder, nib'de derlenen XML tanımını oluşturur. Arayüz görsel olarak oluşturulur, kod yalnızca mantıktan sorumludur. IB, programlama becerisi olmayan tasarımcılar için daha düşük bir giriş eşiği gerektirir, ancak kod incelemesinde karmaşıktır (XML değişiklikleri diff'te görünmez).

SwiftUI Preview — tamamen kod tabanlı geliştirme. Arayüz Swift ile tanımlanır, önizleme her kaydetmede güncellenir. XML yok, nib yok, IBOutlet bağlantılarının kopma riski yok. SwiftUI Preview, ayrı bir dosyanın derlenmesini gerektirmediği için IB'den daha hızlı çalışır.

Pratikte, IB ve SwiftUI Preview arasındaki seçim proje gereksinimlerine bağlıdır. Interface Builder, eski iOS'u destekleyen UIKit uygulamaları ve Swift becerisi olmayan tasarımcıların Xcode'da çalıştığı ticari projeler için vazgeçilmezdir. SwiftUI, geliştirme hızı ve tepkiselliğin önemli olduğu iOS 17+ odaklı yeni projeler için tercih edilir.

Apple, Interface Builder'ı Xcode'dan kaldırmayı planlamıyor. Üstelik Xcode 16'da şirket, IB tuvalinin performansını iyileştirdi ve UIViewRepresentable Bridge aracılığıyla SwiftUI bileşenleri için destek ekledi. IB'nin en az 2030 yılına kadar desteklenmesi bekleniyor.

Interface Builder ile Çalışmak için En İyi Uygulamalar

Yıllar süren iOS geliştirme deneyimi, ticari projelerde Interface Builder kullanırken sorunları azaltan bir dizi öneri oluşturmuştur.

Yeniden kullanılabilir bileşenler için Storyboard yerine XIB kullanın. Her özel tablo hücresi, header veya footer ayrı bir XIB'de olmalıdır. Bu, merge'i kolaylaştırır, yüklemeyi hızlandırır ve bileşenlerin Swift Package Manager veya CocoaPods aracılığıyla projeler arasında yeniden kullanılmasını sağlar.

Büyük storyboard'ları modüllere bölmek için Storyboard References yapılandırın. 100 ekranlı tek bir Main.storyboard yerine her modül için (Auth, Profile, Feed) bir storyboard oluşturun ve bunları Storyboard Reference ile bağlayın. Bu, ibtool derleme süresini azaltacak ve ekip çalışmasını basitleştirecektir.

Kontrolsüz File's Owner'a (k) IBOutlet bağlantılarından kaçının. Her bağlantı weak (k) ve isteğe bağlı olmalıdır (implicitly unwrapped optional yalnızca playground'da iyidir). Bir IBOutlet'i view'da yeniden adlandırırken Xcode bağlantıyı otomatik olarak günceller, ancak XML'i manuel olarak düzenlerken hata yapmak kolaydır.

• Bir IB dosyasını düzenledikten sonra her zaman Show Connection Panel'i (k) kontrol edin — kırmızı göstergeler kopuk bağlantıları belirtir
• Kod olmadan özellik ayarlamak için User Defined Runtime Attributes'ı (k) kullanın: layer.cornerRadius, layer.borderWidth, tintColor
• IB'de constraint'leri amaca göre gruplayın: boyutlar için constraint'ler, kenar boşlukları için constraint'ler, oranlar için constraint'ler
• Size Inspector'da her constraint'e bir Identifier (k) atayın — çakışmalarda hata ayıklamaya yardımcı olur
• İş mantığını awakeFromNib'e koymayın — yalnızca UI yapılandırması. Mantık viewDidLoad'da veya ayrı servislerde olmalıdır

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 veya Kingfisher ile avatar yükleme
    }

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

Örnekte XIB view'ları için en iyi uygulama gösterilmektedir: statik yöntem instantiateFromNib (fn), view'ı sınıfla aynı ada sahip XIB'den yükler. awakeFromNib (fn) yöntemi UI'yi yapılandırır (yuvarlamalar, yazı tipleri) ve configure(with:) (fn) yöntemi doldurma için bir veri modeli alır. Sorumlulukların ayrılması, test etmeyi ve yeniden kullanmayı kolaylaştırır.