iOS Custom UIView from .xib

A beautiful view

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:

Step 1

Create a single view app project

Setp 2

Add a .xib file as shown in below image and name it “CustomView”

Creating CustomView.xib file

Step 3

Just like previous step add CustomView class. This time select CocoaTouch file and choose UIView in subclassof section and also name it “CustomView”

Step 4

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:

• The fileowner is the object that loads the nib, i.e. fileowner receives the message loadNibName: or initWithNibName: .
  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 fileowner.
• 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`

Step 5

Add following code toCustomView class

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 fileowner

1. In the .xib file as shown in Step 4. We do it so that we can draw outlet and action. Without setting fileowner Xcode would not able to connects the outlets and actions
2. Programmatically in fromNib method as shown below as loadNibName method takes fileowner as parameter. If we send nil instead of self it will overwrite previously assign fileowner to nill .

Step 6

CustomView is now fully baked. It is time to serve it. There are two ways we can add the CustomView

1. 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 CustomView

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

Demo of Custom View

Conclusion

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:

rokonuddin/CustomView

Thank you all for your attention 🙏🏻. feel free to tweet and get connected.