• action
  • canvas
  • Document Outline
  • view controller
  • initial view controller
  • outlet
  • scene
  • XIB

XIB

An XIB file contains the user interface for a single visual element, such as a full-screen view, a table view cell, or a custom UI control. XIBs were used more heavily before the introduction of storyboards. They're still a useful format in certain situations, but this lesson will focus on storyboards.

StoryBoard

“a storyboard file includes many pieces of the interface, defining the layout of one or many screens as well as the progression from one screen to another. ”

“the top-most file (IBBasics) in the project navigator, and find the Deployment Info section under the General header. The entry in Main Interface defines which storyboard file will be loaded first when the app launches. Since you created the project using the Single View Application template, this entry was preconfigured to use Main.storyboard. ”

Excerpt From: Apple Education. “App Development with Swift.” Apple Inc. - Education, 2017. iBooks. https://itunes.apple.com/au/book/app-development-with-swift/id1219117996?mt=11

UI Builder Objects now appear to be (only?) in their own pop-out window, accessible from next to the address breadcrumbs.

Open the pop-out and drag elements onto the story-board to form your views.

Use the available inspectors

“In addition to the File and Quick Help inspectors (which are always available), the top of the utilities area displays four context-sensitive inspectors when you're in Interface Builder. To explore these different inspectors and how they can help you customize the objects in your view, select the button you just added—either in the Document Outline or in the scene itself. ”

Excerpt From: Apple Education. “App Development with Swift.” Apple Inc. - Education, 2017. iBooks. https://itunes.apple.com/WebObjects/MZStore.woa/wa/viewBook?id=1219117996

Outlets

“This reference from Interface Builder to code is called an outlet. When you have an object that you want the user to interact with, you create an action—a reference to a piece of code that will execute when the interaction takes place. ”

    @IBOutlet weak var myButton: UIButton!

"!" warns you that the UIButton must be defined (it's not optional)

Actions

Like an outlet, only connecting BEHAVIOUR, rather than properties.

Programmatic Interfaces

You can do everything that Interface Builder does programmatically and sometimes you need to.

Many objects that you can configure in Interface Builder have properties that can only be set programmatically. For example, UIScrollView has a contentSize property that does not have a matching option in the Attributes inspector.

When you need to adjust one of these settings, you can do so programmatically by setting up an IBOutlet and updating the properties using dot notation.  

scrollView.contentSize = CGSize(width: 100, height: 100)  

In fact, everything that you can do in Interface Builder can also be done programmatically, including setting up all child views and adding them to the screen.  

let label = UILabel(frame: CGRect(x: 16, y: 16, width: 200,
height: 44))
view.addSubview(label) // Adds label as a child view to 'view'

This type of setup is most commonly done in the viewDidLoad() function of a view controller, which gives you access to the view controller's main view property before it is displayed on the screen.

Excerpt From: Apple Education. “App Development with Swift.” Apple Inc. - Education, 2017. iBooks. https://itunes.apple.com/WebObjects/MZStore.woa/wa/viewBook?id=1219117996

Programming Swift in X-code