Stanford CS193p

Developing Applications for iOS

Spring 2016

CS193p

Spring 2016
 Today
Interface Builder Demo
Viewing and editing your custom UIViews in your storyboard (FaceView)

The FaceViewController MVC’s Model

It’s a facial expression

Gestures
Getting touch input from users

Demo: Modifying the facial expression

Panning, pinching, tapping, rotating

Multiple MVCs
Tab Bar, Navigation and Split View Controller

CS193p

Spring 2016
 Demo
Interface Builder Demo
Viewing and editing your custom UIViews in your storyboard (FaceView)

The FaceViewController MVC’s Model

It’s a facial expression

CS193p

Spring 2016
 Gestures
We’ve seen how to draw in a UIView, how do we get touches?
We can get notified of the raw touch events (touch down, moved, up, etc.)
Or we can react to certain, predefined “gestures.” The latter is the way to go!

Gestures are recognized by instances of UIGestureRecognizer

The base class is “abstract.” We only actually use concrete subclasses to recognize.

There are two sides to using a gesture recognizer

1. Adding a gesture recognizer to a UIView (asking the UIView to “recognize” that gesture)
2. Providing a method to “handle” that gesture (not necessarily handled by the UIView)

Usually the first is done by a Controller

Though occasionally a UIView will do this itself if the gesture is integral to its existence

The second is provided either by the UIView or a Controller

Depending on the situation. We’ll see an example of both in our demo.

CS193p

Spring 2016
 Gestures
Adding a gesture recognizer to a UIView
Imagine we wanted a UIView in our Controller’s View to recognize a “pan” gesture.
We can configure it to do so in the property observer for the outlet to said UIView …
@IBOutlet weak var pannableView: UIView {
didSet {
let recognizer = UIPanGestureRecognizer(
target: self, action: #selector(ViewController.pan(_:))
)
pannableView.addGestureRecognizer(recognizer)
}
}

CS193p

Spring 2016
 Gestures
Adding a gesture recognizer to a UIView
Imagine we wanted a UIView in our Controller’s View to recognize a “pan” gesture.
We can configure it to do so in the property observer for the outlet to said UIView …
@IBOutlet weak var pannableView: UIView {
didSet {
let recognizer = UIPanGestureRecognizer(
target: self, action: #selector(ViewController.pan(_:))
)
pannableView.addGestureRecognizer(recognizer)
}
}
The property observer’s didSet code gets called when iOS hooks up this outlet at runtime.

CS193p

Spring 2016
 Gestures
Adding a gesture recognizer to a UIView
Imagine we wanted a UIView in our Controller’s View to recognize a “pan” gesture.
We can configure it to do so in the property observer for the outlet to said UIView …
@IBOutlet weak var pannableView: UIView {
didSet {
let recognizer = UIPanGestureRecognizer(
target: self, action: #selector(ViewController.pan(_:))
)
pannableView.addGestureRecognizer(recognizer)
}
}
The property observer’s didSet code gets called when iOS hooks up this outlet at runtime.
Here we are creating an instance of a concrete subclass of UIGestureRecognizer (for pans)

CS193p

Spring 2016
 Gestures
Adding a gesture recognizer to a UIView
Imagine we wanted a UIView in our Controller’s View to recognize a “pan” gesture.
We can configure it to do so in the property observer for the outlet to said UIView …
@IBOutlet weak var pannableView: UIView {
didSet {
let recognizer = UIPanGestureRecognizer(
target: self, action: #selector(ViewController.pan(_:))
)
pannableView.addGestureRecognizer(recognizer)
}
}
The property observer’s didSet code gets called when iOS hooks up this outlet at runtime.
Here we are creating an instance of a concrete subclass of UIGestureRecognizer (for pans)
The target gets notified when the gesture is recognized (in this case, the Controller itself)

CS193p

Spring 2016
 Gestures
Adding a gesture recognizer to a UIView
Imagine we wanted a UIView in our Controller’s View to recognize a “pan” gesture.
We can configure it to do so in the property observer for the outlet to said UIView …
@IBOutlet weak var pannableView: UIView {
didSet {
let recognizer = UIPanGestureRecognizer(
target: self, action: #selector(ViewController.pan(_:))
)
pannableView.addGestureRecognizer(recognizer)
}
}
The property observer’s didSet code gets called when iOS hooks up this outlet at runtime.
Here we are creating an instance of a concrete subclass of UIGestureRecognizer (for pans)
The target gets notified when the gesture is recognized (in this case, the Controller itself)
The action is the method invoked on recognition ((_:) means the method has an argument)

CS193p

Spring 2016
 Gestures
Adding a gesture recognizer to a UIView
Imagine we wanted a UIView in our Controller’s View to recognize a “pan” gesture.
We can configure it to do so in the property observer for the outlet to said UIView …
@IBOutlet weak var pannableView: UIView {
didSet {
let recognizer = UIPanGestureRecognizer(
target: self, action: #selector(ViewController.pan(_:))
)
pannableView.addGestureRecognizer(recognizer)
}
}
The property observer’s didSet code gets called when iOS hooks up this outlet at runtime.
Here we are creating an instance of a concrete subclass of UIGestureRecognizer (for pans)
The target gets notified when the gesture is recognized (in this case, the Controller itself)
The action is the method invoked on recognition ((_:) means the method has an argument)
Here we ask the UIView to actually start trying to recognize this gesture in its bounds
CS193p

Spring 2016
 Gestures
Adding a gesture recognizer to a UIView
Imagine we wanted a UIView in our Controller’s View to recognize a “pan” gesture.
We can configure it to do so in the property observer for the outlet to said UIView …
@IBOutlet weak var pannableView: UIView {
didSet {
let recognizer = UIPanGestureRecognizer(
target: self, action: #selector(ViewController.pan(_:))
)
pannableView.addGestureRecognizer(recognizer)
}
}
The property observer’s didSet code gets called when iOS hooks up this outlet at runtime.
Here we are creating an instance of a concrete subclass of UIGestureRecognizer (for pans)
The target gets notified when the gesture is recognized (in this case, the Controller itself)
The action is the method invoked on recognition ((_:) means the method has an argument)
Here we ask the UIView to actually start trying to recognize this gesture in its bounds
Let’s talk about how we implement the handler … CS193p

Spring 2016
 Gestures
A handler for a gesture needs gesture-specific information
So each concrete subclass provides special methods for handling that type of gesture

For example, UIPanGestureRecognizer provides 3 methods

func translationInView(UIView) -> CGPoint // cumulative since start of recognition
func velocityInView(UIView) -> CGPoint // how fast the finger is moving (points/s)
func setTranslation(CGPoint, inView: UIView)
This last one is interesting because it allows you to reset the translation so far
By resetting the translation to zero all the time, you end up getting “incremental” translation

The abstract superclass also provides state information

var state: UIGestureRecognizerState { get }
This sits around in .Possible until recognition starts
For a discrete gesture (e.g. a Swipe), it changes to .Recognized (Tap is not a normal discrete)
For a continues gesture (e.g. a Pan), it moves from .Began thru repeated .Changed to .Ended
It can go to .Failed or .Cancelled too, so watch out for those!
CS193p

Spring 2016
 Gestures
So, given this information, what would the pan handler look like?
func pan(gesture: UIPanGestureRecognizer) {
switch gesture.state {
case .Changed: fallthrough
case .Ended:
let translation = gesture.translationInView(pannableView)
// update anything that depends on the pan gesture using translation.x and .y
gesture.setTranslation(CGPointZero, inView: pannableView)
default: break
}
}
Remember that the action was pan(_:) (if no _:, then no gesture argument)

CS193p

Spring 2016
 Gestures
So, given this information, what would the pan handler look like?
func pan(gesture: UIPanGestureRecognizer) {
switch gesture.state {
case .Changed: fallthrough
case .Ended:
let translation = gesture.translationInView(pannableView)
// update anything that depends on the pan gesture using translation.x and .y
gesture.setTranslation(CGPointZero, inView: pannableView)
default: break
}
}
Remember that the action was pan(_:) (if no _:, then no gesture argument)
We are only going to do anything when the finger moves or lifts up off the device’s surface

CS193p

Spring 2016
 Gestures
So, given this information, what would the pan handler look like?
func pan(gesture: UIPanGestureRecognizer) {
switch gesture.state {
case .Changed: fallthrough
case .Ended:
let translation = gesture.translationInView(pannableView)
// update anything that depends on the pan gesture using translation.x and .y
gesture.setTranslation(CGPointZero, inView: pannableView)
default: break
}
}
Remember that the action was pan(_:) (if no _:, then no gesture argument)
We are only going to do anything when the finger moves or lifts up off the device’s surface
fallthrough is “execute the code for the next case down” (case .Changed,.Ended: ok too)

CS193p

Spring 2016
 Gestures
So, given this information, what would the pan handler look like?
func pan(gesture: UIPanGestureRecognizer) {
switch gesture.state {
case .Changed: fallthrough
case .Ended:
let translation = gesture.translationInView(pannableView)
// update anything that depends on the pan gesture using translation.x and .y
gesture.setTranslation(CGPointZero, inView: pannableView)
default: break
}
}
Remember that the action was pan(_:) (if no _:, then no gesture argument)
We are only going to do anything when the finger moves or lifts up off the device’s surface
fallthrough is “execute the code for the next case down” (case .Changed,.Ended: ok too)
Here we get the location of the pan in the pannableView’s coordinate system

CS193p

Spring 2016
 Gestures
So, given this information, what would the pan handler look like?
func pan(gesture: UIPanGestureRecognizer) {
switch gesture.state {
case .Changed: fallthrough
case .Ended:
let translation = gesture.translationInView(pannableView)
// update anything that depends on the pan gesture using translation.x and .y
gesture.setTranslation(CGPointZero, inView: pannableView)
default: break
}
}
Remember that the action was pan(_:) (if no _:, then no gesture argument)
We are only going to do anything when the finger moves or lifts up off the device’s surface
fallthrough is “execute the code for the next case down” (case .Changed,.Ended: ok too)
Here we get the location of the pan in the pannableView’s coordinate system
Now we do whatever we want with that information
CS193p

Spring 2016
 Gestures
So, given this information, what would the pan handler look like?
func pan(gesture: UIPanGestureRecognizer) {
switch gesture.state {
case .Changed: fallthrough
case .Ended:
let translation = gesture.translationInView(pannableView)
// update anything that depends on the pan gesture using translation.x and .y
gesture.setTranslation(CGPointZero, inView: pannableView)
default: break
}
}
Remember that the action was pan(_:) (if no _:, then no gesture argument)
We are only going to do anything when the finger moves or lifts up off the device’s surface
fallthrough is “execute the code for the next case down” (case .Changed,.Ended: ok too)
Here we get the location of the pan in the pannableView’s coordinate system
Now we do whatever we want with that information
By resetting the translation, the next one we get will be incremental movement CS193p

Spring 2016
 Gestures
UIPinchGestureRecognizer
var scale: CGFloat // not read-only (can reset)
var velocity: CGFloat { get } // scale factor per second

UIRotationGestureRecognizer
var rotation: CGFloat // not read-only (can reset); in radians
var velocity: CGFloat { get } // radians per second

UISwipeGestureRecognizer
Set up the direction and number of fingers you want, then look for .Recognized
var direction: UISwipeGestureRecoginzerDirection // which swipes you want
var numberOfTouchesRequired: Int // finger count

UITapGestureRecognizer
Set up the number of taps and fingers you want, then look for .Ended
var numberOfTapsRequired: Int // single tap, double tap, etc.
var numberOfTouchesRequired: Int // finger count
CS193p

Spring 2016
 Demo
Gestures Demo
Add a gesture recognizer (pinch) to the FaceView to zoom in and out (control its own scale)
Add a gesture recognizer (pan) to the FaceView to control expression (Model) in the Controller

CS193p

Spring 2016
MVCs working together

CS193p

Spring 2016
 Multiple MVCs
Time to build more powerful applications
To do this, we must combine MVCs …

iOS provides some Controllers

whose View is “other MVCs” *

* you could build your own Controller that does this,

but we’re not going to cover that in this course
CS193p

Spring 2016
 Multiple MVCs
Time to build more powerful applications
To do this, we must combine MVCs …

iOS provides some Controllers

