1.
In This Deck
This deck is shared with you under a Creative Commons license.
Views
UIView
UIVisualEffectView
UIScrollView
View Controllers
UIViewController
UITableViewController (+ UITableView + UITableViewCell)
UICollectionViewController (+ UICollectionView +
UICollectionViewCell)
Coordinating View Controllers
UINavigationController (+ UINavigationBar)
UITabBarController (+ UITabBar + UITabBarItem)
UISplitViewController
UIStoryboardSegue
Content Views
UIImageView
MKMapView
UIWebView
Indicator Views
UIActivityIndicatorView
UIProgressView
UIPageControl
Other Topics
UIGestureRecognizer
Core Graphics & Core Animation
Controls
UIButton
UISwitch
UISegmentedControl
UIStepper
UISlider
UIPickerView / UIDatePicker
UIToolbar (+ UIBarButtonItem)
Text Entry
UITextField
UITextView
Modal Dialogues
UIAlertController

2.
Views
UIView • UIVisualEffectView • UIScrollView

3.
Views
UIView
UIView : UIResponder : NSObject
https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIView_Class/
A view defines a rectangular area on the screen and
the interfaces for managing the content in that area.
They are the main way your application interacts
with the user:
● Responsibilities include drawing, animation, layout and
subview management, and event handling
● Views embedded inside another view are subviews.
Views that contain embedded subviews are
superviews to those subviews.
● A view’s size and position are defined by its frame,
bounds, center, and origin
● The frame completely surrounds the bounds
view.frame =
CGRectMake(50.0,
100.0, 200.0, 100.0);
view.origin =
CGPointMake(50.0,
100.0);
view.bounds =
CGRectMake(0.0, 0.0,
200.0, 100.0);
card.frame
card.bounds

4.
Views
UIVisualEffectView
UIVisualEffectView : UIView : UIResponder : NSObject
https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIVisualEffectView/
A visual effect view is a view that allows for dynamic
blurring of the content it obstructs in addition to
adding vibrancy so that content in the visual effect
view appears more vivid:
● Used widely throughout iOS 7
● Available for developer use in iOS 8.0 and later
● Maintains visual hierarchy of user interface elements
● Used with UIBlurEffect and UIVibrancyEffect
classes to create effect
UIVisualEffectView

5.
Views
UIScrollView
UIScrollView : UIView : UIResponder : NSObject
https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIScrollView_Class/
A scroll view is an interface that allows for the display
of content potentially larger than the view itself:
● Users scroll by making swipe gestures to move content
● Users zoom by pinching content in and out
● frame operates like UIView, but bounds determine size
and offset of scroll view’s content
● Patented rubber-banding effect indicates that the user
has reached the end of content
● Scroll views can scroll continuously or be paginated in
multiples of the scroll view’s frame.size
There are two UIScrollView
and one UITableView on the
iOS lock screen when 1
notification is present!
UIScrollView
UITableView

6.
View Controllers
UIViewController • UITableViewController (+ UITableView + UITableViewCell)

7.
UIViewController : UIResponder : NSObject
View Controllers
UIViewController
https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIViewController_Class/
A view controller manages a set of views that make
up a portion of your app’s user interface:
● Resizes and lays out its views
● Adjusts the contents of the views
● Acts on behalf of the views when the user interacts
with them
● Tightly bound to the views it manages and takes part in
the responder chain used to handle events
● Often used with other view controllers, each of which
owns a portion of your app’s user interface
Status Bar
(not part of
view
controller)
Is Initial
View
Controller
self.view
Outlet to
view
controller
class

8.
UITableViewController : UIViewController :
UIResponder : NSObject
View Controllers
UITableViewController
https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITableViewController_Class/
A table view controller manages a table view that
displays data using reusable table view cells:
● UITableView is a vertically-scrolling scroll view with two
delegates: datasource <UITableViewDataSource> and
delegate <UITableViewDelegate>
● Only a necessary number of table view cell instances
are kept in memory—as soon as a cell scrolls out of
view, it is no longer retained or else it is reused
● Table views can have multiple sections, each with their
own header and footer
● Cells can be added, selected, rearranged, and deleted
with the proper method implementations
Section
Headers
UITableViewCel
l
Separator
UITableView

