Interface Builder: यह क्या है, Xcode में विज़ुअल डिज़ाइन और स्टोरीबोर्ड

लेखक: IT Sectr प्रकाशित: 2026-02-12 पढ़ने का समय: 15 मिनट

Interface Builder iOS और macOS डेवलपमेंट के लिए Xcode में निर्मित एक विज़ुअल इंटरफ़ेस संपादक है। यह drag-and-drop के माध्यम से UI बनाने, Auto Layout कॉन्फ़िगर करने और IBOutlet और IBAction के माध्यम से कोड कनेक्ट करने की अनुमति देता है। आइए जानें कि IB कैसे काम करता है, Storyboard और XIB में क्या अंतर है, और @IBDesignable की क्यों आवश्यकता है।

मुख्य बिंदु

  • Interface Builder — लेआउट कोड लिखे बिना UIKit इंटरफ़ेस के लिए Xcode में एक विज़ुअल संपादक
  • Storyboard एकाधिक स्क्रीन और उनके बीच संक्रमण का वर्णन करता है; XIB — एक घटक या स्क्रीन
  • Auto Layout IB में Pin, Align और Resolve Issues मेनू के माध्यम से बाधाएँ निर्धारित करता है
  • IBOutlet और IBAction Ctrl+drag के माध्यम से Swift कोड को UI तत्वों से जोड़ते हैं
  • @IBDesignable और @IBInspectable कस्टम व्यू को सीधे IB कैनवास पर प्रदर्शित करते हैं

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 फ़ाइलें और कस्टम व्यू। इनमें से प्रत्येक प्रारूप UI तत्व पदानुक्रम, उनके गुणों, बाधाओं और कोड से कनेक्शन का XML विवरण संग्रहीत करता है।

IB UIKit स्तर पर काम करता है: बटन, लेबल, टेक्स्ट फ़ील्ड, टेबल, कलेक्शन और बाधाओं को माउस से कैनवास पर खींचा जाता है। Xcode बिल्ड समय पर .storyboard और .xib फ़ाइलों को nib आर्काइव (संकलित Interface Builder) में संकलित करता है, जो बंडल आकार को कम करता है और लोडिंग को गति देता है।

Apple के अनुसार, UIKit पर 70% से अधिक iOS प्रोजेक्ट विकास के विभिन्न चरणों में Interface Builder का उपयोग करते हैं। SwiftUI के विकास के बावजूद, IB iOS 12 और उससे नीचे का समर्थन करने वाले वाणिज्यिक अनुप्रयोगों के साथ-साथ जटिल कस्टम इंटरफ़ेस के लिए मानक बना हुआ है जिन्हें Auto Layout की सूक्ष्म ट्यूनिंग की आवश्यकता होती है।

Interface Builder Xcode में कैसे आया

Xcode 4 से पहले, Interface Builder कोड संपादक के समानांतर चलने वाला एक अलग एप्लिकेशन था। Xcode 4 (2011) में, Apple ने IB और कोड संपादक को एक एकल IDE में विलय कर दिया। इसने विंडो स्विच किए बिना कोड और लेआउट के बीच स्विच करने और Attributes Inspector पैनल के माध्यम से वास्तविक समय में गुण परिवर्तन देखने की अनुमति दी।

Xcode संस्करणवर्षInterface Builder में परिवर्तन
Xcode 32008IB — अलग एप्लिकेशन, iOS 2.0 समर्थन
Xcode 42011IB IDE में एकीकृत, Storyboard का आगमन
Xcode 52013बाधा मेनू के साथ Auto Layout, स्क्रीन पूर्वावलोकन
Xcode 62014Size Classes, @IBDesignable, Preview Assistant
Xcode 112019SwiftUI Canvas, IB UIKit के लिए बना रहा
Xcode 152023SwiftUI Preview मुख्य उपकरण के रूप में, IB लीगेसी मोड

