WHAT YOU WILL LEARN IN THIS CHAPTER
How to create a Window-based Application and manually add a View Controller and a View window to it
How to create views dynamically during runtime
How to wire up events of views with event handlers via code
How to switch to another view during runtime
How to animate the switching of views
Until this point, you have been dealing with single view applications; that is, applications with a single View Controller. The previous chapters have all been using the View-based Application template available in the iPhone SDK because it is the simplest way to get started in iPhone programming. When you create a View-based application, there is by default one View Controller (named <
project_name>ViewController
by the iPhone SDK). In real-life applications, you often need more than one View Controller, with each controlling a different view displaying different information. A good example of a multiview application is the Weather application shipped with the iPhone. The main view shows the weather of a region you have selected, and you can swipe the screen to view the weather of other locations. You can also press the i icon to flip to another view and add locations.
This chapter teaches you how to create multiple views in your application and then programmatically switch among them during runtime. In addition, you learn how to animate the switching of views using the built-in animation methods available in the iPhone SDK.
In this section, you discover another type of application template you can create using the iPhone SDK: the Window-based Application template. Unlike the View-based Application template, the Window-based Application template does not include a View Controller by default. Instead, it provides only the skeleton of an iPhone application and leaves the rest to the developer — you need to add your own views and View Controllers. Because of this, a Window-based Application presents a very good way for you to understand how View Controllers work and appreciate all the work needed to connect the View Controllers and XIB files. When you understand how View Controllers work, you will be on your way to creating multiview applications.
To put first things first, execute the following Try it Out to write a Window-based Application and then progressively add a View Controller to it. You will need to download the project files as indicated here for this and other Try It Out features in this chapter.
Besides adding a View Controller and views using Interface Builder, a commonly used technique is to programmatically create the views during runtime. This provides a lot of flexibility, especially when you are writing games for which the UI of the application is constantly changing.
In the following Try It Out, you learn how you can create a View using an instance of the UIViewController
class and then programmatically add views to it.
In the previous section, you saw that you can programmatically add views during runtime. Also, in the example, you saw how you can add a Label and Button view to the main View. However, you would need to handle the events raised by the Button view so that when the user presses it, you can perform some work. In Chapter 3, you learned about using outlets and actions and how you connect your code to them using Interface Builder. In the following Try it Out, the views are created using code, and hence you cannot use Interface Builder to connect the actions and outlets — you have to do it by code, too.
So far, you have been learning about single-view applications. However, in real life, you often have a number of views, each representing different pieces of information. Depending on the selections made by the user, you then switch to different views to perform different tasks.
Hence, in this section you learn how you can switch to another view depending on the selection made by the user.
The switching of Views that you have just seen in the previous section happens instantaneously — the two Views change immediately without any visual cues. One of the key selling points of the iPhone is its animation capabilities. Therefore for the switching of views, you can make the display a little more interesting by performing some simple animations, such as flipping one View to reveal another. Here is how to do that.
In this chapter, you had your first experience with Window-based Application projects. The Window-based Application template is a good starting point for you to really understand the nuts and bolts of the UI of an iPhone application. You also learned how to switch between two views and apply animations to the transition process. In the next chapter, you learn the next type of application template supported by the iPhone SDK: Tab Bar applications. A Tab Bar application is another type of multiview application that you can build, except that all the groundwork has already been done for you to make your life easy.
EXERCISES
Write the code snippet that allows you to create a View Controller programmatically.
Write the code snippet that creates a view dynamically during runtime.
Write the code snippet that wires up an event of a view with an event handler.
WHAT YOU HAVE LEARNED IN THIS CHAPTER
TOPIC | KEY CONCEPTS |
---|---|
Adding a View Controller manually | Add an instance of the |
Creating a |
label = [[UILabel alloc] initWithFrame:frame]; label.textAlignment = UITextAlignmentCenter; label.font = [UIFont fontWithName:@"Verdana" size:20]; label.text = @"This is a label"; |
Creating a |
frame = CGRectMake(10, 250, 300, 50); button = [[UIButton buttonWithType:UIButtonTypeRoundedRect] initWithFrame:frame]; [button setTitle:@"OK" forState:UIControlStateNormal]; button.backgroundColor = [UIColor clearColor]; |
Wiring up an event with an event handler |
button addTarget:self action:@selector(buttonClicked:) forControlEvents: UIControlEventTouchUpInside]; |
Switching to another view |
myViewController = [[MyViewController alloc] initWithNibName:@"MyView" bundle:nil]; [self.view addSubview:myViewController.view]; |
Animating the view transition |
UIView beginAnimations:@"flipping view" context:nil]; [UIView setAnimationDuration:1]; [UIView setAnimationCurve: UIViewAnimationCurveEaseInOut]; [UIView setAnimationTransition: UIViewAnimationTransitionFlipFromLeft forView:self.view cache:YES]; [self.view addSubview:myViewController.view]; [UIView commitAnimations]; |