iOS Tutorial – Switching Views

Its been a while since our last tutorial. We’ve been rather busy developing apps. Hope this makes up for it. This is something nearly every app has.

Unless everything you wanted to do in your app is on one page, you’ll need to use either a push view or a modal view. There is a significant difference between the two.

A good example of a push view is the iPod (Music) app. When you tap on an artist, a push view slides in from the right to reveal that artist’s songs. A push view “pushes” the current view out of the way to reveal the new view. The new view usually has an arrow-shaped button in the top (navigation) bar, and the button title has the title of the page the new view pushed away.

You can find a modal view in the Weather app. When you tap the little “i” inside the circle, the view flips to review another view for adding a city. This is one of several types of modal view transitions. A modal view can also slide up, fade in, or curl up. The transition you use is up to you.

Let’s begin!

1. Create a new Navigation-based Project. (Push views require a navigation controller. Modal views do not.)

2. Name it SwitchView.

3. Click Create.

4. In the menu, click File. Hover over New, and select New File…

5. Select a UIViewController subclass and click OK.

6. Click OK again.

7. Name the file PushViewController.

8. Do steps 4 – 6 again, but this time name the file ModalViewController.

9. Your file list should now look like this.

10. Click on RootViewController.h file.

11. Type in the following code in green.

#import <UIKit/UIKit.h>
#import “PushViewController.h”
#import “ModalViewController.h”

@interface RootViewController : UIViewController

- (IBAction)openPushView;
– (IBAction)openModalView;

@end

12. Click on RootViewController.m

13. Type in the following code in green.

- (void)viewDidLoad {

[super viewDidLoad];
self.navigationItem.title = @”Root View”;

}

- (IBAction)openPushView {

PushViewController *oView = [[PushViewController alloc]         initWithNibName:@”PushViewController” bundle:nil];

oView.title = @”The Other View”;
[self.navigationController pushViewController:oView animated:YES];
[oView release];

}

- (IBAction)openModalView {

ModalViewController *oView = [[ModalViewController alloc]         initWithNibName:@”ModalViewController” bundle:[NSBundle mainBundle]];

oView.modalTransitionStyle = UIModalTransitionStyleFlipHorizontal;
[self presentModalViewController:oView animated:YES];
[oView release];

}

You’ll notice how very similar they are. However, in the openPushView function, we are setting the title of the view that will be coming in. In the openModalView function, we are setting how the modal view will be shown. In this case, we are flipping it like a card. Both are being animated in. If we set animated: to NO, the push view won’t slide in and the modal view won’t flip. They would both just appear.

14. Now click on RootViewController.xib.

15. Just to the left, click on the Table View shown below and delete it. (By default, Xcode 4 gives us a table view. We’re not using table in this tutorial. We’ll be covering table in our next tutorial.)

16. Make sure the right bar is shown by clicking the following icon.

17. On the bottom of the right bar, scroll the View object and drag it to the middle area.

Now we have to link the new view to our code.

18. While holding down the Control key, click and drag from the Files Owner (hollow gold cube) to the view we just dragged in.

19. Release the mouse and select view.

20. All linked. Now go back to the objects list in the right bar and drag in 2 Round Rect Buttons.

21. Double click on each button and change the titles to Open Push View and Open Modal View.

Your view should look a little something like this:

22. While holding down the Control key, click and drag from Open Push View button the the File’s Owner hollow gold box.

23. Release the mouse button and select openPushView.

24. Do the same with the Open Modal View button, except select openModalView.

Okay, we’re done with all things RootView. Let’s move on to the PushViewController.

25. Click on PushViewController.xib

26. From the list of objects, drag in a label.

27. Double click on the dragged in label and type in “This is a Push View”.

We’re now done with all things PushView. Finally, the ModalViewController.

28. Click on ModalViewController.h

29. Type in the following line of code after the @interface line.

- (IBAction)closeModalView;

30. Click on ModalViewController.m

31. Type in the following code after the initWithNibName function, but before the didReceiveMemoryWarning function.

- (IBAction)closeModalView {

[self dismissModalViewControllerAnimated:YES];

}

32. Click on ModalViewController.xib

33. Drag in a Label and a Button.

34. Double click on the Label and type “This is a Modal View”.

35. Double click on the Button and type “Close”.

36. While holding down the Control key drag from the Close button to the File’s Owner.

37. Select closeModalView.

38. And we’re done. Run the app.

You will see a screen with a navigation bar, including page title (this is automatically included in a Navigation-based project), and (2) buttons.

If you tap on the Push View button, it will slide in the pushed view, which also has a navigation bar with title. But it also has a back button with the title of the previous page. Tapping that button will slide the Root View back into place.

Tapping the Modal View button will flip the screen to reveal the modal view (go figure). As you can see, this view does not contain the navigation bar. This is because it is not part of the navigation controller. If you look at the code in step 13, the push view is attached to the navigationController, but the modal view is not. Therefore, we had to create a close button and close function to hide (or dismiss) the modal view.

If you like, you can modify the transition style of the modal view by editing the oView.modalTransitionStyle = UIModalTransitionStyleFlipHorizontal line of code. Delete from the “l” at the end of Horizontal all the way to the “e” at the end of Style. Retype the “e” and other options will pop up for you to choose from.

If you enjoyed this tutorial and would like instruction on anything else iPhone app development, leave a comment or visit our Contact page. Also, check out our apps to the right.