9.
UICollectionViewController : UIViewController :
UIResponder : NSObject
View Controllers
UITableViewController
https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITableViewController_Class/
A collection view controller manages a view that
displays data using reusable stackable cells:
● UICollectionView has two delegates: datasource
<UICollectionViewDataSource> and delegate
<UICollectionViewDelegate>
● Only a necessary number of collection view cell
instances are kept in memory—as soon as a cell scrolls
out of view, it is no longer retained or else it is reused
● Collection views can have multiple sections, each with
their own header and footer
● Cells can be added, selected, rearranged, and deleted
with the proper method implementations
UICollectionView
UICollectionViewCell

10.
Coordinating View Controllers
UINavigationController (+ UINavigationBar) • UITabBarController (+ UITabBar + UITabBarItem)
UISplitViewController • UIStoryboardSegue

11.
UINavigationController : UIViewController :
UIResponder : NSObject
Coordinating View Controllers
UINavigationController
https://developer.apple.com/library/ios/documentation/UIKit/Reference/UINavigationController_Class/
A navigation controller manages the navigation of
hierarchical content (i.s., other view controllers):
● Presents navigation bar with title, bar button items,
and back button to previous view controller
● Child view controllers are held in self.
viewControllers
● Navigation controller pushes child view controllers to
present them and pops them when navigating back to
parent view controller
● Can also navigate back to parent view controller by
swiping from left edge of view
Navigation Bar
Root View
Controller
Segue

12.
UITabBarController : UIViewController : UIResponder
: NSObject
Coordinating View Controllers
UITabBarController
https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITabBarController_Class/
A tab bar controller displays tabs at the bottom of
the window for selecting between the different
modes and for displaying the views for that mode:
● Generally a top-level view controller – sits above
navigation controllers
● Up to five items can be shown in the tab bar – if more
than five items, the fifth item becomes “More”
● Each tab bar item connects to a child view controller
● Each tab bar item is of class UITabBarItem
Tab Bar

13.
UISplitViewController : UIViewController :
UIResponder : NSObject
Coordinating View Controllers
UISplitViewController
https://developer.apple.com/library/ios/documentation/UIKit/Reference/UISplitViewController_Class/
A split view controller controller displays a master-
detail interface where changes in the primary view
controller drive changes in the secondary view
controller:
● Prior to iOS 8, split view controller was only available
on iPad
● Is typically the root view controller of your app’s
window, even above tab bar controllers
● When horizontal width is compact (e.g., iPhone
portrait), generally acts like a navigation controller
Master View
Controller
Detail View
Controller

14.
UIStoryboardSegue : NSObject
Coordinating View Controllers
UIStoryboardSegue
https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIStoryboardSegue_Class/
A segue is responsible for performing the visual
transition between two view controllers:
● Also contains information about the view controllers
involved in the segue
● Five types: Show, Modal, Popover, Replace, & Custom
● Segues are usually defined in Interface Builder (i.e.,
Storyboard), but you can also initiate segues
programmatically using -[UIViewController
performSegueWithIdentifier:sender:]
● Performing segue also triggers -[UIViewController
prepareForSegue:sender:] before performing segue
Segue

15.
Coordinating View Controllers
UIStoryboardSegue
Modal
Cover Vertical • Flip Horizontal
Cross Dissolve • Page Curl
Popover
Used on iPad
Show
Used within navigation
controllers
Custom
Requires custom
implementation in code

16.
Controls
UIButton • UISwitch • UISegmentedControl • UIStepper • UISlider
UIPickerView / UIDatePicker • UIToolbar (+ UIBarButtonItem)