2019 में SwiftUI की शुरुआत के साथ, Apple ने घोषणात्मक विकास पर ध्यान केंद्रित किया, हालांकि Interface Builder UIKit प्रोजेक्ट्स का समर्थन करने के लिए Xcode में निर्मित बना हुआ है। हजारों मौजूदा एप्लिकेशन IB का उपयोग जारी रखते हैं, और Apple ने इसके हटाने की घोषणा नहीं की है।

Storyboard और XIB: IB फ़ाइल प्रारूप

Interface Builder दो मुख्य प्रारूपों का समर्थन करता है: Storyboard (.storyboard) और XIB (.xib)। उनके बीच अंतर दायरे और उपयोग के मामले में है।

Storyboard एक फ़ाइल है जिसमें संपूर्ण एप्लिकेशन दृश्य शामिल है: एकाधिक स्क्रीन (UIViewController), उनके बीच संक्रमण (segues), नेविगेशन नियंत्रक, टैब बार और सभी UI तत्व। Storyboard UIMainStoryboardFile (k) कुंजी के माध्यम से Info.plist से स्टार्टअप पर एक बार लोड होता है। यह स्क्रीन प्रवाह को विज़ुअलाइज़ करने के लिए सुविधाजनक है, लेकिन git में मर्ज विरोध के साथ समस्याएँ पैदा करता है, क्योंकि संपूर्ण एप्लिकेशन का XML विवरण एक ही फ़ाइल में संग्रहीत होता है।

XIB (Xcode Interface Builder का संक्षिप्त रूप) एक घटक के लिए एक फ़ाइल है: एक व्यक्तिगत UIView, UITableViewCell, UICollectionViewCell, या एक ViewController। XIB UINib(nibName:bundle:) (k) या Bundle.loadNibNamed (k) विधि के माध्यम से आवश्यकतानुसार लोड किया जाता है। XIB फ़ाइलें मर्ज करने में आसान, अधिक कॉम्पैक्ट और तेज़ी से लोड होती हैं क्योंकि उनमें संपूर्ण एप्लिकेशन का विवरण नहीं होता है।

मानदंडStoryboardXIB
दायराएकाधिक स्क्रीन + संक्रमणएक स्क्रीन या घटक
Seguesसमर्थन करता है (push, modal, unwind)समर्थन नहीं करता
Git मर्जकठिन (एक बड़ा XML)आसान (कई छोटी फ़ाइलें)
लोडिंगएप्लिकेशन स्टार्ट परआवश्यकतानुसार (आलसी)
पुन: उपयोगकेवल storyboard संदर्भों के माध्यम सेउच्च (कोशिकाएँ, हेडर, व्यू)
Apple अनुशंसाबड़े प्रोजेक्ट के लिए अनुशंसित नहींघटकों के लिए अनुशंसित

Xcode 11 के बाद से, Apple व्यक्तिगत घटकों के लिए XIB का उपयोग करने और मोनोलिथिक Storyboard से बचने की अनुशंसा करता है। स्क्रीन के बीच नेविगेशन के लिए, मैन्युअल रूप से UIStoryboardSegue (k) या कोऑर्डिनेटर के माध्यम से कोड-आधारित नेविगेशन पसंद किया जाता है।

IB फ़ाइलों में XML संरचना

.storyboard और .xib फ़ाइलें Interface Builder Cocoa Touch XIB (dt) प्रारूप में XML संग्रहीत करती हैं। सरलीकृत संरचना का उदाहरण:

xml
<!-- 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% कम हो जाता है।

Interface Builder में Auto Layout और Size Classes

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 का भी समर्थन करता है — एक कंटेनर जो स्वचालित रूप से चाइल्ड व्यू के लेआउट का प्रबंधन करता है। बस कैनवास पर स्टैक व्यू में तत्व रखें, और IB स्वचालित रूप से आवश्यक बाधाएँ उत्पन्न करेगा। यह मैन्युअल बाधा प्लेसमेंट की तुलना में लेआउट को काफी गति देता है।

Size Classes: उपकरणों के लिए अनुकूलन

