Search code examples
iosstoryboardinterface-builder

What is the relationship between Storyboards and the Interface Builder?


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?


Solution

  • ...
    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 UIViewControllers, 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 UIViews 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: