Beginning iOS6 Development CH06 Multiview Applications

Multiview Applications

1iabdulrazzaq@outlook.comMobile Applications

Types of Multiview Apps

• Utility Applications

• Tab bar applications

• Navigation-based applications

• Toolbar applications

2iabdulrazzaq@outlook.comMobile Applications

Utility Applications

• A utility application focuses primarily on a single view but offers a secondview that can be used to configure the application or to provide more detail than the primary view

−The Stocks application that ships with iPhone has two views: one to display the data and another to configure the stock list

3iabdulrazzaq@outlook.comMobile Applications

Tab bar applications

• A tab bar application is a multiviewapplication that displays a row of buttons, called the tab bar, at the bottom of the screen. Tapping one of the buttons causes a new view controller to become active and a new view to be shown. such as The Phone application

4iabdulrazzaq@outlook.comMobile Applications

Navigation-based applications

• The navigation-based application features a navigation controller that uses a navigation bar to control a hierarchical series of views.

– The navigation controller keeps track of how deep you go and gives you a control to let you make your way back to the previous view.

5iabdulrazzaq@outlook.comMobile Applications

Toolbar applications

• Some applications make use of a toolbar.

• Tab bar vs. Toolbar

– A tab bar is used for selecting one and only one option from among two or more.

– A toolbar can hold buttons and certain other controls, but those items are not mutually exclusive.

6iabdulrazzaq@outlook.comMobile Applications

The Architecture of a Multiview Application

• S

7iabdulrazzaq@outlook.comMobile Applications

The Root Controller

• The root controller is the primary view controller for the application.

• It is the first controller the user sees and the controller that is loaded when the application loads.

8iabdulrazzaq@outlook.comMobile Applications

Anatomy of a Content View

• Each content view generally consists of up to three pieces:

• The view controller.

• The nib.

• Subclass of UIView.

9iabdulrazzaq@outlook.comMobile Applications

UINavigationController

• Create a new project using the Empty Application project template

10iabdulrazzaq@outlook.comMobile Applications

Creating View Controller and Nib Files

• Create a new Objective-C Class BIDSwitchViewController.– File ➤ New ➤ File, select Cocoa Touch from the left

pane, select Objective-C Class.

• 2 more and name them BIDBlueViewController & BIDYellowViewController.

• Create a nib file for each of the content views.– File ➤ New ➤ File, select User Interface from the left

pane, select View.(SwitchView.xib, BlueView.xib YellowView.xib)

11iabdulrazzaq@outlook.comMobile Applications

Modifying the App Delegate

• In BIDAppDelegate.h:

• In BIDAppDelegate.m:

12iabdulrazzaq@outlook.comMobile Applications

Modifying the App Delegate

13iabdulrazzaq@outlook.comMobile Applications

Modifying BIDSwitchViewController.h

14iabdulrazzaq@outlook.comMobile Applications

Adding a View Controller

• Change File’s Owner Class field from NSObjectto BIDSwitchViewController.

– SwitchView.xib

15iabdulrazzaq@outlook.comMobile Applications

Building a View with a Toolbar

• Drag a toolbar onto the view, rename its button title to Switch Views.

• control-drag from it over to the File’s Owner icon and select the switchViews: action.

– make sure you have the button rather than the toolbar selected.

16iabdulrazzaq@outlook.comMobile Applications

Writing the Root View Controller

• In BIDSwitchViewController.m:(Top)

• In viewDidLoad:

17iabdulrazzaq@outlook.comMobile Applications

Writing the Root View Controller

• in the switchViews: method:

18iabdulrazzaq@outlook.comMobile Applications

Writing the Root View Controller

• In didReceiveMemoryWarning method:

Mobile Applications iabdulrazzaq@outlook.com 19

Implementing the Content Views

• in BIDBlueViewController.h:

• In BIDYellowViewController.h:

Mobile Applications iabdulrazzaq@outlook.com 20

Implementing the Content Views

• Change File’s Owner Class field from NSObjectto BIDBlueViewController for BlueView.xib & to BIDYellowViewController for YellowView.xib.

• Then change the background color of both views to blue & yellow.

Mobile Applications iabdulrazzaq@outlook.com 21

Implementing the Content Views

• Then change the size of the view in the nib

Mobile Applications iabdulrazzaq@outlook.com 22

Implementing the Content Views

• Then Drag a Round Rect Button to BlueView.xib (Press Me) drag from the Touch Up Inside event to the File’s Owner icon, and connect to the blueButtonPressed action method.

• Control-drag from the File’s Owner icon to the View icon, and select the view outlet.– Do the same with YellowView.xib with changing

names.

Mobile Applications iabdulrazzaq@outlook.com 23

Implementing the Content Views

• In BIDBlueViewController.m:

Mobile Applications iabdulrazzaq@outlook.com 24

Implementing the Content Views

• In BIDYellowViewController.m:

Mobile Applications iabdulrazzaq@outlook.com 25

Animating the Transition

• In BIDSwitchViewController.m:

Mobile Applications iabdulrazzaq@outlook.com 26

Animating the Transition

Mobile Applications iabdulrazzaq@outlook.com 27

Animating the Transition

• Some iOS view transitions:

– UIViewAnimationTransitionFlipFromLeft

– UIViewAnimationTransitionFlipFromRight

– UIViewAnimationTransitionCurlUp

– UIViewAnimationTransitionCurlDown

Mobile Applications iabdulrazzaq@outlook.com 28