whose View is “other MVCs”
Examples:
UITabBarController
UISplitViewController
UINavigationController

CS193p

Spring 2016
 UITabBarController
It lets the user choose between different MVCs …

A “Dashboard” MVC

The icon, title and even a “badge value” on these

is determined by the MVCs themselves via their property:
var tabBarItem: UITabBarItem!
But usually you just set them in your storyboard.

CS193p

Spring 2016
 UITabBarController
It lets the user choose between different MVCs …

A “Health Data” MVC

If there are too many tabs to fit here,

the UITabBarController will automatically
present a UI for the user to manage the overflow!

CS193p

Spring 2016
 UITabBarController
It lets the user choose between different MVCs …

CS193p

Spring 2016
 UISplitViewController
Puts two MVCs side-by-side …

A
Calculator
MVC

Master

CS193p

Spring 2016
 UISplitViewController
Puts two MVCs side-by-side …

A A
Calculator Calculator Graph
MVC MVC

Master Detail

CS193p

Spring 2016
 UISplitViewController
Puts two MVCs side-by-side …

A A
Calculator Calculator Graph
MVC MVC

Master Detail

CS193p

Spring 2016
 UISplitViewController
Puts two MVCs side-by-side …

A A
Calculator Calculator Graph
MVC MVC

Master Detail

CS193p

Spring 2016
 UINavigationController
Pushes and pops MVCs off of a stack (like a stack of cards) …

This top area is drawn by the

UINavigationController

But the contents of the top An “All Settings” MVC

area (like the title or any
buttons on the right) are
determined by the MVC
currently showing (in this case,
the “All Settings” MVC)
Each MVC communicates these
contents via its
UIViewController’s
navigationItem property

CS193p

Spring 2016
 UINavigationController
Pushes and pops MVCs off of a stack (like a stack of cards) …

CS193p

Spring 2016
 UINavigationController
Pushes and pops MVCs off of a stack (like a stack of cards) …

A “General Settings” MVC

It’s possible to add MVC-

specific buttons here too via
the UIViewController’s
toolbarItems property

CS193p

Spring 2016
 UINavigationController
Pushes and pops MVCs off of a stack (like a stack of cards) …

Notice this “back" button has

appeared. This is placed here
automatically by the A “General Settings” MVC
UINavigationController.

CS193p

Spring 2016
 UINavigationController
Pushes and pops MVCs off of a stack (like a stack of cards) …

CS193p

Spring 2016
 UINavigationController
Pushes and pops MVCs off of a stack (like a stack of cards) …

An “Accessibility” MVC

CS193p

Spring 2016
 UINavigationController
Pushes and pops MVCs off of a stack (like a stack of cards) …

CS193p

Spring 2016
 UINavigationController
Pushes and pops MVCs off of a stack (like a stack of cards) …

A “Larger Text” MVC

CS193p

Spring 2016
 UINavigationController
Pushes and pops MVCs off of a stack (like a stack of cards) …

CS193p

Spring 2016
 UINavigationController
Pushes and pops MVCs off of a stack (like a stack of cards) …

CS193p

Spring 2016
 UINavigationController
Pushes and pops MVCs off of a stack (like a stack of cards) …

CS193p

Spring 2016
 UINavigationController
Pushes and pops MVCs off of a stack (like a stack of cards) …

CS193p

Spring 2016
 UINavigationController
Pushes and pops MVCs off of a stack (like a stack of cards) …

CS193p

Spring 2016
 UINavigationController
Pushes and pops MVCs off of a stack (like a stack of cards) …

CS193p

Spring 2016
 UINavigationController

I want more features, but it doesn’t make

sense to put them all in one MVC!
CS193p

Spring 2016
UINavigationController

So I create a new MVC to

encapsulate that functionality.
CS193p

Spring 2016
UINavigationController

We can use a UINavigationController

to let them share the screen.

CS193p

Spring 2016
 UINavigationController
The UINavigationController is a
UINavigationController
Controller whose View looks like this.

CS193p

Spring 2016
 UINavigationController
UINavigationController

ro
ot
Vi
ew
Co
nt
ro But it’s special because we can set its
ll
er rootViewController outlet to another MVC ...

CS193p

