Interface Builder: τι είναι, οπτικός σχεδιασμός στο Xcode και storyboard

Τι είναι το Interface Builder;

Interface Builder — ένα στοιχείο του Xcode που προορίζεται για οπτικό σχεδιασμό διεπαφών χρήστη. Η ιστορία του IB ξεκίνησε το 1988 στην εταιρεία NeXT, πολύ πριν από την εμφάνιση του iOS. Ο Stefan Pope ανέπτυξε την πρώτη έκδοση για το NeXTSTEP — το λειτουργικό σύστημα που έγινε η βάση των macOS και iOS. Το 1996 η Apple αγόρασε τη NeXT και ενσωμάτωσε το Interface Builder στο Xcode.

Στο σύγχρονο Xcode, το Interface Builder υποστηρίζει τρεις μορφές αρχείων: Storyboard, XIB (Xcode Interface Builder) και αρχεία XIB για κελιά πίνακα και προσαρμοσμένα view. Κάθε μία από αυτές τις μορφές αποθηκεύει μια περιγραφή XML της ιεραρχίας των στοιχείων UI, των ιδιοτήτων τους, των περιορισμών και των συνδέσεων με τον κώδικα.

Το IB λειτουργεί σε επίπεδο UIKit: κουμπιά, ετικέτες, πεδία κειμένου, πίνακες, συλλογές και περιορισμοί σύρονται με το ποντίκι στον καμβά. Το Xcode μεταγλωττίζει τα αρχεία .storyboard και .xib σε αρχεία nib (compiled 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), ελεγκτές πλοήγησης, γραμμές καρτελών και όλα τα στοιχεία 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 — ένα δοχείο που διαχειρίζεται αυτόματα τη διάταξη των θυγατρικών view. Αρκεί να τοποθετήσετε στοιχεία σε ένα 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 για πεδία κειμένου, κουμπί και spinner, IBAction για χειρισμό πατήματος κουμπιού. Όλες αυτές οι συνδέσεις δημιουργούνται στο Interface Builder μέσω Ctrl+drag. Εάν η σύνδεση δεν έχει ρυθμιστεί, το IBOutlet θα είναι nil (v) κατά το χρόνο εκτέλεσης, προκαλώντας κατάρρευση κατά την πρόσβαση — γι' αυτό το IBOutlet δηλώνεται ως weak var (k s) με implicit 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, θα εμφανιστεί ένα κουμπί με gradient σε πραγματικό χρόνο. Όλες οι ιδιότητες 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
• Δημιουργία στιγμιοτύπων όλων των στοιχείων UI από το αρχείο
• Επαναφορά συνδέσεων IBOutlet και IBAction (outletCollection για ομάδες)
• Εφαρμογή περιορισμών Auto Layout από το αρχείο λαμβάνοντας υπόψη το size class
• Κλήση awakeFromNib() (fn) για κάθε αντικείμενο — σημείο εισόδου για διαμόρφωση μετά τη φόρτωση

Η μέθοδος awakeFromNib() (fn) καλείται αφού έχουν οριστεί όλα τα IBOutlet, αλλά πριν από το πρώτο layoutSubviews. Αυτό είναι βολικό για αρχική διαμόρφωση: ρύθμιση στρογγυλοποιήσεων, προσθήκη σκιών, εντοπισμός κειμένου. Όλα τα IBOutlet είναι ήδη εγγυημένα μη μηδενικά στο awakeFromNib.

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 και για εμπορικά έργα όπου σχεδιαστές εργάζονται στο 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 για διαίρεση μεγάλων storyboard σε ενότητες. Αντί για ένα Main.storyboard με 100 οθόνες, δημιουργήστε ένα storyboard για κάθε ενότητα (Auth, Profile, Feed) και συνδέστε τα μέσω Storyboard Reference. Αυτό θα μειώσει τον χρόνο μεταγλώττισης του ibtool και θα απλοποιήσει την ομαδική εργασία.

Αποφύγετε συνδέσεις IBOutlet προς File's Owner (k) χωρίς έλεγχο. Κάθε σύνδεση πρέπει να είναι weak (k) και προαιρετική (το implicitly unwrapped optional είναι καλό μόνο στο playground). Κατά τη μετονομασία ενός IBOutlet στο view, το Xcode ενημερώνει αυτόματα τη σύνδεση, αλλά κατά τη μη αυτόματη επεξεργασία XML είναι εύκολο να γίνει λάθος.

• Ελέγχετε πάντα το Show Connection Panel (k) μετά από επεξεργασία αρχείου IB — οι κόκκινες ενδείξεις υποδεικνύουν διακοπείσες συνδέσεις
• Χρησιμοποιήστε User Defined Runtime Attributes (k) για ρύθμιση ιδιοτήτων χωρίς κώδικα: layer.cornerRadius, layer.borderWidth, tintColor
• Ομαδοποιήστε τους περιορισμούς στο IB ανά σκοπό: περιορισμοί για μεγέθη, περιορισμοί για περιθώρια, περιορισμοί για αναλογίες
• Αντιστοιχίστε ένα Identifier (k) σε κάθε περιορισμό στο Size Inspector — βοηθά στον εντοπισμό σφαλμάτων σε συγκρούσεις
• Μην τοποθετείτε επιχειρηματική λογική στο 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
        /// Φόρτωση avatar μέσω SDWebImage ή Kingfisher
    }

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

Στο παράδειγμα εμφανίζεται μια βέλτιστη πρακτική για view XIB: η στατική μέθοδος instantiateFromNib (fn) φορτώνει το view από XIB με το ίδιο όνομα με την κλάση. Η μέθοδος awakeFromNib (fn) διαμορφώνει το UI (στρογγυλοποιήσεις, γραμματοσειρές) και η μέθοδος configure(with:) (fn) δέχεται ένα μοντέλο δεδομένων για συμπλήρωση. Ο διαχωρισμός αρμοδιοτήτων απλοποιεί τη δοκιμή και την επαναχρησιμοποίηση.