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 ফাইল এবং কাস্টম ভিউ। এই ফরম্যাটগুলির প্রতিটি 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 প্যানেলের মাধ্যমে রিয়েল টাইমে বৈশিষ্ট্য পরিবর্তন দেখার সুযোগ দেয়।

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 ফাইলগুলি মার্জ করা সহজ, আরও কমপ্যাক্ট এবং দ্রুত লোড হয় কারণ এতে সম্পূর্ণ অ্যাপ্লিকেশনের বর্ণনা থাকে না।

Xcode 11 থেকে, Apple পৃথক উপাদানের জন্য XIB ব্যবহার এবং একক বৃহদায়তন Storyboard এড়ানোর সুপারিশ করে। স্ক্রিনের মধ্যে নেভিগেশনের জন্য, ম্যানুয়ালি UIStoryboardSegue (k) বা কোঅর্ডিনেটরের মাধ্যমে কোড-ভিত্তিক নেভিগেশন পছন্দ করা হয়।

IB ফাইলে XML গঠন

.storyboard এবং .xib ফাইলগুলি Interface Builder Cocoa Touch XIB (dt) ফরম্যাটে 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-এর মধ্যে সুইচ করলে ক্যানভাসে সক্রিয় কনস্ট্রেইন্টের সেট পরিবর্তন হয়।

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)। উভয়ই 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) সহ একটি সাধারণ পদ্ধতির মতো দেখায়।

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) ব্যবহার করে।

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-র চেয়ে দ্রুত কাজ করে কারণ এটির আলাদা ফাইল কম্পাইল করার প্রয়োজন নেই।

বাস্তবে, 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 বা পৃথক সার্ভিসে যায়

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) পদ্ধতি পূরণের জন্য ডেটা মডেল গ্রহণ করে। দায়িত্বের পৃথকীকরণ পরীক্ষা এবং পুনঃব্যবহার সহজ করে।