DevTut

# Custom UIViews from XIB files

# Wiring elements

Create a XIB file

Xcode Menu Bar > File > New > File.
Select iOS, User Interface and then "View":

First step (opens new window)

Give your XIB a name (yes, we are doing a Pokemon example 👾).
Remember to check your target and hit "Create".

Second step (opens new window)

Design your view

To make things easier, set:

  • Size: Freeform
  • Status Bar: None
  • Top Bar: None
  • Bottom Bar: None

Third step (opens new window)

Click on the Size Inspector and resize the view.
For this example we'll be using width 321 and height 256.

Fourth step (opens new window)

Drop some elements into your XIB file like shown below.
Here we'll be adding an Image View (256x256) and a Switch.

Fifth step (opens new window)

Add Auto-Layout constraints by clicking on "Resolve Auto Layout Issues" (bottom-right) and selecting "Add Missing Constraints" under "All Views".

Sixth step (opens new window)

Preview the changes you made by clicking on "Show the Assistant Editor" (top-right), then "Preview".
You can add iPhone screens by clicking on the "Plus" button.
The preview should look like this:

Seventh step (opens new window)

Subclass UIView

Create the class that is going to manage the XIB file.
Xcode Menu Bar > File > New > File.
Select iOS / Source / Cocoa Touch Class. Hit "Next".

Eighth step (opens new window)

Give the class a name, which must be the same name as the XIB file (Pokemon).
Select UIView as the subclass type, then hit "Next".

Nineth step (opens new window)

On the next window, select your target and hit "Create".

Tenth step (opens new window)

Connect Pokemon.xib to Pokemon.swift via "File’s Owner" attribute

Click on the Pokemon.xib file in Xcode.
Click on the "File's Owner" outlet.
On the "Identity inspector" (top-right), set the Class to our recently created Pokemon.swift file.

Eleventh step (opens new window)

POKEMONS!!!

Yes! Drag and drop some Pokemons into your project to finish up our "infrastructure".
Here we are adding two PGN files, 256x256, transparent.

Twelfth step (opens new window)

Show me code already.

All right, all right.
Time to add some code to our Pokemon.swift class.

It's actually pretty simple:

  1. Implement required initializers
  2. Load the XIB file
  3. Configure the view that will display the XIB file
  4. Show the above view

Add the following code to the Pokemon.swift class:

import UIKit

class Pokemon: UIView {
    
    // MARK: - Initializers
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupView()
    }
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setupView()
    }
    
    // MARK: - Private Helper Methods
    
    // Performs the initial setup.
    private func setupView() {
        let view = viewFromNibForClass()
        view.frame = bounds

        // Auto-layout stuff.
        view.autoresizingMask = [
            UIViewAutoresizing.flexibleWidth,
            UIViewAutoresizing.flexibleHeight
        ]

        // Show the view.
        addSubview(view)
    }
    
    // Loads a XIB file into a view and returns this view.
    private func viewFromNibForClass() -> UIView {
        
        let bundle = Bundle(for: type(of: self))
        let nib = UINib(nibName: String(describing: type(of: self)), bundle: bundle)
        let view = nib.instantiate(withOwner: self, options: nil).first as! UIView
        
        /* Usage for swift < 3.x
        let bundle = NSBundle(forClass: self.dynamicType)
        let nib = UINib(nibName: String(self.dynamicType), bundle: bundle)
        let view = nib.instantiateWithOwner(self, options: nil)[0] as! UIView
        */

        return view
    }
}

@IBDesignable and @IBInspectable

By adding @IBDesignable to your class, you make possible for it to live-render in Interface Builder.
By adding @IBInspectable to the properties of your class, you can see your custom views changing in Interface Builder as soon as you modify those properties.

Let's make the Image View of our custom view "Inspectable".

First, hook up the Image View from the Pokemon.xib file to the Pokemon.swift class.

Thirteenth step (opens new window)

Call the outlet imageView and then add the following code (notice the @IBDesignable before the class name):

@IBDesignable class Pokemon: UIView {
    
    // MARK: - Properties
    
    @IBOutlet weak var imageView: UIImageView!
    
    @IBInspectable var image: UIImage? {
        get {
            return imageView.image
        }
        set(image) {
            imageView.image = image
        }
    }

    // MARK: - Initializers
    ...

Using your Custom Views

Got to your Main storyboard file, drag a UIView into it.
Resize the view to, say 200x200. Centralize.
Go to the Identity inspector (top-right) and set the Class to Pokemon.

Fourteenth steps (opens new window)

To select a Pokemon, go to the Attribute Inspector (top-right) and select one of the Pokemon images you previously added using the awesome @IBInspectable image property.

Fifteenth step (opens new window)

Now duplicate your custom Pokemon view.
Give it a different size, say 150x150.
Choose another Pokemon image, observe:

Sixteenth step (opens new window)

Now we are going to add more logic to that self-containing custom UI element.
The button will allow Pokemons to be enabled/disabled.

Create an IBAction from the Switch button to the Pokemon.swift class.
Call the action something like switchTapped.
Add the following code to it:

// MARK: - Actions

@IBAction func switchTapped(sender: UISwitch) {
    imageView.alpha = sender.on ? 1.0 : 0.2
}

// MARK: - Initializers
...

Final result:

Final (opens new window)

You are done!
Now you can create complex custom views and reuse them anywhere you want.
This will increase productivity while isolating code into self-contained UI elements.

The final project can be cloned in Github. (opens new window)
(Updated to Swift 3.1)

# How to make custom reusable UIView using XIB

Following example shows steps involved in initializing a view from XIB.

This is not a complex operation but exact steps need to be followed in order to do it right way first time, avoiding exceptions.

How does loadNibNamed Works (opens new window)

Main steps are:

  1. Create XIB
  2. Create class .h and .m
  3. Define outlets in .h
  4. Connect outlets between .h and XIB

See attached screenshot:

Label Object connected to myLabel IBOutlet UILabel variable (opens new window)

  1. Invoke loadNibNamed inside initWithCoder function of .m file. This is needed to ensure you can directly place UIView object into storyboard / Parent UIView XIB file and define it as your custom view. No other initialization code is needed once you load the storyboard / parent XIB. Your custom view can be added to other views just like other built-in Objective C view objects given in XCode.

# Remarks

From Apple: Creating a Custom View That Renders in Interface Builder (opens new window)

  • Note: Keep in mind that if you'd use fancy 'custom' fonts in your XIB elements (such UILabel, UITextField etc) then the initial loading time of your XIB will be longer depending on the font chosen and system version.

← UIBezierPath →