iPhone  Development:    Mul1ple  Views  

Jussi  Pohjolainen  Tampere  University  of  Applied  Sciences  

Mul1view  App:  U1lity  Applica1on  

•  Primarily  one  view  •  Second  view  for  seAngs  •  Example:  Stock  -­‐  applica1on  

Mul1view  App:  Tab  Bar  Applica1on  

•  Mul1view  app  that  displays  a  row  of  buIons  at  the  boIom  of  the  screen.  

•  Tapping  one  of  the  buIons  causes  new  view  to  be  ac1ve.  

•  Example:  Phone-­‐app  

Mul1view  App:    Naviga1on-­‐Based  Applica1on  

•  Hierarchical  Informa1on  to  the  user  

•  Example:  Mail-­‐app  

Terminology  of  Views  

•  BuIons,  Labels  and  other  controls  are  subclasses  of  UIView

•  View  generally  refers  to  subclass  of  UIView  that  has  corresponding  view  controller  

•  Views  with  view  controller  are  called  content  views.  

UIWindow?  

•  UIWindow:  the  path  to  the  user  •  If  you  want  something  to  be  visible  for  the  user,  you  must  use  the  UIWindow!  

•  UIView  objects  are  arranged  in  UIWindow  in  hierarchy.  

•  Parent  object  is  called  superview  –  UIWindow  •  UIView    – UIBuIon  

UIWindow  and  UIView  @interface MultiViewExampleAppDelegate : NSObject

<UIApplicationDelegate> {

UIWindow *window;

}

...

[window addSubview: someView];

UIView  

•  UIView  is  a  base  class  for  or  the  controls  – UIView  

•  UIControl  –  UIBuIon  

•  UIView  may  be  also  a  content  view,  or  canvas.  •  UIView  holds  several  controls:  –  [someUIView addSubView: someButton];

•  So  basically  we  could  have  a  UIWindow,  that  has  one  UIView  that  contains  two  UIViews  which  contains  several  controls  

Controlling  Different  Content  Views  

•  To  control  different  content  views,  you  must  have  some  kind  of  root  controller  – UIViewController  (U2lity  app)  – UITabBarController  (Tab  Bar  app)  – UINaviga1onController  (Naviga1on  app)  

•  RootController  is  responsible  of  switching  views  

•  RootController  holds  content  views  

Controller  and  Content  View  

Root  Controller  

Content  View  

Content  View  

Content  View  

Rela1onship  

Root's  view  

Gray's  view  

Rela1onship  

White's  view  

Root's  view  

Tab  Bar  Applica1on  

Root's  view  

Content  View  

•  Content  View  holds  controls  (widgets)  •  Content  View  consists  of  

1.  View  Controller  (!)  2.  The  Nib  file  

   

Controller  and  Content  View  

Root  Controller  

Content  View  

View1Controller.h  View1Controller.m   View1.xib  

Content  View  

View2Controller.h  View2Controller.m   View2.xib  

Content  View  

View3Controller.h  View3Controller.m   View3.xib  

Hierarchy  

Root  Controller  

View  Controller   UIView   UIBuIon  

View  Controller   UIView   UIBuIon  

View  Controller   UIView   UIBuIon  

UIViewController   UIViewController  Interface  Builder  

(.xib)  

Content  V

iew  

Delegate  Class  #import <UIKit/UIKit.h> #import "SwitchViewController.h" @interface MyAppDelegate : NSObject <UIApplicationDelegate> { UIWindow *window; SwitchMyViewController *switchmyviewcontroller; } @property (nonatomic, retain) IBOutlet UIWindow *window; @property (nonatomic, retain) IBOutlet SwitchMyViewController

*switchmyviewcontroller; @end

Delegate  Class  .m  - (BOOL)application:(UIApplication *)application

didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

// Override point for customization after application launch.

[window addSubview: switchmyviewcontroller.view];

[window makeKeyAndVisible];

return YES;

}

Root  Controller  // Promise we will import these classes later @class GrayViewController; @class WhiteViewController; @interface SwitchMyViewController : UIViewController { GrayViewController *grayViewController; WhiteViewController *whiteViewController; } @property (nonatomic, retain) GrayViewController *grayViewController; @property (nonatomic, retain) WhiteViewController *whiteViewController; // This method can change views. You can have for example a button // that changes the content view - (IBAction) switchViews:(id) sender; @end

Content  View's  Controller  #import <UIKit/UIKit.h> @interface WhiteViewController: UIViewController { } // Possible actions and outlets -(IBAction) grayButtonPressed:(id) sender; @end

UIViewController  -­‐>  View?  

•  Each  View  Controller  has  a  View...  –  ..where  all  the  controls,  widgets,  are  stored  

•  The  view  is  usually  implemented  in  Interface  builder  

•  So  you  should  have  – MyView1Controller.h – MyView1Controller.m – MyView1.xib

Crea1ng  Controllers  

Crea1ng  .nib  files