17.
Controls
UIButton
UIButton : UIControl : UIView : UIResponder :
NSObject
https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIButton_Class/
A button intercepts touch events and sends an
action message to a target object when tapped, e.g.:
● UIControlEventTouchUpInside: A touch-up event in the control
where the finger is inside the bounds of the control.
● UIControlEventTouchDown: A touch-down event in the control
● UIControlEventTouchDownRepeat: A repeated touch-down event
in the control; for this event the value of the UITouch tapCount
method is greater than one.
● UIControlEventAllTouchEvents: All touch events.
● UIControlEventAllEvents: All events, including system events.
continued...
UIButton with colored
titleLabel
UIButton with border
UIButton without
border

18.
Controls
UIButton
UIButton : UIControl : UIView : UIResponder :
NSObject
https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIControl_Class/
● UIControlEventTouchDragEnter: An event where a finger is
dragged into the bounds of the control.
● UIControlEventTouchDragInside: An event where a finger is
dragged inside the bounds of the control.
● UIControlEventTouchDragOutside: An event where a finger is
dragged just outside the bounds of the control.
● UIControlEventTouchDragExit: An event where a finger is
dragged from within a control to outside its bounds.
● UIControlEventTouchCancel: A system event canceling the
current touches for the control.
A full list is available within the documentation for
UIControl.
UIButton with colored
titleLabel
UIButton with border
UIButton without
border

19.
Controls
UISwitch
UISwitch : UIControl : UIView : UIResponder :
NSObject
https://developer.apple.com/library/ios/documentation/UIKit/Reference/UISwitch_Class/
A switch is a control designed for setting bool values
to YES or NO:
● Generates UIControlEventValueChanged notification
when switched on or off
● Can set tintColor, thumbTintColor, and onTintColor
for added customization
UISwitch

20.
Controls
UISegmentedControl
UISegmentedControl : UIControl : UIView :
UIResponder : NSObject
https://developer.apple.com/library/ios/documentation/UIKit/Reference/UISegmentedControl_Class/
A segmented control is a horizontal control that
allows the user to select from one of multiple
discrete related states:
● Each segmented control can display an NSString or a
UIImage
● Changing values triggers
UIControlEventValueChanged event
● Used within a view controller (i.e., should not trigger a
segue or change in view controller)
UISegmentedControl
Selected segment

21.
Controls
UIStepper
UIStepper : UIControl : UIView : UIResponder :
NSObject
https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIStepper_Class/
A stepper is used for incrementing and
decrementing a value at a predetermined step size:
● Has properties value, minimumValue, maximumValue,
and stepValue
● Can set autorepeat, i.e., whether holding stepper
repeatedly increments or decrements value
● Can set continuous, i.e., whether value change is sent
immediately or when user interaction ends
● Can set wraps, i.e., whether incrementing beyond
maximum or decrementing below minimum resets
value to minimum or maximum
Food for Thought: Does UIStepper violate MVC architecture?

22.
Controls
UISlider
UISlider : UIControl : UIView : UIResponder :
NSObject
https://developer.apple.com/library/ios/documentation/UIKit/Reference/UISlider_Class/
A slider is a visual control used to select a single
value from a continuous range of values:
● Always displayed horizontally in iOS
● The thumb rides along the track
● Can set custom icons for minimumValueImage and
maximumValueImage
● Like UISlider, can set value, minimumValue,
maximumValue, and continuous
● Unlike UISlider, no stepValue or wraps

23.
Controls
UIPickerView
UIPickerView : UIView : UIResponder : NSObject
https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIPickerView_Class/
A picker view uses a slot machine metaphor for
setting one or more sets of values so that the
desired values align with a selection indicator:
● Picker view consists of components and rows
● Each component can have a different number of rows
● Items for rows can be strings or view objects (e.g.,
UILabel, UIImage)
● Has datasource <UIPickerViewDataSource> and
delegate <UIPickerViewDelegate>
UIPickerView

