UIWebView displays web content by loading URLs or HTML data. It functions similarly to a standard web browser view but with limited external controls. The UIWebView delegate receives callbacks as web content loads, renders, or encounters errors. Developers can programmatically control loading, navigation, and interactions within the embedded web content area.
4. 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
5. 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
6. 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
8. 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
9. 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
10. 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
12. 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
13. 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
14. 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
15. 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
18. 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
19. 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
20. 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
21. 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
22. 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?
23. 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
24. 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
25. 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
26. 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
28. 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
29. 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
31. 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:]
33. 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
34. 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
35. 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
37. 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
38. 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!)
39. 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
42. 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
43. Example
Clock
Take a look at your favorite app!
How was it built?
How many user interface elements can you identify?
