1. EEC-492/693/793 iPhone Application Development
Lecture 8
Wenbing Zhao & Nigamanth Sridhar
11/15/2018
EEC492/693/793 - iPhone Application Development

2. Outline Views Multiview applications Assignments:
Build the View Switcher app
Continue building the calculator app
Objective-C part is shamelessly taken from Stanford CS193P winter 2010 lecture 3
11/15/2018
11/15/2018
EEC492/693/793 - iPhone Application Development
EEC492/693/793 - iPhone Application Development 2

3. EEC492/693/793 - iPhone Application Development
Views
UIButton, UILabel, UITextField, etc. are all subclasses of UIView
Content View: a UIView object that has a corresponding view controller
Because it is the primary container for the content of an app
Typically, when we use the term “view”, we are referring to content views
11/15/2018
EEC492/693/793 - iPhone Application Development

4. EEC492/693/793 - iPhone Application Development
View Hierarchy
Views are hierarchical
Each view has only one superview (or none) – (UIView *) superview
Can have many (or zero) subviews: - (NSArray) subviews
Subview order matters: those later in the array are on top of earlier
UIWindow
The UIView at the top of the view hierarchy
Only have one UIWindow in an iPhone app
Root view
First view added to UIWindow
Its view controller is referred to as the root view controller
Autorotation for the entire app is controlled by the root view controller
11/15/2018
EEC492/693/793 - iPhone Application Development

5. EEC492/693/793 - iPhone Application Development
View Hierarchy
Hierarchy often constructed in Interface Builder
How to do it in code?
- (void)addSubview:(UIView *)aView;
- (void)removeFromSuperview;
How to manage the “order” of subviews
- (void)insertSubview:(UIView *)sv atIndex:(int)index;
- (void)insertSubview:(UIView *)sv belowSubview:(UIView *)otherView;
- (void)insertSubview:(UIView *)sv aboveSubview:(UIView *)otherView;
11/15/2018
EEC492/693/793 - iPhone Application Development

6. EEC492/693/793 - iPhone Application Development
Transparency of Views
What happens when views overlap?
Order of subviews list determines who’s in front, but lower ones can “show through” transparent views on top of them
You can set the transparency level in IB
Default is fully opaque
If you want to hide a view completely, you can just set the hidden property to YES
No need to remove the view from the hierarchy to hide it
11/15/2018
EEC492/693/793 - iPhone Application Development

7. View Memory Management
Superviews retain their subviews
Once you put a view into the hierarchy you can release your ownership if you want
Note that we retain IBOutlet variables
But we don’t really need to as long as they are always in the hierarchy
It’s more of a convention to retain them
But be careful!
If you remove a view from the view hierarchy it may deallocate immediately (no autorelease happens). So, retain it first, then call removeFromSuperview
11/15/2018
EEC492/693/793 - iPhone Application Development

8. Multiview Applications
Simple multiview apps: the click of a button brings up a different view
Example app: the Stock app
Tab bar based multiview apps
A row of buttons (i.e., tab bar) at the bottom of the screen
Tapping one of the buttons causes a new view to be shown (and a new controller to become active)
Example app: The Phone/Facetime app
Navigation based multiview apps
Use a navigation controller to present hierarchical info to the user
Example app: the Mail app
11/15/2018
EEC492/693/793 - iPhone Application Development

9. Multiview Applications
11/15/2018
EEC492/693/793 - iPhone Application Development

10. Building a Simple Multiview App
The view switcher app
It switches between two different views with the click of a button (residing in a toolbar)
11/15/2018
EEC492/693/793 - iPhone Application Development

11. Creating the View Switcher Project
Create a new project. This time, choose Window-based Application
Create a custom view controller (and nib files)
Choose Menu->New File, and select UIViewController subclass template
Give the file the name SwitchViewController.m
Make sure “Also create SwitchViewController.h” is checked before clicking the Finish botton
Repeat the steps to create two more custom view controllers: YellowViewController and BlueViewController
Create two nib files YellowView.xib and BlueView.xib
Menu->New File->User Interfaces->View XIB template
11/15/2018
EEC492/693/793 - iPhone Application Development

12. Modifying the App Delegate: SwitcherAppDelegate.h
#import <UIKit/UIKit.h>
@class SwitchViewController; // forward declaration
@interface View_SwitcherAppDelegate : NSObject <UIApplicationDelegate> {
UIWindow *window;
SwitchViewController *switchViewController; }
@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain) IBOutlet SwitchViewController
*switchViewController;
@end
directive minimizes the amount of code seen by the compiler and linker, and is therefore the simplest way to give a forward declaration of a class name. Being simple, it avoids potential problems that may come with importing files that import still other files. For example, if one class declares a statically typed instance variable of another class, and their two interface files import each other, neither class may compile correctly.
You should #import a class or formal protocol if you inherit from it
11/15/2018
EEC492/693/793 - iPhone Application Development