24.
Controls
UIDatePicker
UIDatePicker : UIControl : UIView : UIResponder :
NSObject
https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIDatePicker_Class/
A date picker provides multiple rotating wheels to
select values for dates and times:
● Does not inherit from UIPickerView; instead, manages
a custom UIPickerView as a subview
● Sends event UIControlEventValueChanged each time
user finishes rotating a wheel
● Can set calendar, locale, and timeZone for correct
internationalization per device settings
● Date value stored in NSDate property date
● Can set datePickerMode to UIDatePickerMode value
UIDatePicker

25.
Controls
UIToolbar
UIToolbar : UIView : UIResponder : NSObject
https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIToolbar_Class/
A toolbar displays one or more buttons, called
toolbar items (UIBarButtonItem):
● Buttons should be actions, not toggles
● Toolbars can be customized by setting barStyle,
barTintColor, tintColor, and translucent and/or
implementing background and shadow images
● Has delegate <UIToolbarDelegate> that follows
<UIBarPositioningDelegate> protocol
UIToolbar
UIBarButtonItem

26.
Text Entry
UITextField • UITextView

27.
Text Entry
UITextField
UITextField : UIControl : UIView : UIResponder :
NSObject
https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextField_Class/
A text field displays editable text and is used to
gather small amounts of text from the user:
● Has property delegate <UITextFieldDelegate> to
handle user events
● Can set text by setting text or attributedText
properties
● Can set placeholder, font, textColor, textAlignment,
borderStyle, background, etc.
● Tapping automatically brings up keyboard
● To dismiss keyboard, call resignFirstResponder

28.
Text Entry
UITextView
UITextView : UIScrollView : UIView : UIResponder :
NSObject
https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextView_Class/
A text view is a scrollable, multiline text region that
also supports text editing, typically used to display
multiple lines of text:
● Has property delegate <UITextViewDelegate> to
handle user events
● Can set text by setting text or attributedText
properties
● Can set font, textColor, textAlignment, borderStyle,
etc.
● Tapping automatically brings up keyboard
● To dismiss keyboard, call resignFirstResponder
UITextView

29.
Modal Dialogues
UIAlertController

30.
Modal Dialogues
UIAlertController
UIAlertController : UIViewController : UIResponder :
NSObject
https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIAlertController_Class/
An alert controller displays an alert message to the
user:
● Replaces both UIAlertView and UIActionSheet in iOS
8 and above
● Does not support subclassing!
● Alert itself has title, message, and preferredStyle
(either UIAlertControllerStyleAlert or
UIAlertControllerStyleActionSheet)
● Actions added using UIAlertAction class
● Shown using -[presentViewController:animated:
completion:]

31.
Content Views
UIImageView • MKMapView • UIWebView

32.
Content Views
UIImageView
UIImageView : UIView : UIResponder : NSObject
https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIImageView_Class/
An image view is a view-based container for
displaying either a single image or for animating a
series of images:
● Can set single UIImage to image or array of UIImage
objects to animationImages
● If both image and animationImages are set,
animationImages takes precedence
● Be sure to include image.png, image@2x.png, and
image@3x.png files in Xcode to support non-Retina,
Retina, and Retina HD screen resolutions
UIImageView

33.
Content Views
MKMapView
MKMapView : UIView : UIResponder : NSObject
https://developer.apple.com/library/ios/documentation/MapKit/Reference/MKMapView_Class/
A map view is an embeddable map interface similar
to the one provided by the Maps application:
● Used as-is using whatever Maps provider is defined by
the system (i.e., Google Maps for iOS 5.1 and earlier;
Apple Maps for iOS 6 and later)
● Has delegate <MKMapViewDelegate>
● Can set region, scrollEnabled, zoomEnabled,
pitchEnabled
● Can set MKAnnotation with reusable
MKAnnotationView to add pins to map
● Can use MKOverlay to add overlay to map
Full screen
MKMapView
UIView provided by
MKMapViewDelegate via -
[mapView:viewForAnnotation:]
MKAnnotationView
MKOverlay for traffic

