EEC-492/693/793 iPhone Application Development

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

2. Outline Views Multiview applications Assignments: Build the View Switcher app Continue building the calculator app 1/2/2020 2 EEC492/693/793 - iPhone Application Development EEC492/693/793 - iPhone Application Development

3. 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 EEC492/693/793 - iPhone Application Development

4. 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 EEC492/693/793 - iPhone Application Development

5. 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; EEC492/693/793 - iPhone Application Development

6. 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 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 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 EEC492/693/793 - iPhone Application Development

9. Multiview Applications 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) 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 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 You should #import a class or formal protocol if you inherit from it 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 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 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 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] initWithNibName:@"BlueView" bundle:nil]; // link with the nib file self.blueViewController = blueController; [self.view insertSubview:blueController.view atIndex:0]; //behind everything [blueController release]; [super viewDidLoad]; } 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] initWithNibName:@"YellowView" bundle:nil]; self.yellowViewController = yellowController; [yellowController release]; } [blueViewController.view removeFromSuperview]; [self.view insertSubview:yellowViewController.view atIndex:0]; } else { … // for blueViewController } } 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 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 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 beginAnimations:@"View 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 } 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 } EEC492/693/793 - iPhone Application Development