What is the relationship between Storyboards and the Interface Builder?

Question

I just started learning XCode, objective-c, iOS, and all that. This is my first foray into app development. I'm not new to development, just iOS development and XCode.

So I'm going through a Udemy course that has me working with storyboards and I have some concern because every professional iOS developer I know uses something called Interface Builder which apparently removes the need for storyboards.

I've only just started, so I still have only a rough idea of what a storyboard even is....it seems to just be a graphical representation of a single page view. I don't know how it relates to this so-called Interface Builder and what their relationship is.

By going through this course learning with storyboards, am I being put on the wrong track? Or is this a useful beginning step before transitioning to the Interface Builder? Will using storyboards help me to work with that later? Am I wasting my time?

Answer 1

The Interface Builder refers to the part of Xcode that lets you view and edit Storyboards and .xib files (it automatically opens when you click on such a file).

A .xib (or 'nib') file is a representation of a single logical view in you application (on iOS, typically a UIViewController with a number of views, such as a UIScrollView and a UINavigationBar ).

A storyboard is a collection of such views, and can be used to build transitions from views to other views, among other things.

I recommend reading Apple's Documentation on storyboards to get an idea of what they can do for you.

Answer 2

...
Interface Builder which apparently removes the need for storyboards.
...

Actually, storyboard is a concept within Interface Builder.
It's a visual representation of the entire app flow.

I think all you need is a quick-read through the Apple Interface Builder Doc .
In basic understanding, IB is a drag-drop area to visually create your views.

To quote:

You create your app's user interface in Interface Builder. Select a user interface file in the project navigator, and the file's contents open in Interface Builder in the editor area of the workspace window. A user interface file has the filename extension .storyboard or .xib.

Logical Example: Instead of programmatically coding a UIButton and setting it's frame or constraints, you go to the Interface Builder, select a UIButton object and place it where you would want it to go. You will also specify what the object name and what method it responds to. ( but this will need the object name and method name to be defined in the respective class's .m or .h file that the view is associated with )

---

Interface Builder can be either XIB/nib or Storyboard. Latter of which is the more recent ( and recommended ) method provided by Apple.

Using a storyboard, you have one single file, a .storyboard file that will represent the entire app flow.
An app can have multiple screens/views and so a storyboard will basically represent multiple UIViewController s, each of which will be tied to a particular class.

For example, in this storyboard, you can visually see ( assumptions from here on ) that you have, say, 5 screens in the entire app:

1. Screen 1 begins with maybe a UINavigationController
2. Screen 2 is the root view of this UINavigationController , say, LoginVC ^{(tied to LoginVC.m and LoginVC.h )} .
   • A button on LoginVC takes you to, say, SignUpVC ^{(tied to SignUpVC.m and SignUpVC.h )}
   • Another button on LoginVC takes you to, say, ProfileVC ^{(tied to ProfileVC.m and ProfileVC.h )}
3. Screen 3 is SignUpVC
   • A button takes you back to LoginVC
4. Screen 4 is ProfileVC
   • A button takes you to SettingsVC ^{(tied to SettingsVC.m and SettingsVC.h )}
   • A button logs you out and takes you back to LoginVC
5. Screen 5 is SettingsVC

---

Q.

By going through this course learning with storyboards, am I being put on the wrong track?

A.
No, absolutely not. You're going in the right direction.
However, i think knowing the former XIB/nib method is worth your time as well.
Plus, programmatically creating UIView s is highly recommended.

---

Q.

...is this a useful beginning step before transitioning to the Interface Builder?

A.
It's already getting you acquainted with the Interface Builder so there won't really be much "transitioning" required.

---

Q.

Will using storyboards help me to work with that later? Am I wasting my time?

A.
Yes, unless you work in a team under version control, in which case, XIB still looks good.

---

So what's XIB?

It's still within the Interface Builder scope...
Break a storyboard into it's individual views and you have multiple files ( .xib files ) that represent a UIView or UIViewController for a single class. ( hence helps when you work in a team under version control )

So now... instead of having one .storyboard , you will have multiple .xib files that will be associated to all those classes that ( you deem ) needed a visual representation.

---

Links:

• Storyboard
• XIB

Answer 3

Storyboard: Has a nice UI designer, WYSIWYG, drag, resize design editor, that generates code and sync with manual code changes.

SwiftUI: Code is the single source of truth. No Designer. Lots of hard coding