Interface Builder: ما هو، التصميم المرئي في Xcode والـ Storyboards

ما هو 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 لتسلسل عناصر واجهة المستخدم وخصائصها وقيودها وارتباطاتها بالكود.

يعمل 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 مدمجًا في Xcode لدعم مشاريع UIKit. آلاف التطبيقات الحالية تستمر في استخدام IB، ولم تعلن Apple عن إزالته.

Storyboard و XIB: تنسيقات ملفات IB

يدعم Interface Builder تنسيقين رئيسيين: Storyboard (.storyboard) و XIB (.xib). الفرق بينهما يكمن في النطاق وحالة الاستخدام.

Storyboard هو ملف يحتوي على مشهد التطبيق بالكامل: شاشات متعددة (UIViewController)، انتقالات بينها (segues)، وحدات تحكم التنقل، أشرطة التبويب، وجميع عناصر واجهة المستخدم. يتم تحميل 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 للمكونات الفردية وتجنب Storyboards الأحادية. للتنقل بين الشاشات، يُفضل التنقل القائم على الكود عبر UIStoryboardSegue (k) يدويًا أو المنسقين.

هيكل XML في ملفات IB

تخزن ملفات .storyboard و .xib XML بتنسيق Interface Builder Cocoa Touch XIB (dt). مثال على هيكل مبسط:

<!-- XIB file with UIView and 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="Title"
               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 (المحاذاة للوسط والحواف وخط الأساس). تعرض لوحة 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 وربط الكود بواجهة المستخدم

يتم الاتصال بين الواجهة المرئية في Interface Builder وكود Swift/Objective-C عبر آليتين: IBOutlet (Interface Builder Outlet) و IBAction (Interface Builder Action). يتم إنشاء كلاهما عن طريق السحب مع الضغط على Ctrl من لوحة IB إلى ملف وحدة التحكم.

IBOutlet هو تعليق يعلن مرجعًا لعنصر واجهة المستخدم. يقوم Xcode تلقائيًا بربطه بالكائن المقابل في أرشيف nib عند التحميل. إذا انقطع الاتصال (مثل إعادة تسمية عنصر)، يتعطل التطبيق مع خطأ NSUnknownKeyException (k). يتم وضع علامة IBOutlet كـ weak (k)، لأن nib يملك الكائن ووحدة التحكم مجرد مراقب.

IBAction هو طريقة تُستدعى عند حدث عنصر واجهة المستخدم: الضغط على زر، تغيير نص، تبديل مفتاح. يربط 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: "Fill in all fields")
            return
        }
        loginButton.isEnabled = false
        spinner.startAnimating()
        performLogin(email: email, password: password)
    }

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

يظهر المثال إعدادًا قياسيًا: IBOutlet لحقول النص والزر والدوار، IBAction لمعالجة الضغط. كل هذه الاتصالات تُعد في Interface Builder عبر Ctrl+سحب. إذا لم يتم تكوين الاتصال، سيكون IBOutlet nil (v) في وقت التشغيل، مما يسبب تعطلًا عند الوصول — لذلك يُعلن IBOutlet كـ weak var (k s) مع فتح ضمني.

@IBDesignable و @IBInspectable: المكونات المخصصة

@IBDesignable هو تعليق Swift يسمح بعرض UIView مخصصة مباشرة على لوحة Interface Builder في الوقت الفعلي. يرى المطور تغييرات الكود دون تشغيل التطبيق. @IBInspectable هو تعليق للخصائص يضيفها إلى لوحة Attributes Inspector في IB، حيث يمكن تغيير القيم بشكل تفاعلي.

هذه التعليقات مفيدة بشكل خاص عند إنشاء مكتبات مكونات واجهة المستخدم: أزرار مخصصة، حقول إدخال مقنعة، مؤشرات متحركة. يستخدم 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). تتضمن عملية التحميل:

• إلغاء تسلسل nib الثنائي إلى رسم بياني للكائنات Objective-C/Swift
• إنشاء مثيلات جميع عناصر واجهة المستخدم من الأرشيف
• استعادة اتصالات IBOutlet و IBAction (outletCollection للمجموعات)
• تطبيق قيود Auto Layout من الأرشيف مع مراعاة size class
• استدعاء awakeFromNib() (fn) لكل كائن — نقطة دخول للتكوين بعد التحميل

