Interface Builder: چیست، طراحی بصری در Xcode و استوری‌بوردها

Interface Builder چیست؟

Interface Builder — مؤلفه Xcode برای طراحی بصری رابط‌های کاربری است. تاریخچه IB از سال 1988 در شرکت NeXT، مدت‌ها قبل از ظهور iOS آغاز شد. استفان پوپ اولین نسخه را برای NeXTSTEP — سیستم عاملی که پایه macOS و iOS شد — توسعه داد. در سال 1996، Apple NeXT را خریداری کرد و Interface Builder را در Xcode ادغام نمود.

در Xcode مدرن، Interface Builder از سه قالب فایل پشتیبانی می‌کند: Storyboard، XIB (Xcode Interface Builder) و فایل‌های XIB برای سلول‌های جدول و نماهای سفارشی. هر یک از این قالب‌ها توصیف XML سلسله‌مراتب عناصر UI، ویژگی‌ها، محدودیت‌ها و اتصالات با کد را ذخیره می‌کند.

IB در سطح UIKit کار می‌کند: دکمه‌ها، برچسب‌ها، فیلدهای متنی، جداول، مجموعه‌ها و محدودیت‌ها با ماوس روی بوم کشیده می‌شوند. Xcode فایل‌های .storyboard و .xib را در مرحله ساخت به بایگانی‌های nib (Interface Builder کامپایل‌شده) تبدیل می‌کند که اندازه باندل را کاهش داده و بارگذاری را تسریع می‌کند.

به گفته Apple، بیش از 70٪ پروژه‌های iOS روی UIKit از Interface Builder در مراحل مختلف توسعه استفاده می‌کنند. علیرغم رشد SwiftUI، IB برای برنامه‌های تجاری با پشتیبانی از iOS 12 و پایین‌تر، و همچنین برای رابط‌های سفارشی پیچیده که نیاز به تنظیم دقیق Auto Layout دارند، استاندارد باقی مانده است.

چگونه Interface Builder وارد Xcode شد

قبل از Xcode 4، Interface Builder یک برنامه جداگانه بود که همزمان با ویرایشگر کد اجرا می‌شد. در Xcode 4 (2011)، Apple IB و ویرایشگر کد را در یک IDE واحد ادغام کرد. این امکان جابجایی بین کد و چیدمان بدون تغییر پنجره، و همچنین مشاهده تغییرات ویژگی‌ها در زمان واقعی از طریق پانل Attributes Inspector را فراهم کرد.

با ظهور SwiftUI در سال 2019، Apple تمرکز را به توسعه اعلامی معطوف کرد، با این حال Interface Builder برای پشتیبانی از پروژه‌های UIKit در Xcode باقی مانده است. هزاران برنامه موجود همچنان از IB استفاده می‌کنند و Apple حذف آن را اعلام نکرده است.

Storyboard و XIB: قالب‌های فایل IB

Interface Builder از دو قالب اصلی پشتیبانی می‌کند: Storyboard (.storyboard) و XIB (.xib). تفاوت بین آنها در محدوده دید و سناریوی استفاده است.

Storyboard — فایلی که کل سن برنامه را شامل می‌شود: چندین صفحه (UIViewController)، انتقال بین آنها (segues)، کنترل‌کننده‌های ناوبری، تب‌بارها و تمام عناصر UI. Storyboard یکبار هنگام راه‌اندازی از Info.plist از طریق کلید UIMainStoryboardFile (k) بارگذاری می‌شود. این برای تجسم جریان صفحات مفید است، اما در ادغام git به دلیل ذخیره توصیف XML کل برنامه در یک فایل، مشکل ایجاد می‌کند.

