Custom UIViews from XIB files
- 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.
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.
Main steps are:
- Create XIB
- Create class .h and .m
- Define outlets in .h
- Connect outlets between .h and XIB
See attached screenshot:
- 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.
Create a XIB file
Xcode Menu Bar > File > New > File.
Select iOS, User Interface and then "View":
Give your XIB a name (yes, we are doing a Pokemon example 👾).
Remember to check your target and hit "Create".
Design your view
To make things easier, set:
- Size: Freeform
- Status Bar: None
- Top Bar: None
- Bottom Bar: None
Click on the Size Inspector and resize the view.
For this example we'll be using width 321 and height 256.
Drop some elements into your XIB file like shown below.
Here we'll be adding an Image View (256x256) and a Switch.
Add Auto-Layout constraints by clicking on "Resolve Auto Layout Issues" (bottom-right) and selecting "Add Missing Constraints" under "All Views".
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:
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".
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".
On the next window, select your target and hit "Create".
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.
Yes! Drag and drop some Pokemons into your project to finish up our "infrastructure".
Here we are adding two PGN files, 256x256, transparent.
Show me code already.
All right, all right.
Time to add some code to our Pokemon.swift class.
It's actually pretty simple:
- Implement required initializers
- Load the XIB file
- Configure the view that will display the XIB file
- Show the above view
Add the following code to the Pokemon.swift class:
@IBDesignable and @IBInspectable
@IBDesignable to your class, you make possible for it to live-render in Interface Builder.
@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.
Call the outlet
imageView and then add the following code (notice the
@IBDesignable before the class name):
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.
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.
Now duplicate your custom Pokemon view.
Give it a different size, say 150x150.
Choose another Pokemon image, observe:
Now we are going to add more logic to that self-containing custom UI element.
The button will allow Pokemons to be enabled/disabled.
IBAction from the Switch button to the Pokemon.swift class.
Call the action something like
Add the following code to it:
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.
(Updated to Swift 3.1)