Size Classes एक अमूर्तता है जो उपकरणों को स्क्रीन चौड़ाई और ऊँचाई के अनुसार समूहित करती है: Compact और Regular। संयोजन (iPhone पोर्ट्रेट के लिए wC hR, iPad के लिए wR hR) विभिन्न परिदृश्यों के लिए अलग-अलग बाधाएँ और तत्व लेआउट निर्दिष्ट करने की अनुमति देते हैं। Interface Builder में, size classes के बीच स्विच करने से कैनवास पर सक्रिय बाधाओं का सेट बदल जाता है।

उपकरणओरिएंटेशनWidth ClassHeight Class
iPhone (Max/Plus को छोड़कर)पोर्ट्रेटCompactRegular
iPhone (Max/Plus को छोड़कर)लैंडस्केपCompactCompact
iPhone Plus/Maxलैंडस्केपRegularCompact
iPadकोई भीRegularRegular
iPad Split View1/3 स्क्रीनCompactRegular

Size class भिन्नता वाली बाधा का उदाहरण:

swift
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)। दोनों IB कैनवास से नियंत्रक फ़ाइल में Ctrl+drag करके बनाए जाते हैं।

IBOutlet एक एनोटेशन है जो UI तत्व के संदर्भ की घोषणा करता है। Xcode लोड होने पर इसे स्वचालित रूप से nib आर्काइव में संबंधित ऑब्जेक्ट से जोड़ता है। यदि कनेक्शन टूट जाता है (उदाहरण के लिए, किसी तत्व का नाम बदल दिया जाता है), तो एप्लिकेशन NSUnknownKeyException (k) त्रुटि के साथ क्रैश हो जाता है। IBOutlet को weak (k) के रूप में चिह्नित किया जाता है, क्योंकि nib ऑब्जेक्ट का मालिक है और नियंत्रक केवल एक पर्यवेक्षक है।

IBAction एक विधि है जो UI तत्व की घटना पर कॉल की जाती है: बटन दबाना, टेक्स्ट बदलना, स्विच टॉगल करना। IB addTarget:action:forControlEvents: (k) के माध्यम से UIControlEvent (k) को विधि से जोड़ता है। कोड में, IBAction रिटर्न प्रकार IBAction (dt) वाली एक सामान्य विधि की तरह दिखता है।

swift
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+drag के माध्यम से सेट किए जाते हैं। यदि कनेक्शन कॉन्फ़िगर नहीं किया गया है, तो IBOutlet रनटाइम पर nil (v) होगा, जिससे एक्सेस करने पर क्रैश होगा — इसलिए IBOutlet को अंतर्निहित अनरैप के साथ weak var (k s) के रूप में घोषित किया जाता है।

@IBDesignable और @IBInspectable: कस्टम घटक

@IBDesignable एक Swift एनोटेशन है जो वास्तविक समय में सीधे Interface Builder कैनवास पर कस्टम UIView प्रदर्शित करने की अनुमति देता है। डेवलपर एप्लिकेशन चलाए बिना कोड परिवर्तन देखता है। @IBInspectable गुणों के लिए एक एनोटेशन है, जो उन्हें IB के Attributes Inspector पैनल में जोड़ता है, जहाँ मानों को इंटरैक्टिव रूप से बदला जा सकता है।

ये एनोटेशन UI घटक लाइब्रेरी बनाते समय विशेष रूप से उपयोगी होते हैं: कस्टम बटन, मास्क्ड इनपुट फ़ील्ड, एनिमेटेड इंडिकेटर। IBDesignable मुख्य एप्लिकेशन बाइनरी को प्रभावित किए बिना बिल्ड कोड के अलग संकलन के लिए prepareForInterfaceBuilder() (fn) का उपयोग करता है।

swift
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) हैं। IB कैनवास पर UIView खींचते समय और Identity Inspector में क्लास को GradientButton में बदलते समय, कैनवास पर वास्तविक समय में एक ग्रेडिएंट बटन प्रदर्शित होगा। सभी 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 कनेक्शन प्रकारों की जाँच करता है। सत्यापन त्रुटियाँ Xcode Issue Navigator में प्रदर्शित होती हैं।

