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

ViewsUIView • UIVisualEffectView • UIScrollView

ViewsUIView

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

ViewsUIVisualEffectView

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

ViewsUIScrollView

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

View ControllersUIViewController • UITableViewController (+ UITableView + UITableViewCell)

UIViewController : UIResponder : NSObject

View ControllersUIViewController

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

Controllerself.view

Outlet toview

controller class

UITableViewController : UIViewController : UIResponder : NSObject

View ControllersUITableViewController

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

UITableViewCell

Separator

UITableView

UICollectionViewController : UIViewController : UIResponder : NSObject

View ControllersUITableViewController

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

Coordinating View ControllersUINavigationController (+ UINavigationBar) • UITabBarController (+ UITabBar + UITabBarItem)

UISplitViewController • UIStoryboardSegue

UINavigationController : UIViewController : UIResponder : NSObject

Coordinating View ControllersUINavigationController

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

UITabBarController : UIViewController : UIResponder : NSObject

Coordinating View ControllersUITabBarController

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

UISplitViewController : UIViewController : UIResponder : NSObject

Coordinating View ControllersUISplitViewController

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

UIStoryboardSegue : NSObject

Coordinating View ControllersUIStoryboardSegue

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

Coordinating View ControllersUIStoryboardSegue

ModalCover Vertical • Flip Horizontal

Cross Dissolve • Page Curl

PopoverUsed on iPad

ShowUsed within navigation

controllers

CustomRequires custom

implementation in code

ControlsUIButton • UISwitch • UISegmentedControl • UIStepper • UISlider

UIPickerView / UIDatePicker • UIToolbar (+ UIBarButtonItem)

ControlsUIButton

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

ControlsUIButton

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

ControlsUISwitch

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

ControlsUISegmentedControl

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

ControlsUIStepper

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?

ControlsUISlider

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

ControlsUIPickerView

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

ControlsUIDatePicker

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

ControlsUIToolbar

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

Text EntryUITextField • UITextView

Text EntryUITextField

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

Text EntryUITextView

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

Modal DialoguesUIAlertController

Modal DialoguesUIAlertController

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:]

Content ViewsUIImageView • MKMapView • UIWebView

Content ViewsUIImageView

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

Content ViewsMKMapView

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

Content ViewsUIWebView

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

Indicator ViewsUIActivityIndicatorView • UIProgressView • UIPageControl

Indicator ViewsUIActivityIndicatorView

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

Indicator ViewsUIProgressView

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!)

Indicator ViewsUIPageControl

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

Other TopicsUIGestureRecognizer • Core Graphics & Core Animation

Other TopicsUIGestureRecognizer

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

Other TopicsCore 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

ExampleClock

Take a look at your favorite app!

How was it built?How many user interface elements can you identify?