34.
Content Views
UIWebView
UIWebView : UIView : UIResponder : NSObject
https://developer.apple.com/library/ios/documentation/MapKit/Reference/UIWebView_Class/
A web view is used to embed web content:
● Has delegate <UIWebViewDelegate> to perform
methods as web view is about to, starts to, finishes,
and fails to load
● Can perform standard methods for displaying and
managing web sites (e.g., stopLoading, reload,
goForward, goBack)
● Send NSURLRequest via loadRequest: to open web
page
● Visually indistinguishable from UIView
● Currently accessory views need to be made manually
(e.g., toolbar, buttons, URL bar)
UIWebView

35.
Indicator Views
UIActivityIndicatorView • UIProgressView • UIPageControl

36.
Indicator Views
UIActivityIndicatorView
UIActivityIndicatorView : UIView : UIResponder :
NSObject
https://developer.apple.com/library/ios/documentation/MapKit/Reference/UIActivityIndicatorView_Class/
An activity indicator shows that a task is in progress
and appears as a “gear” that is either spinning or
stopped:
● Only customization options are color (iOS 5.0 and
later) and activityIndicatorViewStyle (either
UIActivityIndicatorViewStyleGray,
UIActivityIndicatorViewStyleWhite, or
UIActivityIndicatorViewStyleWhiteLarge)
● Start and stop animating by calling startAnimating
and stopAnimating
● Best used when the length of time is uncertain or
indeterminate and cannot be predicted
UIActivityIndicatorView

37.
Indicator Views
UIProgressView
UIProgressView : UIView : UIResponder : NSObject
https://developer.apple.com/library/ios/documentation/MapKit/Reference/UIProgressView_Class/
A progress view visualizes the completion of a task
over time:
● Used when the length of time or task length is known
ahead of time
● Set progress using method setProgress:animated: as
a float between 0.0 and 1.0
● Customizations include trackTintColor, trackImage,
progressTintColor, progressImage, and
progressViewStyle
UIProgressView
(yes, it’s there, I swear!)

38.
Indicator Views
UIPageControl
UIPageControl : UIControl : UIView : UIResponder :
NSObject
https://developer.apple.com/library/ios/documentation/MapKit/Reference/UIPageControl_Class/
A page control displays a horizontal series of dots,
each of which corresponds to a single page or item:
● While UIPageControl is itself a control that you can tap
on to change pages, most users will change pages
using other methods (e.g., swiping on content)
● Can set hidesForSinglePage to YES if you want
UIPageControl not to be visible if only 1 page
● Can set pageIndicatorTintColor and
currentPageIndicatorTintColor
● Generally positioned below paginated content
● Custom dots require custom UIPageControl subclass
Paginated content
UIPageControl

39.
Other Topics
UIGestureRecognizer • Core Graphics & Core Animation

40.
Other Topics
UIGestureRecognizer
A gesture recognizer is used to recognize a touch
event:
● Decouples recognition logic from action logic
● Multiple gesture recognizers can be applied to the
same view; however, be aware of how doing so will
affect the user experience
○ E.g., if a view has both a tap gesture recognizer
and a long press gesture recognizer, how do you
distinguish the two? Should the tap gesture be
laggy? Or should the long press gesture be
delayed?
● Be careful of incomplete gestures
UIGestureRecognizer : NSObject
https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIGestureRecognizer_Class/
Fast Company © 2012

41.
Other Topics
Core Graphics & Core Animation
https://developer.apple.
com/library/mac/documentation/GraphicsImaging/Conceptual/drawingwithquartz2d/Introduction/Introducti
on.html
The Core Graphics framework allows you to create
your own custom graphics programmatically.
● E.g., Draw polygons, gradients, and lines
● Apply transforms to UIView
● Using Core Graphics instead of image files can make
your app faster and leaner
The Core Animation framework allows you to create
your own custom animations programmatically:
● An animation is defined by its start state, its end state,
how long it takes to transition, and how it transitions

42.
Example
Clock
Take a look at your favorite app!
How was it built?
How many user interface elements can you identify?