Difference between Nib and Xib (iOS)

To understand this difference, it is important to have basic comprehension of the 2 frameworks used in iOS development:

1. The first and the oldest is the UIKit, at the beginning of its life cycle it was built to be used with Objective-C language, but after some time it was adapted and updated to be used with Swift, a new and easier language to work with. For being the first framework, it is still the most used on iOS.
2. The other one is SwiftUI, this framework was built to bring new development paradigms to iOS, for being a newer way of development it was chosen to use Swift as the main language, completely discarding objective-c from the framework.

The quick explanation between the difference of UIKit and SwiftUI was important because XIBs and NIBs are directly related to Objective-C, so these two concepts only exists in UIKit since SwiftUI does not use this language.

This article will be more theoretical, focused on showing the difference between the two topics, below is an article showing how to use XIB to create reusable components.

Building a Custom Component with XIB (iOS)

NIB and XIB

NIB stands for “NeXTSTEP Interface Builder” and XIBS stands for “Xcode Interface Builder”, analyzing the name is noticeable that both are related to building interfaces. They can create interface components where these items are constructed in a way that generally makes them reusable, which means you can use these components on other screens without having to rebuild this item from scratch.

The XIB is where the components are built, being possible to use in its construction the components that are children of a UIView, so it is possible to add any primitive iOS component, for example: UIScrollView, UITextfield and also any other XIB that you built that is a child of UIView. Furthermore, it’s possible to change the look of these components by changing their height, width, color, and positioning on the screen.

The NIB is the initialized UIView, with this object already loaded it is possible to change by code the data shown by the component and change its structure, adding and removing components, changing their color, changing the positioning of the internal items, etc.

Example

In figure 1 we have a card built using XIB, it is a UIView that will be reused later, to show a set of cards.

figure 1.: Example of a card made in XIB

Inward the code below, between lines 7 and 10 we have the init called when initializing the view programmatically and between lines 12 and 15 we have the init called when it is initialized through the visual method. In both constructors, we call the standartIntit method on line 17, where the configuration is so that swift knows how to initialize the XIB as NIB.

Code 1.: Card Nib Configuration

Advantages

The use of these tools allows us to create customized components, so that they can be reused in other components and screens, making development faster and more practical.

In Figure 2 we have another XIB that will be a scrollable list of cards, we can see that the Stack View has the card component built in the previous block.

figure 2.: Example of a card scroll

The code is the same as the view class in figure 1, the difference is line 16, where we say that the XIB to be initialized is called “CardsScrollView”.

Code 2.: Card scroll nib configuration

In Figure 3, we can see the reuse of components more clearly, as we put the XIB for scrolling cards on a view, without having to do any extra configuration on it, since all the view configuration was done in the previous item.

figure 3.: Reusing the scroll of cards in the view

In image 4 we can observe the functioning of the components built previously.

Figure 4.: code reuse demonstration