XIB (مخفف Xcode Interface Builder) — فایل برای یک مؤلفه: یک UIView جداگانه، UITableViewCell، UICollectionViewCell یا یک ViewController. XIB در صورت تقاضا از طریق UINib(nibName:bundle:) (k) یا روش Bundle.loadNibNamed (k) بارگذاری می‌شود. فایل‌های XIB ادغام آسان‌تری دارند، فشرده‌تر هستند و سریع‌تر بارگذاری می‌شوند، زیرا حاوی توصیف کل برنامه نیستند.

از نسخه Xcode 11، Apple استفاده از XIB را برای مؤلفه‌های جداگانه و اجتناب از Storyboardهای یکپارچه توصیه می‌کند. برای ناوبری بین صفحات، ناوبری کد از طریق UIStoryboardSegue (k) به صورت دستی یا هماهنگ‌کننده‌ها ترجیح داده می‌شود.

ساختار XML در فایل‌های IB

فایل‌های .storyboard و .xib XML را در قالب Interface Builder Cocoa Touch XIB (dt) ذخیره می‌کنند. نمونه ساختار ساده‌شده:

<!-- فایل XIB با UIView و UILabel -->
<?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="عنوان"
               textColor="darkTextColor"
               fontDescription="title1"/>
      </subviews>
    </view>
  </objects>
</document>

هر عنصر دارای id (an) منحصربه‌فردی است که IB از طریق آن گره XML را به شیء زمان اجرا متصل می‌کند. هنگام کامپایل، Xcode XML را به قالب باینری nib (.nib) تبدیل کرده و اندازه فایل را حدوداً 40٪ کاهش می‌دهد.

Auto Layout و Size Classes در Interface Builder

Auto Layout — سیستم موقعیت‌یابی عناصر روی صفحه از طریق روابط ریاضی (محدودیت‌ها). Interface Builder یک رابط بصری برای ایجاد، ویرایش و اشکال‌زدایی محدودیت‌ها بدون نوشتن کد فراهم می‌کند. هر محدودیت یک وابستگی را توصیف می‌کند: view.leading = superview.leading + 16 (k) یا view.width = 2 * otherView.height (k).

در IB، محدودیت‌ها از طریق منوهای Pin (ثابت کردن فاصله‌ها، عرض، ارتفاع) و Align (تراز به مرکز، لبه‌ها، baseline) ایجاد می‌شوند. پانل Size Inspector تمام محدودیت‌های عنصر انتخاب‌شده، اولویت‌های آنها (required/high/low) را نشان می‌دهد و امکان ویرایش ضریب‌ها و ثابت‌ها را فراهم می‌کند.

IB همچنین از UIStackView پشتیبانی می‌کند — ظرفی که به طور خودکار مکان‌نمایی نماهای فرزند را مدیریت می‌کند. کافی است عناصر را در stack view روی بوم قرار دهید و IB محدودیت‌های لازم را به طور خودکار تولید می‌کند. این کار چیدمان را در مقایسه با تنظیم دستی محدودیت‌ها به طور قابل توجهی تسریع می‌کند.

Size Classes: سازگاری با دستگاه‌ها

Size Classes — انتزاعی که دستگاه‌ها را بر اساس عرض و ارتفاع صفحه گروه‌بندی می‌کند: Compact و Regular. ترکیب‌ها (wC hR برای iPhone عمودی، wR hR برای iPad) امکان تنظیم محدودیت‌ها و مکان‌نمایی عناصر مختلف برای سناریوهای مختلف را فراهم می‌کنند. در Interface Builder، جابجایی بین size classes مجموعه محدودیت‌های فعال روی بوم را تغییر می‌دهد.

مثال محدودیت با تنوع بر اساس size class:

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

در کد بالا، traitCollectionDidChange به تغییر size class واکنش نشان داده و محدودیت و فونت را به‌روزرسانی می‌کند. Interface Builder امکان تنظیم مقادیر پیش‌فرض برای هر size class را از طریق بازرس فراهم می‌کند و کد برای سناریوهای پویایی که نمی‌توان به صورت ایستا توصیف کرد، استفاده می‌شود.

IBOutlet، IBAction و اتصال کد با UI