अंतिम .nib आर्काइव को .nib (s) फ़ोल्डर में एप्लिकेशन बंडल में रखा जाता है। nib फ़ाइल का आकार मूल XML से काफी छोटा होता है: बाइनरी प्रारूप स्ट्रिंग-टू-टोकन प्रतिस्थापन और संख्यात्मक मान संपीड़न के साथ अनुकूलित प्रतिनिधित्व का उपयोग करता है। विशिष्ट संपीड़न मूल XML आकार का 50–60% है।

रनटाइम पर, nib UINib(nibName:bundle:) (k) या स्वचालित रूप से UIStoryboard.instantiateViewController(withIdentifier:) (k) के माध्यम से लोड किया जाता है। लोडिंग प्रक्रिया में शामिल हैं:

  • डिसीरियलाइज़ेशन बाइनरी nib का Objective-C/Swift ऑब्जेक्ट ग्राफ़ में
  • निर्माण आर्काइव से सभी UI तत्व इंस्टेंस का
  • पुनर्स्थापना IBOutlet और IBAction कनेक्शन की (समूहों के लिए outletCollection)
  • आवेदन size class को ध्यान में रखते हुए आर्काइव से Auto Layout बाधाओं का
  • कॉल करना प्रत्येक ऑब्जेक्ट के लिए awakeFromNib() (fn) — पोस्ट-लोड कॉन्फ़िगरेशन के लिए प्रवेश बिंदु

awakeFromNib() (fn) विधि सभी IBOutlet सेट होने के बाद लेकिन पहले layoutSubviews से पहले कॉल की जाती है। यह प्रारंभिक कॉन्फ़िगरेशन के लिए सुविधाजनक है: गोल कोने सेट करना, छाया जोड़ना, टेक्स्ट स्थानीयकरण। हालांकि, awakeFromNib में सभी IBOutlet के nil नहीं होने की गारंटी है।

Interface Builder बनाम SwiftUI Preview

2019 में SwiftUI की रिलीज़ के साथ, iOS डेवलपर्स को Interface Builder का एक विकल्प मिला — वास्तविक समय के Canvas Preview के साथ एक घोषणात्मक फ्रेमवर्क। आइए दोनों दृष्टिकोणों के बीच मुख्य अंतर देखें।

Interface Builder एक XML विवरण उत्पन्न करता है जो nib में संकलित होता है। इंटरफ़ेस दृश्य रूप से बनाया जाता है; कोड केवल तर्क को संभालता है। IB को प्रोग्रामिंग कौशल के बिना डिज़ाइनरों के लिए कम प्रवेश सीमा की आवश्यकता होती है, लेकिन कोड समीक्षा के लिए कठिन है (XML परिवर्तन diff में दिखाई नहीं देते हैं)।

SwiftUI Preview पूरी तरह से कोड-आधारित विकास है। इंटरफ़ेस Swift में वर्णित है, पूर्वावलोकन प्रत्येक सेव पर अपडेट होता है। कोई XML नहीं, कोई nib नहीं, कोई टूटा हुआ IBOutlet कनेक्शन जोखिम नहीं। SwiftUI Preview IB से तेज़ काम करता है क्योंकि इसे अलग फ़ाइल संकलित करने की आवश्यकता नहीं होती है।

मानदंडInterface Builder (UIKit)SwiftUI Preview
फ़ाइल प्रारूपXML (.storyboard / .xib) → बाइनरी nibSwift कोड (कोई मध्यवर्ती फ़ाइल नहीं)
पूर्वावलोकनजटिल व्यू के लिए देरी के साथ IB कैनवासवास्तविक समय में Canvas Preview
iOS संस्करण समर्थनiOS 2.0+ (सभी संस्करण)iOS 13+
Git मर्जसमस्याग्रस्त (एक XML फ़ाइल)सरल (सामान्य Swift कोड)
गतिशील डेटाIBOutlet + कोड के माध्यम से@State (k), @Observable (k)
कस्टम व्यू@IBDesignable (संकलन)PreviewProvider के साथ SwiftUI View
प्रदर्शनतेज़ nib लोडिंगऑन-द-फ़्लाई Swift संकलन