يُستدعى الأسلوب awakeFromNib() (fn) بعد تعيين جميع IBOutlets ولكن قبل أول layoutSubviews. هذا مناسب للتكوين الأولي: تدوير الزوايا، إضافة الظلال، ترجمة النصوص. ومع ذلك، جميع IBOutlets مضمونة ألا تكون nil في awakeFromNib.

Interface Builder مقابل SwiftUI Preview

مع إصدار SwiftUI في 2019، حصل مطورو iOS على بديل لـ Interface Builder — إطار تصريحي مع Canvas Preview في الوقت الفعلي. دعنا نستعرض الاختلافات الرئيسية بين النهجين.

Interface Builder يولد وصف XML يُجمّع إلى nib. يتم إنشاء الواجهة بصريًا؛ الكود يتعامل مع المنطق فقط. يتطلب IB عتبة دخول أقل للمصممين دون مهارات برمجة، لكنه صعب لمراجعة الكود (تغييرات XML غير مرئية في الفرق).

SwiftUI Preview هو تطوير قائم على الكود بالكامل. تُوصف الواجهة في Swift، وتتحديث المعاينة عند كل حفظ. لا XML، لا nib، لا خطر انقطاع اتصالات IBOutlet. يعمل SwiftUI Preview أسرع من IB لأنه لا يتطلب تجميع ملف منفصل.

عمليًا، يعتمد الاختيار بين IB و SwiftUI Preview على متطلبات المشروع. Interface Builder لا غنى عنه لتطبيقات UIKit التي تدعم إصدارات iOS القديمة، وكذلك للمشاريع التجارية حيث يعمل المصممون في Xcode دون مهارات Swift. يُفضل SwiftUI للمشاريع الجديدة الموجهة لـ iOS 17+، حيث سرعة التطوير والتفاعل مهمة.

لا تخطط Apple لإزالة Interface Builder من Xcode. علاوة على ذلك، في Xcode 16، حسنت الشركة أداء لوحة IB وأضافت دعمًا لمكونات SwiftUI عبر UIViewRepresentable Bridge. من المتوقع أن يستمر دعم IB حتى 2030 على الأقل.

أفضل الممارسات للعمل مع Interface Builder

شكلت سنوات من الخبرة في تطوير iOS مجموعة من التوصيات التي تقلل عدد المشكلات عند استخدام Interface Builder في المشاريع التجارية.

استخدم XIB بدلاً من Storyboard للمكونات القابلة لإعادة الاستخدام. يجب أن تكون كل خلية جدول مخصصة ورأس وتذييل في XIB منفصل. هذا يسهل الدمج، ويسرع التحميل، ويسمح بإعادة استخدام المكونات بين المشاريع عبر Swift Package Manager أو CocoaPods.

قم بتكوين Storyboard References لتقسيم storyboards الكبيرة إلى وحدات. بدلاً من Main.storyboard واحد بـ 100 شاشة، أنشئ storyboard لكل وحدة (Auth, Profile, Feed) واربطها عبر Storyboard Reference. هذا سيقلل وقت تجميع ibtool ويبسط العمل الجماعي.

تجنب اتصالات IBOutlet إلى File's Owner (k) دون تحقق. يجب أن يكون كل اتصال weak (k) واختياريًا (الاختياري المفتوح ضمنيًا رائع فقط في playgrounds). عند إعادة تسمية IBOutlet في طريقة عرض، يقوم Xcode تلقائيًا بتحديث الاتصال، لكن التحرير اليدوي لـ XML يمكن أن يُدخل أخطاء بسهولة.

• تحقق دائمًا من Show Connection Panel (k) بعد تحرير ملف IB — المؤشرات الحمراء تشير إلى اتصالات مقطوعة
• استخدم User Defined Runtime Attributes (k) لتعيين الخصائص دون كود: layer.cornerRadius، layer.borderWidth، tintColor
• جمّع القيود في IB حسب الغرض: قيود للأحجام، قيود للهوامش، قيود للنسب
• خصص Identifier (k) لكل قيد في Size Inspector — هذا يساعد في تصحيح النزاعات
• لا تضع منطق الأعمال في awakeFromNib — فقط تكوين واجهة المستخدم. المنطق في 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
        /// Loading avatar via SDWebImage or 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) تهيئ واجهة المستخدم (زوايا مدورة، خطوط)، وطريقة configure(with:) (fn) تستقبل نموذج بيانات للتعبئة. فصل المسؤوليات يبسط الاختبار وإعادة الاستخدام.