اتصال بین رابط بصری در Interface Builder و کد Swift/Objective-C از طریق دو مکانیسم انجام می‌شود: IBOutlet (Interface Builder Outlet) و IBAction (Interface Builder Action). هر دو با کشیدن با کلید Ctrl از بوم IB به فایل کنترل‌کننده ایجاد می‌شوند.

IBOutlet — حاشیه‌نویسی که یک ارجاع به عنصر UI اعلام می‌کند. Xcode به طور خودکار آن را هنگام بارگذاری به شیء مربوطه در بایگانی nib متصل می‌کند. اگر اتصال قطع شود (مثلاً عنصر تغییر نام دهد)، برنامه با خطای NSUnknownKeyException (k) از کار می‌افتد. IBOutlet به عنوان weak (k) علامت‌گذاری می‌شود، زیرا nib مالک شیء است و کنترل‌کننده فقط ناظر است.

IBAction — متدی که هنگام رویداد عنصر UI فراخوانی می‌شود: فشار دکمه، تغییر متن، تغییر وضعیت سوئیچ. IB UIControlEvent (k) را از طریق addTarget:action:forControlEvents: (k) به متد متصل می‌کند. در کد، IBAction مانند یک متد معمولی با نوع بازگشتی IBAction (dt) به نظر می‌رسد.

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: "همه فیلدها را پر کنید")
            return
        }
        loginButton.isEnabled = false
        spinner.startAnimating()
        performLogin(email: email, password: password)
    }

    private func performLogin(email: String, password: String) {
        /// فراخوانی API از طریق URLSession
        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: "خطا",
            message: message,
            preferredStyle: .alert
        )
        alert.addAction(UIAlertAction(title: "OK", style: .default))
        present(alert, animated: true)
    }
}

مثال یک اتصال استاندارد را نشان می‌دهد: IBOutlet برای فیلدهای متنی، دکمه و اسپینر، IBAction برای مدیریت فشار. همه این اتصالات در Interface Builder از طریق Ctrl+drag تنظیم می‌شوند. اگر اتصال پیکربندی نشده باشد، IBOutlet در زمان اجرا nil (v) خواهد بود که باعث crash در هنگام دسترسی می‌شود — به همین دلیل IBOutlet به عنوان weak var (k s) با unwrap ضمنی اعلام می‌شود.

@IBDesignable و @IBInspectable: مؤلفه‌های سفارشی

@IBDesignable — حاشیه‌نویسی Swift که امکان نمایش UIView سفارشی را مستقیماً روی بوم Interface Builder در زمان واقعی فراهم می‌کند. توسعه‌دهنده نتیجه تغییرات کد را بدون اجرای برنامه می‌بیند. @IBInspectable — حاشیه‌نویسی برای ویژگی‌ها که آنها را به پانل Attributes Inspector IB اضافه می‌کند، جایی که می‌توان مقادیر را به صورت تعاملی تغییر داد.

این حاشیه‌نویسی‌ها به ویژه هنگام ایجاد کتابخانه‌های مؤلفه UI مفید هستند: دکمه‌های سفارشی، فیلدهای ورودی با ماسک، نشانگرهای متحرک. IBDesignable از prepareForInterfaceBuilder() (fn) برای کامپایل جداگانه کد ساخت استفاده می‌کند که بر باینری اصلی برنامه تأثیر نمی‌گذارد.

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

در کد بالا، GradientButton یک مؤلفه IBDesignable با ویژگی‌های IBInspectable startColor (v)، endColor (v) و cornerRadius (v) است. پس از کشیدن UIView روی بوم IB و تغییر کلاس به GradientButton در Identity Inspector، یک دکمه با گرادینت در زمان واقعی روی بوم نمایش داده می‌شود. تمام ویژگی‌های IBInspectable در پانل Attributes Inspector در سمت راست ظاهر می‌شوند.

