iOS Custom UIView from .xib
In iOS App development, creating custom views is a very common practice. We often create custom views for reusability, to segregate responsibility or to decouple dependencies etc. Though there are tons of stackoverflow answers, medium, blogs etc. on this topic, yet it is very tough to find a neat and comprehensive example of creating custom view from .xib.
Let’s begin with following steps:
Create a single view app project
Add a .xib file as shown in below image and name it “CustomView”
Creating CustomView.xib file
Just like previous step add CustomView class. This time select CocoaTouch file and choose UIView in
subclassof section and also name it “CustomView”
Select the CustomView.xib file and from Xcode’s Attribute inspectors set file owner of CustomView.xib to
CustomView class as shown below.
Setting view’s file owner
Now, here comes so many questions like: What is file owner? or Why not setting subclass instead of fileowner? etc.
Few points to be remembered:
fileowner is the object that loads the nib, i.e.
fileowner receives the message
If we want to access any objects in the nib after loading it, you can set an outlet in the file owner. ViewController acts as
fileowner for View in storyboard that is why we don’t explicitly set
fileowner for view in storyboard.
• The reason it is called file owner and given a special place, is because unlike the other objects in the nib, the file owner is external to the nib and is not part of nib. In fact, it only becomes available when the nib is loaded. So the file owner is a stand-in or proxy for the actual object which will later load the nib.
• So you created a fancy view with lots of subviews eg: buttons, labels, etc . If you want to modify any of these subviews any time after loading the nib, we set outlets for these objects to the
• Whenever we create custom view from xib we set its fileowner not custom sub class.
Drawing outlet from a view to its file owner
If we now select Assistant editor in Xcode, it will show corresponding class
CustomView for the selected .xib as show below.
.xib and it’s corresponding class `CustomView`
Add following code to
Add a button to CustomView by dragging from object library and draw the outlet and action as shown below.
Drawing acting for button
There are two place where we set
- In the .xib file as shown in Step 4. We do it so that we can draw outlet and action. Without setting
fileownerXcode would not able to connects the outlets and actions
- Programmatically in
fromNibmethod as shown below as
fileowneras parameter. If we send nil instead of self it will overwrite previously assign
CustomView is now fully baked. It is time to serve it. There are two ways we can add the
- By setting subclass of view in storyboard. In this case
init?(coder aDecoder: NSCoder)gets called even though we did not call the method. Because in stoaryboard interface builder serializes the state of that object on to disk, then deserialize it when the storyboard appears on screen. After setting subclass we can draw outlet of custom view of type
Setting custom view as subclass from storyboard
Add bellow code to your view controller
2. The second way we can use
CustomView is programmatically as shown below. This time
init(frame: CGRect) get called instead of
init?(coder aDecoder: NSCoder) as we called the
init(frame: CGRect) method explicitly.
Demo of Custom View
That’s all about creating custom view from .xib. If you enjoy this tutorial, I highly recommend you to read my another post on table view prefetching.
Enough of talking. Let the code talk now: