Building a Custom Component with XIB (iOS)

One of the most exhausting tasks in computing is when you need to rebuild something that has already been done before, usually letting to copy and paste a block of code that has already been written.

To avoid this code rewriting we can use some programming techniques, such as creating functions, using inheritance to reuse code from the parent class, using interfaces, etc.

In the UIKit framework there is away to reuse screen components, this resource is called XIB (NeXTSTEP Interface Builder), which basically is an XML file that can be graphically edited by XCode and then reused in other screens.

In this article, it will be shown how to build reusable components using XIB, if you want to know more about XIB see the article below.

Difference between Nib and Xib (iOS)

How to Build

As said before, we will build a custom component, with two features, the first is a UIImageView that can have its image changed, and the second will be a UILabel that can have its text changed.

Starting Project

1. To create a project it is easy, first click on create a new Xcode project.
2. Select the App option in the project temples tab.
3. Add a name to the project and select Storyboard in the interface option.
4. Finally, select the destination folder to your project.

Creating Project

Keeping project organization

In the construction of a new XIB, is created 2 files, one of the files is ComponentName.swift, where it has the object logic, and the other is ComponentName.xib, being the file that saves the object graphical changes.

The need of having to always create two files, creates the motivation to organize the project to make it easy and intuitive to search them, so let’s create a group to keep them together.

1. Right-click on the project folder.
2. Select new group.
3. Choose the group name.

Creating a group

Creating Files

Now with the group made we can create the swift files and the XIB of our new View.

Swift File

1. Right-click the group created earlier and select new file.
2. With the templates tab open, Swift File or Cocoa Touch Class can be selected, in this case we will pick the second option, as the generated file is more complete.
3. Decide your view name.
4. Set the subclass as UIView
5. Create file.

Creating component's swift file

XIB File

1. Right-click the folder created earlier and select new file.
2. Select View option.
3. Put the XIB name the same as the Swift file name.

Creating component’s XIB file

Configuring the XIB File

Now with the files created, we have to connect the XIB file with Swift.

1. Select the XIB file.
2. Open the Document Outline (left bar) and Inspectors (right bar).
3. Select Files's Owner option.
4. Change the class to your component’s swift filename.

Defining the file owner

Now we will update the size of the view, we will alter its Background, add a UILabel and a UIImageView, and finally, we will add their constraints.

Size

1. Select the Custom View.
2. Open the attributes inspector.
3. Select the freeform option.

Defining view's size as Freeform

Now we can change the size however we want. In our case, we will leave the width at 120 points and the height at 240.

1. Select the Custom View.
2. Open the Size inspector.
3. Write in the Width tab the desired value.
4. Write in the Height tab the desired value.

Changing view size

Now with the size defined, we will add the components of this view, which in this case are UIImageView and UILabel.

Adding Components

1. Select the Custom View.
2. Click the + on top of the editor or press ⌘ + shift + L to open the component list.
3. Search for UILabel, then drag and drop on the view.
4. Search for UIImageView, then drag and drop on the view.

Adding Components

With the components positioned, we can add their respective constraints so that they adapt according to the size of the parent component. Since the focus of this article is not to explain constraints, we will make XCode generate them automatically, which is mostly not ideal.

Constraints

1. Select the Custom View.
2. Press fix autolayout issues button, then select add missing constraints.

Adding constraints

With these changes, our view is now ready to be called in the controller, but to make it easier to see it, we’ll add an image to the UIImageView and add a background color to the view.

Final Touches

1. Select the Custom View.
2. Open the attributes inspector.
3. Choose the background color.
4. Select the UIImageView
5. Open the attributes inspector.
6. Choose the default image.

Final Touches

Configuring the Swift File

Now with the XIB configured we will write its initialization code, but first we will make the references of the two subcomponents.

References

1. Select the assistant, which opens the view code next to the XIB.
2. Holding ctrl select the subcomponent and drag it to the code that appears on the right.
3. Then decide a name for this IBOutlet.

Configuring the IBOutlets

With the connections made we can focus on the code below, on line 11 we have a static variable called identifier. It will serve to save and reuse the name of this XIB easily, for that reason, it has to be precisely the name of the XIB.

Inside the lines 17–20 and 22–25 we have two constructors, the first one is when the Storyboard or another XIB initialize this component, in the next section it will be shown how to do it this. The second constructor refers to when the component is initialized via code. In both constructors the initSubViews() is called, this function is the key to make the custom component using XIB work.

On line 29 we indicate which XIB we are referencing, at this point we pass the identifier created earlier, and pass the bundle as nil. This last parameter is used to determine which bundle/module your XIB is in, in our case it is in the main bundle, so we can pass the value as nil.

On lines 31 and 32 we initialize the selected XIB as a NIB, the nib.instantiate method receives the withOwner the class itself, and receives an options which is a dictionary of extra NIB options.

Then we use a .first, because our XIB only has one custom component. Then we convert this object to a UIView, if that’s not possible, we throw an error.

On line 34 we define the frame of the view, on line 35 we say that it will have a flexible height and width and finally on line 37 we define that our nib will be a subview.

Finally, we have a function called configureImageAndText, which will help us to change the text and image of the component in an easier way.

Calling the Component

Now with everything configured, we just need to call the component, for that, we have 2 options, the first is calling it using the Storyboard/XIB, the second is calling our component via code.

Storyboard/XIB

1. Open Storyboard or another XIB, in this case we will open the storyboard.
2. Click the + on top of the editor or press ⌘ + shift + L to open the component list.
3. Add a UIView.
4. Select the view added and open the attribute's inspector.
5. In custom class put your CustomView in class.
6. In Size inspector, change the height and width of your object.
7. Still within the Size Inspector, click on all, the Autoresizing option.
8. Build the code.

Opening custom view using Storyboard.

Via Code

Creating a custom XIB on screen is the same as creating any other view that exists native to UIKit.

On line 8 we create the view’s rect, which serves to determine its positioning on the screen and its dimensions. On line 9 we initialize this view passing the rect as its frame.

Finally, we change its color on line 10 and set it as a subview of the controller on line 11.

Opening custom view by code.

Changing Component Data

Now that the component is working, we can change the information it has, we already made a small example of this when we changed the component’s color to green, but now we will change the image and the text shown.

Before changing the values, we need to create a connection between the Storyboard’s customView and the code.

1. Select the assistant, which opens the view code next to the XIB.
2. Holding ctrl select the customView and drag it to the code that appears on the right.
3. Then choose a name for this IBOutlet.

Configuring custom view outlet.

Now we just need to call the configureImageAndText method with two components created, passing the image and the text we defined.

Changing views values.

Conclusion

With this, you can build custom views and change their values, avoiding as much as possible having to be rebuilt from 0 of these screens. You can download this project on this link.

If you want to better understand the difference between XIB and NIB, read the article below, where I explain this difference better.

Difference between Nib and Xib (iOS)