مهم: @IBDesignable کد را به طور کامل برای نمایش در IB کامپایل می‌کند، بنابراین نباید درخواست‌های شبکه یا عملیات طولانی در داخل آن انجام شود. برای تمایز از #if TARGET_INTERFACE_BUILDER (k) — کامپایل شرطی که کد غیرمرتبط با IB را حذف می‌کند — استفاده می‌شود.

چرخه حیات فایل‌های IB هنگام کامپایل

فرایند تبدیل فایل‌های Interface Builder از ایجاد nib تا نمایش روی صفحه شامل چندین مرحله است. درک این چرخه به تشخیص مشکلات IB کمک می‌کند.

در مرحله ساخت، Xcode ابزار ibtool (k, fn) را اجرا می‌کند — یک ابزار خط فرمان برای کامپایل فایل‌های .storyboard و .xib به قالب باینری nib. ibtool همچنین اعتبارسنجی را انجام می‌دهد: صحت محدودیت‌ها، وجود همه کلاس‌ها، انواع اتصالات IBOutlet/IBAction را بررسی می‌کند. خطاهای اعتبارسنجی در Issue Navigator Xcode نمایش داده می‌شوند.

بایگانی نهایی .nib در باندل برنامه در پوشه .nib (s) قرار می‌گیرد. اندازه فایل nib به طور قابل توجهی کوچکتر از XML اصلی است: قالب باینری از نمایش بهینه‌شده با جایگزینی رشته‌ها با توکن‌ها و فشرده‌سازی مقادیر عددی استفاده می‌کند. فشرده‌سازی معمولی 50–60٪ از اندازه XML اصلی است.

در زمان اجرا، nib از طریق UINib(nibName:bundle:) (k) یا به طور خودکار از طریق UIStoryboard.instantiateViewController(withIdentifier:) (k) بارگذاری می‌شود. فرایند بارگذاری شامل موارد زیر است:

• Deserialization nib باینری به گراف اشیاء Objective-C/Swift
• ایجاد نمونه‌های تمام عناصر UI از بایگانی
• بازیابی اتصالات IBOutlet و IBAction (outletCollection برای گروه‌ها)
• اعمال محدودیت‌های Auto Layout از بایگانی با در نظر گرفتن size class
• فراخوانی awakeFromNib() (fn) برای هر شیء — نقطه ورود برای پیکربندی پس از بارگذاری

متد awakeFromNib() (fn) پس از تنظیم تمام IBOutlet‌ها، اما قبل از اولین layoutSubviews فراخوانی می‌شود. این برای پیکربندی اولیه مفید است: تنظیم گردی گوشه‌ها، افزودن سایه‌ها، بومی‌سازی متن. با این حال، تمام IBOutlet‌ها در awakeFromNib تضمین شده که nil نباشند.

Interface Builder در مقابل SwiftUI Preview

با انتشار SwiftUI در سال 2019، توسعه‌دهندگان iOS جایگزینی برای Interface Builder دریافت کردند — یک چارچوب اعلامی با Canvas Preview در زمان واقعی. تفاوت‌های کلیدی این دو رویکرد را بررسی می‌کنیم.

Interface Builder توصیف XML تولید می‌کند که به nib کامپایل می‌شود. رابط به صورت بصری ایجاد می‌شود، کد فقط مسئول منطق است. IB آستانه ورود کمتری برای طراحان بدون مهارت برنامه‌نویسی دارد، اما در بازبینی کد دشوار است (تغییرات XML در diff قابل مشاهده نیستند).

SwiftUI Preview — توسعه کاملاً مبتنی بر کد. رابط به زبان Swift توصیف می‌شود، پیش‌نمایش با هر بار ذخیره به‌روزرسانی می‌شود. هیچ XML، nib یا خطر قطع اتصالات IBOutlet وجود ندارد. SwiftUI Preview سریع‌تر از IB کار می‌کند، زیرا به کامپایل فایل جداگانه نیاز ندارد.

