iOS Development Help Site
By Nancy Liu
Dept. of Computer Science
iOS Help Site Navigation
iOS Help Site Home
Swift: Basics and Intros
Swift vs. Other Languages
Language Basics
Setup: Getting Started in Xcode
Playground vs. Project
Projects: Basics in Xcode
The Interface Builder
Additional Features
Projects: Not as Basic
Delegating Protocols
Core Data and User Defaults
Introduced in Class

Other useful links
Key Dates 2016-17
Final Exam Schedule
Register your i>clicker
ASCII (Wikipedia)

Project Basics in Xcode

The Interface Builder

Unless you like doing things old school, the interface builder is hands down the most useful and important thing about Xcode. The interface builder is an editor that lets you interactively build and edit the connections between storyboard and code without having to write any code yourself.

You know the sidebar of editing tools we went over in Setup: Getting Started? Or the search hub that you use to find objects you want to put onto the storyboard? Or simply the ability to drag and drop things and control-drag to create relationships? All of those functions are part of the interface builder.



Controllers, commonly referred to as view controllers, essentially manage and present views, or a hierarchy of views. What you see on the screen is a view (or another unique feature), managed by a controller in the background. At the very top (or bottom, however you would like to look at it) is the  Navigation Controller. This controller manages all the other controllers and their interactions with each other, if any.

When you search for a view controller in the search hub, you'll find that there are quite a few built-in controllers, such as: table view controller, collection view controller, tab bar controller, popover controller, etc.. The list goes on, and we'll touch on a few of the views and unique features that they manage.

It's important to note that when you want to associate code with a particular view, the code happens in a .swift file that links directly to the controller. Since the controller is the one managing the visual stuff, that's where you want to add code functionality. If you want to directly work with what shows up on the screen itself, that's where the interface builder allows you to edit the views. There are some functions that interact between both, such as segues.



Within "basic" views, there are three I want to touch on: Stack, Table, and View.

• View: The View is a general view, that serves essentially as a blank slate. You can put whatever you want into the View, wherever you want, and place constraints however you need. The View is the most general and uninhibiting of basic views.

For homeworks, this may be useful for when you have a "blank page" that needs to be filled with what the homework asks for, such as labels and buttons put in specific places. Be aware that contraints might not like you or cooperate, and they may not stick even when you specify them to. It might take a while and a bit of practice to get used to getting constraints to stick the way you want.

For projects in general, the View is useful for when you want to design a window without limitations, such as a creative loading screen.


• Table: the Table view is used for when you want a table of things. This is useful if you want to display a list of categories that can be selected, and each selection will lead (segue) to another view window. The Table view doesn't necessarily have to display an interactive list. You can use the Table view to just list things in a neat and orderly fashion. 

For homeworks, the Table view will be used mainly to show interactive lists, and Views will be used otherwise.

For projects in general, Tables are nice for the above-mentioned, though how often you use them will depend on what you plan to create.


• Stack: if you ever need things to be positioned in an orderly fashion, the Stack view may be the one you need. The Stack can be placed within other views, so if there's a few labels you want to space out properly within a View, for example, the Stack is a good way to organize those labels.

Remember, you can drag-highlight items and then put them into a Stack; there's no need to specifically create a Stack view and then make new items in it. This is the stack view button:


For homeworks, you're not required to use Stacks, but they are optional to use (for views that require specifically placed labels, or just if you want labels to be neatly stacked) if you'd like to get used to them.

For projects, if you need to display things in a table-like fashion, the Stack view is a great tool to use.


View Controller or Navigation Controller?

Navigation Controller and View Controller - what's the difference?

By definition, a View Controller is a controller that manages a view of some type - this is the object you make when you want a new window in your app (for example: if you have a cookbook app, a new window AKA a new view would be a recipe's specifics when you select it).

View controllers, if you need them to perform, receive, or send specific things, will require an accompanying .swift file that details those specifics. This is especially important if you need to specify how one window (view) segues into another, or how one view receives alerts from another.

The Navigation Controller, on the other hand, is essentially the manager of all your View Controllers.


The above diagram is a good way to see how Navigation Controllers work, taken from the Apple Developer's Library. Essentially, the Navigation Controller manages how your app interacts with each other, in addition to all your .swift files working with their respective View Controllers.

In general, the Navigation Controller isn't something to worry about. It does its thing as you work on your project. Your View Controllers, however, are completely your responsibility to get working.


Additional Features - More Views and Controllers

This is the section where the other cool features are, that are introduced in lecture. Use this section as a referrence, to put name to face, rather than an in-depth tutorial. The tutorials themselves, I have added suggestions if you'd like to read about them.



The popover is the little window that comes up when you push something - it's not a complete transition to another window, but it's also not a view that comes up in the current window. The popover is managed by a view controller (so it is still managed by a segue transition), but it's a window - smaller than your device's size - that just, y'know, pops over the current window.

There are many uses for the popover when you need something smaller than the full window, and don't want to show the sliding segue transition animation - such as a little settings menu when you push the settings icon, or like the image below (taken from guess what, a Developer's Guide):


Keep in mind that the popover is managed by a view controller and therefore has segue transitions (and passing info via segues) as an option. The tricky thing about popovers is that you also have to manage the size of the window and where the arrow is - if you don't constrain the window and arrow properly (like in the above image), the window may not show up like you want it to.



• iOS Dev Diary: How to create Popovers in iOS 9



A segmented control is a button-like object that can be placed in a view to be displayed on the screen. The difference is that a segmented control is a constant selection, somewhat like using a switch (such as a light switch, not the code structure); something in the segmented control is always going to be selected.


The neat thing about segmented controls is that you can use its nature of "constant selection", just like you can use the text on a label. Otherwise, there is not much extra to a segmented control. They can be used to display different windows - if "Playlists" is selected, show the Playlists window - or just used for information (one of the old homeworks made use of this feature).



• Apple Developer's Guide



Alerts are the little windows that pop up (different from popovers) and require you to manually dismiss the window (normally by picking a "Cancel" or "Okay" option). Because of this nature, where you're locked into the alert, many apps use alerts as warnings or important notifications - Apple themselves use alerts to warn you about your battery percentage, and will give you the option to cancel or enable power saving.



• Also a Developer's Guide

• Example by LearnAppDevelopment: How to Show an Alert with a List of Items in Swift 3 and iOS 10



A collection view is a view that allows you to display visual objects in the manner you would like. These objects can be interactive (ex: a collection of pictures that enlarge when you click on them) or not. Be warned that because this is a view, a lot of managing constraints and layouts will be required to get things to look the way you would like.

For the most part, the collection view is useful for when you want to display objects visually on a window - the iOS devices' photo album is a good example of what a collection view might look like and be used for.



• a Developer's Guide

• raywenderlich: UICollectionView Tutorial: Getting Started



The tab bar is a visual interface that looks similar to the segmented control. However, while the segmented control functions more like a label or a button, the tab bar is managed by a controller - that in turn, controls what shows up when you selected a specific tab.

A good example is the Clock app that comes with every iOS mobile app - selecting each of the tabs brings up a different window that each have their own visuals, functions, and levels of interaction.




• tutsplus - code: iOS From Scratch With Swift: Exploring Tab Bar Controller

• raywenderlich: Storyboards Tutorial in iOS 9 - Part 1 (scroll down for tab bar, it's in the middle)

Note for both tuts+ and raywenderlich that the iOS and Xcode versions might be outdated.

For raywenderlich, there is a Part 2, but this tutorial series is for exploring the storyboard in general, not just the tab bar. Many functions and features are touched on, if you'd like to keep looking past the tab bar section.