Spring 2016
UINavigationController
... and it will embed that MVC’s
UINavigationController
View inside its own View.

CS193p

Spring 2016
UINavigationController
UINavigationController

Then a UI element in this View (e.g. a UIButton) can segue to the other
MVC and its View will now appear in the UINavigationController instead.
CS193p

Spring 2016
UINavigationController
UINavigationController

We call this kind of segue a

“Show (push) segue”.

CS193p

Spring 2016
UINavigationController
UINavigationController

Notice this Back button

automatically appears.

CS193p

Spring 2016
UINavigationController
UINavigationController

When we click it, we’ll

go back to the first MVC.

CS193p

Spring 2016
UINavigationController
UINavigationController

Notice that after we back out of an MVC,

it disappears (it is deallocated from the heap, in fact).

CS193p

Spring 2016
UINavigationController
UINavigationController

CS193p

Spring 2016
 Accessing the sub-MVCs
You can get the sub-MVCs via the viewControllers property
var viewControllers: [UIViewController]? { get set } // can be optional (e.g. for tab bar)
// for a tab bar, they are in order, left to right, in the array
// for a split view, [0] is the master and [1] is the detail
// for a navigation controller, [0] is the root and the rest are in order on the stack
// even though this is settable, usually setting happens via storyboard, segues, or other
// for example, navigation controller’s push and pop methods

But how do you get ahold of the SVC, TBC or NC itself?

Every UIViewController knows the Split View, Tab Bar or Navigation Controller it is currently in
These are UIViewController properties …
var tabBarController: UITabBarController? { get }
var splitViewController: UISplitViewController? { get }
var navigationController: UINavigationController? { get }
So, for example, to get the detail of the split view controller you are in …
if let detailVC: UIViewController = splitViewController?.viewControllers[1] { … }
CS193p

Spring 2016
 Wiring up MVCs
How do we wire all this stuff up?
Let’s say we have a Calculator MVC and a Calculator Graphing MVC
How do we hook them up to be the two sides of a Split View?

Just drag out a (and delete all the extra VCs it brings with it)

Then ctrl-drag from the UISplitViewController to the master and detail MVCs …

CS193p

Spring 2016
Wiring up MVCs

CS193p

Spring 2016
Wiring up MVCs

CS193p

Spring 2016
Wiring up MVCs

CS193p

Spring 2016
Wiring up MVCs

CS193p

Spring 2016
Wiring up MVCs

CS193p

Spring 2016
 Wiring up MVCs
But split view can only do its thing properly on iPad
So we need to put some Navigation Controllers in there so it will work on iPhone
The Navigation Controllers will be good for iPad too because the MVCs will get titles
The simplest way to wrap a Navigation Controller around an MVC is with Editor->Embed In

This MVC is selected

CS193p

Spring 2016
 Wiring up MVCs
But split view can only do its thing properly on iPad
So we need to put some Navigation Controllers in there so it will work on iPhone
The Navigation Controllers will be good for iPad too because the MVCs will get titles
The simplest way to wrap a Navigation Controller around an MVC is with Editor->Embed In

Now that MVC is part of

the View of this UINavigationController

(it’s the rootViewController)

And the UINavigationController is part of

the View of this UISplitViewController

(it’s the Master, viewControllers[0])

CS193p

Spring 2016
 Wiring up MVCs
But split view can only do its thing properly on iPad
So we need to put some Navigation Controllers in there so it will work on iPhone
The Navigation Controllers will be good for iPad too because the MVCs will get titles
The simplest way to wrap a Navigation Controller around an MVC is with Editor->Embed In

You can put this MVC in a UINavigationController too

(to give it a title, for example),

but be careful because the Detail of the UISplitViewController

would now be a UINavigationController

(so you’d have to get the UINavigationController’s rootViewController

if you wanted to talk to the graphing MVC inside)

CS193p

Spring 2016
 Wiring up MVCs
But split view can only do its thing properly on iPad
So we need to put some Navigation Controllers in there so it will work on iPhone
The Navigation Controllers will be good for iPad too because the MVCs will get titles
The simplest way to wrap a Navigation Controller around an MVC is with Editor->Embed In

CS193p

Spring 2016