در عمل، انتخاب بین IB و SwiftUI Preview به نیازهای پروژه بستگی دارد. Interface Builder برای برنامه‌های UIKit با پشتیبانی از iOS قدیمی و همچنین برای پروژه‌های تجاری که طراحان بدون دانش Swift در Xcode کار می‌کنند، ضروری است. SwiftUI برای پروژه‌های جدید با هدف iOS 17+ که سرعت توسعه و واکنش‌گرایی مهم است، ترجیح داده می‌شود.

Apple قصد حذف Interface Builder از Xcode را ندارد. علاوه بر این، در Xcode 16، شرکت عملکرد بوم IB را بهبود بخشید و پشتیبانی از مؤلفه‌های SwiftUI را از طریق UIViewRepresentable Bridge اضافه کرد. انتظار می‌رود IB حداقل تا سال 2030 پشتیبانی شود.

بهترین روش‌های کار با Interface Builder

تجربه چندین ساله توسعه iOS مجموعه‌ای از توصیه‌ها را شکل داده است که تعداد مشکلات استفاده از Interface Builder در پروژه‌های تجاری را کاهش می‌دهد.

به جای Storyboard از XIB استفاده کنید برای مؤلفه‌های قابل استفاده مجدد. هر سلول جدول سفارشی، هدر یا فوتر باید در XIB جداگانه باشد. این کار ادغام را آسان‌تر می‌کند، بارگذاری را تسریع می‌کند و امکان استفاده مجدد از مؤلفه‌ها بین پروژه‌ها از طریق Swift Package Manager یا CocoaPods را فراهم می‌کند.

Storyboard References را برای تقسیم storyboardهای بزرگ به ماژول‌ها پیکربندی کنید. به جای یک Main.storyboard با 100 صفحه، برای هر ماژول (Auth, Profile, Feed) یک storyboard جداگانه ایجاد کنید و آنها را از طریق Storyboard Reference متصل کنید. این کار زمان کامپایل ibtool را کاهش داده و کار تیمی را ساده‌تر می‌کند.

از اتصالات IBOutlet به File's Owner (k) بدون بررسی خودداری کنید. هر اتصال باید weak (k) و اختیاری باشد (implicitly unwrapped optional فقط در playground خوب است). هنگام تغییر نام IBOutlet در نمای، Xcode به طور خودکار اتصال را به‌روزرسانی می‌کند، اما در ویرایش دستی XML به راحتی می‌توان اشتباه کرد.

• همیشه پس از ویرایش فایل IB، Show Connection Panel (k) را بررسی کنید — نشانگرهای قرمز نشان‌دهنده اتصالات قطع شده هستند
• از User Defined Runtime Attributes (k) برای تنظیم ویژگی‌ها بدون کد استفاده کنید: layer.cornerRadius, layer.borderWidth, tintColor
• محدودیت‌ها را در IB بر اساس هدف گروه‌بندی کنید: محدودیت‌های اندازه، محدودیت‌های فاصله، محدودیت‌های نسبت
• به هر محدودیت در Size Inspector یک Identifier (k) اختصاص دهید — این کار در اشکال‌زدایی هنگام تداخل کمک می‌کند
• منطق تجاری را در awakeFromNib قرار ندهید — فقط پیکربندی UI. منطق را در viewDidLoad یا سرویس‌های جداگانه قرار دهید

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 یا Kingfisher
    }

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

مثال بهترین روش برای نمای XIB را نشان می‌دهد: متد ایستا instantiateFromNib (fn) نما را از XIB با همان نام کلاس بارگذاری می‌کند. متد awakeFromNib (fn) UI را پیکربندی می‌کند (گردی گوشه‌ها، فونت‌ها)، و متد configure(with:) (fn) مدل داده را برای پر کردن دریافت می‌کند. جداسازی مسئولیت‌ها تست و استفاده مجدد را آسان‌تر می‌کند.