13. Modifying the App Delegate: SwitcherAppDelegate.m
#import "View_SwitcherAppDelegate.h"
#import "SwitchViewController.h“ // must #import it here
@implementation View_SwitcherAppDelegate
@synthesize window;
@synthesize switchViewController;
- (void)applicationDidFinishLaunching:(UIApplication *)application {
// Override point for customization after application launch
[window addSubview:switchViewController.view];
[window makeKeyAndVisible]; }
- (void)dealloc {
[window release];
[switchViewController release];
[super dealloc];
@end
11/15/2018
EEC492/693/793 - iPhone Application Development

14. Modifying SwitchViewController.h
#import <UIKit/UIKit.h>
@class BlueViewController;
@class YellowViewController;
@interface SwitchViewController : UIViewController {
YellowViewController *yellowViewController;
BlueViewController *blueViewController; }
@property (retain, nonatomic) YellowViewController *yellowViewController;
@property (retain, nonatomic) BlueViewController *blueViewController;
-(IBAction)switchViews:(id)sender;
@end
11/15/2018
EEC492/693/793 - iPhone Application Development

15. Modifying MainWindow.xib
Double-click MainWindow.xib to open it in IB
From the library, drag a View Controller to the nib’s main window
Single-click the newly added View Controller icon, and launch the identity inspector
Change class to SwitchViewController
Build the root controller’s view
Drag a View from the library
Drag a toolbar from the library. Double click the button in the toolbar and change its title to Switch Views
Connect the Switch View button to the switchView: action
Single click the button, wait for a second, then single-click at again to select the Switch View button
Control drag the button to the SwitchViewController icon, select the switchViews: action
11/15/2018
EEC492/693/793 - iPhone Application Development

16. Writing SwitchViewController.m
#import "SwitchViewController.h"
#import "BlueViewController.h"
#import "YellowViewController.h"
@implementation SwitchViewController
@synthesize yellowViewController;
@synthesize blueViewController;
// We override viewDidLoad to create an instance of BlueViewController
- (void)viewDidLoad {
BlueViewController *blueController = [[BlueViewController alloc]
bundle:nil]; // link with the nib file
self.blueViewController = blueController;
[self.view insertSubview:blueController.view atIndex:0]; //behind everything
[blueController release];
[super viewDidLoad]; }
Lazy loading: load YelloView only when needed
11/15/2018
EEC492/693/793 - iPhone Application Development

17. Writing SwitchViewController.m
- (IBAction)switchViews:(id)sender
{ // YellowView not in hierarchy
if (self.yellowViewController.view.superview == nil) {
if (self.yellowViewController == nil) // yellow view controller not created yet
YellowViewController *yellowController =
[[YellowViewController alloc]
bundle:nil];
self.yellowViewController = yellowController;
[yellowController release]; }
[blueViewController.view removeFromSuperview];
[self.view insertSubview:yellowViewController.view atIndex:0];
} else {
… // for blueViewController
11/15/2018
EEC492/693/793 - iPhone Application Development

18. Writing SwitchViewController.m
// Release whichever view is not being shown to free up its memory
- (void)didReceiveMemoryWarning {
// Releases the view if it doesn't have a superview
[super didReceiveMemoryWarning];
// Release anything that's not essential, such as cached data
if (self.blueViewController.view.superview == nil)
self.blueViewController = nil;
else
self.yellowViewController = nil; }
- (void)dealloc {
[yellowViewController release];
[blueViewController release];
[super dealloc];
@end
11/15/2018
EEC492/693/793 - iPhone Application Development

19. Implementing the Content Views
For each view
Add an IBAction blueButtonPressed/yellowButtonPressed
Single-click the View icon, and bring up the attribute inspector
Set the Background color of the view
Change the size of the view: select Toolbar as the Bottom Bar
Drag a Round Rect Button to the View window, add title, and connect to the action (use Touch Up Inside event)
Connect the view outlet (inherited from the parent class)
Control-drag from File’s Owner icon to the View icon, and select the view outlet
Save the nib!
Add the action implementation to the view controller files
11/15/2018
EEC492/693/793 - iPhone Application Development

20. Animating the Transition
New version of switchViews: for fancier view transition
- (IBAction)switchViews:(id)sender {
// Start the animation block
[UIView Flip" context:nil];
// animation duration 1.25 seconds
[UIView setAnimationDuration:1.25];
// set the animation curve: slow speed at the beginning and
// end of transition, but faster in the middle (default is constant speed)
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
if (self.yellowViewController.view.superview == nil)
if (self.yellowViewController == nil)
{… // same as before, i.e., create view controller if needed }
beginAnimations:context: takes two parameters. The first is an animation block title.
This title comes into play only if you take more direct advantage of Core Animation, the
framework behind this animation. For our purposes, we could have used nil. The second
parameter is a (void *) that allows you to specify an object whose pointer you’d like associated
with this animation block. We used nil here, since we don’t have any need to do that.
11/15/2018
EEC492/693/793 - iPhone Application Development

21. Animating the Transition…
// specify what transition to use
// (left flip for one, right flip for another)
// cache speeds up drawing
[UIView setAnimationTransition: UIViewAnimationTransitionFlipFromRight
forView:self.view cache:YES];
// specify which view to show and which one to hide
[blueViewController viewWillAppear:YES];
[yellowViewController viewWillDisappear:YES];
[blueViewController.view removeFromSuperview]; //same as before
[self.view insertSubview:yellowViewController.view atIndex:0]; // same as before
// for better maintainability, even though they do nothing for now
[yellowViewController viewDidDisappear:YES];
[blueViewController viewDidAppear:YES];
} else { // similar code for blueView }
[UIView commitAnimations]; // end of the animation block }
UIViewAnimationTransitionFlipFromLeft
UIViewAnimationTransitionFlipFromRight
UIViewAnimationTransitionCurlUp
UIViewAnimationTransitionCurlDown
11/15/2018
EEC492/693/793 - iPhone Application Development