व्यवहार में, IB और SwiftUI Preview के बीच चुनाव परियोजना की आवश्यकताओं पर निर्भर करता है। Interface Builder पुराने iOS संस्करणों के समर्थन वाले UIKit अनुप्रयोगों के साथ-साथ वाणिज्यिक परियोजनाओं के लिए अपरिहार्य है जहाँ डिज़ाइनर Swift कौशल के बिना Xcode में काम करते हैं। SwiftUI नई परियोजनाओं के लिए पसंद किया जाता है जो iOS 17+ को लक्षित करती हैं, जहाँ विकास गति और प्रतिक्रियाशीलता मायने रखती है।

Apple Xcode से Interface Builder को हटाने की योजना नहीं बनाता है। इसके अलावा, Xcode 16 में, कंपनी ने IB कैनवास के प्रदर्शन में सुधार किया और UIViewRepresentable Bridge के माध्यम से SwiftUI घटकों का समर्थन जोड़ा। उम्मीद है कि IB कम से कम 2030 तक समर्थित रहेगा।

Interface Builder के साथ काम करने के सर्वोत्तम अभ्यास

iOS विकास के वर्षों के अनुभव ने सिफारिशों का एक सेट बनाया है जो वाणिज्यिक परियोजनाओं में Interface Builder का उपयोग करते समय समस्याओं की संख्या को कम करता है।

पुन: प्रयोज्य घटकों के लिए Storyboard के बजाय XIB का उपयोग करें। प्रत्येक कस्टम तालिका कोशिका, हेडर या फुटर एक अलग XIB में होना चाहिए। यह मर्ज को आसान बनाता है, लोडिंग को गति देता है, और Swift Package Manager या CocoaPods के माध्यम से परियोजनाओं के बीच घटकों के पुन: उपयोग की अनुमति देता है।

बड़े स्टोरीबोर्ड को मॉड्यूल में विभाजित करने के लिए Storyboard References कॉन्फ़िगर करें। 100 स्क्रीन वाले एक Main.storyboard के बजाय, प्रत्येक मॉड्यूल (Auth, Profile, Feed) के लिए एक स्टोरीबोर्ड बनाएँ और उन्हें Storyboard Reference के माध्यम से जोड़ें। इससे ibtool संकलन समय कम होगा और टीम वर्क सरल होगा।

बिना सत्यापन के File's Owner (k) से IBOutlet कनेक्शन से बचें। प्रत्येक कनेक्शन weak (k) और वैकल्पिक होना चाहिए (अंतर्निहित रूप से अनरैप किया गया वैकल्पिक केवल playgrounds में बढ़िया है)। किसी व्यू में 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 या अलग सेवाओं में जाता है
swift
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) विधि UI कॉन्फ़िगर करती है (गोल कोने, फ़ॉन्ट), और configure(with:) (fn) विधि भरने के लिए डेटा मॉडल स्वीकार करती है। जिम्मेदारियों का पृथक्करण परीक्षण और पुन: उपयोग को सरल बनाता है।

अक्सर पूछे जाने वाले प्रश्न

Interface Builder SwiftUI Preview से कैसे अलग है?

Interface Builder UIKit के लिए Storyboard/XIB प्रारूप के साथ एक विज़ुअल संपादक है, जो drag-and-drop के माध्यम से काम करता है। SwiftUI Preview एक घोषणात्मक वास्तविक समय पूर्वावलोकन है जहाँ इंटरफ़ेस Swift कोड में वर्णित है। दोनों उपकरण Xcode में निर्मित हैं, लेकिन IB XML उत्पन्न करता है जबकि SwiftUI सीधे Swift संकलित करता है। IB iOS 2.0+ का समर्थन करता है, SwiftUI iOS 13+ का समर्थन करता है।

क्या SwiftUI के साथ Interface Builder का उपयोग किया जा सकता है?

