iOS Dev Course: Interface Builder, Storyboard and base UI Classes

What is IB? How to build UI? What base UI elements are available? How to build custom UI? How to build story with some view Controllers?

Let’s answer to these questions in quick guide!


Preparation

Create a new Single View App project.

Hotkey: shift + command + N
Single View App

Interface Builder

What is IB?

The Interface Builder editor within Xcode makes it simple to design a full user interface without writing any code. Simply drag and drop windows, buttons, text fields, and other objects onto the design canvas to create a functioning user interface. Apple

Ok, now we have a new project with default files set and IB definition. Let’s continue.

Go to project navigator and open Main.storyboard file.

A storyboard is a visual representation of the user interface of an iOS application, showing screens of content and the connections between those screens. A storyboard is composed of a sequence of scenes, each of which represents a view controller and its views; scenes are connected by segue objects, which represent a transition between two view controllers.
Project Navigator, Main.storyboard file focus

Great. Now we are on Interface Builder.

Interface builder

Ok. What we can make in it? Now we’ll discover each step by step.

How to add a new element to your view?

Just press: shift + command + L

Components library

Choose element what you want and drag it to viewController.

Cool. Your first view is on scene.

Look throw Attributes Inspector (on the right side). This is UIView properties. *It’s unique attributes set for each other UI class element.

Attributes Inspector

Ok, Let’s connect view with our class.

  • Show Assistant Editor
  • Choose Automatic Mode to show code of class which is presented on IB
  • Open Connections Editor Tab in Attributes Inspector (on the right side last tap)
  • Choose Referencing Outlet and drag it into class
  • Print IBOutlet name
IBOutlet connection

So, now we have weak reference to that view in code.

Open ViewController.swift and write code to change contentView background color.

I think you have question — what is @IBOutlet?

So, Xcode have two major annotation that can help you bind properties with UI elements in Interface Builder files (.storyboard, .xib)

@IBOutlet — bind your class property to UI element in Interface file.

@IBAction — bind your class function to UI event in Interface file (touch, long tap, etc.).

Run program on simulator.

Great you have changed contentView color from code.

Go throw Interface Builder tabs and experiment with view properties.


Storyboard

Repeat one more time

A storyboard is a visual representation of the user interface of an iOS application, showing screens of content and the connections between those screens. A storyboard is composed of a sequence of scenes, each of which represents a view controller and its views; scenes are connected by segue objects, which represent a transition between two view controllers.

Let’s add second viewController and controls that provide navigation functions.

Add second view controller.

  • press shirt + command + L
  • drag ViewController to the storyboard scene
ViewController library search

As a result you have a second ViewController on storyboard.

Second ViewController on Storyboard

Add button to first viewController that opens second viewController via segue.

  • Add button. Hotkey: shift + command + L
  • drag button to the first viewController view
UIButton library search

Double click to button activate title editing. Tap your title.

Add segue to present second viewController.

  • Choose recently added button
  • Press ctrl and drag cursor to the second viewController
  • In options menu choose Present Modally
Drag & Drop segue

Great. Now we have a segue from first to second controller that present second controller modally on first.

Run program on Simulator and try it.

Are you want to add button that close second viewController?

Cool!

How to add backward ‘unwind’ segue.

  • Add unwind function to the first viewController (ViewController.swift file)
unwind segue action
  • Add button to the second viewController (look previous step how to add button)
  • Add exit segue on button action (on second viewController choose button and drag cursor to exit icon on viewController)
  • Choose unwindWithSegue function in options menu

You are good worker! Run program on simulator and see your result.

Clap!


Base UIKit Elements

UIKit have some primary elements that you can use to provide functional for user.

UIView — Views are the fundamental building blocks of your app’s user interface, and the UIView class defines the behaviors that are common to all views. A view object renders content within its bounds rectangle and handles any interactions with that content. The UIView class is a concrete class that you can instantiate and use to display a fixed background color. You can also subclass it to draw more sophisticated content.

UILabel — A view that displays one or more lines of read-only text, often used in conjunction with controls to describe their intended purpose.

UIButton — A control that executes your custom code in response to user interactions.

UITextField — An object that displays an editable text area in your interface.

UIImage — An object that manages image data in your app.

Try these classes in your project. Just press shift + command + L and write query.


Xib

Simple explanation of Xib sounds as “Interface file for single component”.
It can be viewController’s view, custom view. It’s a common practise in iOS to use xib files to create custom UI element’s layout.

The difference with storyboard is the xib can’t create connections between scenes (viewControllers). It’s just provide layout rules to your components.

Later we’ll discover how to use .xib for UITableViewCell (item of iOS table) and Custom UIView component that loads from xib.


You’ve done it! Clap! Clap!

Remember, the receipt to success is continuous learning and communication with colleagues including, self-education.

This was a small guide about UI Building . Read more on Apple Developer site. Don’t stop self-education.

Subscribe to my account to get notifications about new stories.

If you still have questions — write about it in the comments. I’ll answer them in future articles.