नहीं, Interface Builder सीधे SwiftUI के साथ संगत नहीं है। SwiftUI अपने स्वयं के घोषणात्मक सिंटैक्स और Canvas Preview का उपयोग करता है। हालांकि, IB के माध्यम से बनाई गई UIKit परियोजनाओं को UIViewRepresentable के माध्यम से SwiftUI में एकीकृत किया जा सकता है, और SwiftUI व्यू को UIHostingController के माध्यम से UIKit में एम्बेड किया जा सकता है। यह धीरे-धीरे IB से SwiftUI में माइग्रेट करने की अनुमति देता है।

@IBDesignable और @IBInspectable क्या हैं?

@IBDesignable एक Swift एनोटेशन है जो एप्लिकेशन चलाए बिना वास्तविक समय में सीधे Interface Builder में कस्टम UIView प्रदर्शित करता है। @IBInspectable गुणों के लिए एक एनोटेशन है, जो उन्हें IB Attributes Inspector पैनल में जोड़ता है। दोनों एनोटेशन कस्टम UI घटक विकास को गति देते हैं: बस इंस्पेक्टर में गुण बदलें और परिवर्तन तुरंत कैनवास पर दिखाई देता है।

Interface Builder में Auto Layout कैसे काम करता है?

Interface Builder में Auto Layout Pin मेनू (मार्जिन, चौड़ाई, ऊँचाई) और Align मेनू (केंद्रित करना, बेसलाइन) के माध्यम से बाधाएँ निर्धारित करता है। प्रत्येक बाधा व्यू के बीच एक गणितीय संबंध है। IB त्रुटियों को लाल रेखाओं और विरोधों को पीली चेतावनियों के साथ प्रदर्शित करता है। IB में Size Classes कोड लिखे बिना विभिन्न उपकरणों और ओरिएंटेशन के लिए अलग-अलग बाधाएँ निर्दिष्ट करने की अनुमति देती हैं।

IBOutlet और IBAction के माध्यम से Interface Builder के साथ कोड कैसे कनेक्ट करें?

IBOutlet कोड से UI तत्व के संदर्भ के लिए एक एनोटेशन है (जैसे @IBOutlet weak var label: UILabel!)। IBAction एक घटना पर कॉल की जाने वाली विधि के लिए एक एनोटेशन है (जैसे @IBAction func buttonTapped(_ sender: UIButton))। कनेक्शन IB कैनवास से नियंत्रक फ़ाइल में Ctrl+drag करके बनाया जाता है। माउस छोड़ने पर Xcode स्वचालित रूप से कनेक्शन कोड उत्पन्न करता है।

सारांश

  • Interface Builder — UIKit के लिए Xcode में एक विज़ुअल संपादक जिसका इतिहास 1988 (NeXTSTEP) से है
  • Storyboard प्रोटोटाइपिंग के लिए उपयुक्त है, XIB पुन: प्रयोज्य घटकों और उत्पादन परियोजनाओं के लिए
  • Auto Layout और Size Classes IB में बिना कोड के अनुकूली इंटरफ़ेस बनाने की अनुमति देते हैं
  • IBOutlet और IBAction स्वचालित Swift गुण जनरेशन के साथ Ctrl+drag के माध्यम से कोड को UI से जोड़ते हैं
  • @IBDesignable और @IBInspectable IB पूर्वावलोकन के साथ कस्टम व्यू विकास को गति देते हैं
  • SwiftUI Preview नई परियोजनाओं के लिए IB को बदल रहा है, लेकिन IB UIKit लीगेसी के लिए मानक बना हुआ है
  • सर्वोत्तम अभ्यास: Storyboard के बजाय XIB, weak IBOutlet, बाधा पहचान, awakeFromNib और कॉन्फ़िगरेशन का पृथक्करण

हम एक मोबाइल एप्लिकेशन टर्नकी विकसित करेंगे

IT Sectr 2017 से स्टार्टअप और व्यवसायों के लिए iOS और Android एप्लिकेशन बनाता है। हम आपको सलाह देंगे और सर्वोत्तम समाधान प्रस्तावित करेंगे।

परियोजना पर चर्चा करें

यह भी पढ़ें