5 The View This chapter explains the main concepts behind views You learn about view geometry in Section 5.1 In Section 5.2, we cover the topic of view hierarchy Next, Section 5.3 discusses, in great detail, the multitouch interface In this section, you learn how to recognize multitouch gestures After that, we discuss several animation techniques in Section 5.4 Next, Section 5.5 deals with how to use Quartz 2D functions for drawing inside a view Finally, we summarize the chapter in Section 5.6 5.1 View Geometry This section covers the three geometric properties of the UIView class that you need to understand: frame, bounds, and center Before explaining these properties, let’s first look at some of the structures and functions used in specifying their values 5.1.1 Useful geometric type definitions The following types are used throughout the text: • CGFloat represents a floating point number and is defined as: typedef float CGFloat; • CGPoint is a structure that represents a geometric point It is defined as: struct CGPoint { CGFloat x; CGFloat y; }; typedef struct CGPoint CGPoint; The x value represents the x-coordinate of the point and the y value represents its y-coordinate 116 iPhone SDK 3 Programming You will use CGPoint a lot CGPointMake() is a convenient function defined to make a CGPoint from a pair of x and y values, and is defined as follows: CGPoint CGPointMake ( CGFloat x, CGFloat y ); • CGSize is a structure used to represent width and height values It is declared as follows: struct CGSize { CGFloat width; CGFloat height; }; typedef struct CGSize CGSize; where width is the width value and height is the height value To make a CGSize structure from a width and a height, use the utility function CGSizeMake(), declared as follows: CGSize CGSizeMake ( CGFloat width, CGFloat height ); • CGRect is used to represent the location and dimensions of a rectangle It is declared as follows: struct CGRect { CGPoint origin; CGSize size; }; typedef struct CGRect CGRect; The origin value represents the upper-left point of the rectangle, and size represents its dimensions (i.e., its width and height) To make a CGRect structure, you can use the utility function CGRectMake() declared as follows: CGRect CGRectMake ( CGFloat x, CGFloat y, CGFloat width, CGFloat height ); The View 117 5.1.2 The UIScreen class The UIScreen class is provided to you in order to obtain the dimensions of the device’s screen The device’s screen is 320 × 480 points as shown in Figure 5.1 Figure 5.1 The dimensions of the device screen The status bar takes 20 points from the total height, leaving 460 points for the application You can turn off the status bar using the following statement: [UIApplication sharedApplication].statusBarHidden = YES; You can retrieve the size of the device’s screen as follows: [[UIScreen mainScreen] bounds].size In the above statement, we first obtain the singleton UIScreen instance and then obtain the size of its bounding rectangle The application window resides just below the status bar To retrieve the application’s frame, use the following statement: CGRect frame = [[UIScreen mainScreen] applicationFrame] 118 iPhone SDK 3 Programming If there is a status bar, the application’s frame is 320 × 460 Otherwise, it is equal to the screen’s bounds 5.1.3 The frame and center properties The UIView class declares the frame property which is used to locate and dimension the UIView instance inside another UIView instance The property is declared as follows: @property(nonatomic) CGRect frame You usually specify the frame of a view during the initialization phase For example, the following creates a UIView instance whose origin is located at (50, 100) in its superview’s coordinates and whose width and height are 150 and 200, respectively CGRect frame = CGRectMake(50, 100, 150, 200); aView = [[UIView alloc] initWithFrame:frame]; [window addSubview:aView]; Figure 5.2 shows the result of adding the above UIView instance to a full-screen window (minus the status bar) Figure 5.2 The frame geometric property for a subview of a main window The View 119 The origin of this view is (50, 100) and its center is (125, 200), all in the parent view’s (window) coordinates Changes to the center will result in changes to the origin of the frame Similarly, changes to the origin or to the size of the frame will result in changes in the center For the example above, if the x-coordinate of the center property is increased by 80 points, the frame’s origin will be equal to (130, 100) which would result in the view being shifted as a whole a distance of 80 points to the right as shown in Figure 5.3 Figure 5.3 Moving the view location by changing its center property 5.1.4 The bounds property The bounds property is used to specify the origin and size of the view in the view’s own coordinate system The property is declared as follows: @property(nonatomic) CGRect bounds 120 iPhone SDK 3 Programming When you initialize the view, the bound’s origin is set to (0, 0) and its size is set to frame.size Changes to the bounds.origin have no effect on the frame and the center properties Changes to bounds.size, however, will result in a change in the frame and center properties As an example, consider Figure 5.2 The bound.origin is equal to (0, 0) The view draws a string’s value as shown below: - (void)drawRect:(CGRect)rect { int x = 0; int y = self.bounds.size.height/3; [@"Hello World!" drawAtPoint:CGPointMake(x,y) withFont:[UIFont systemFontOfSize:40]]; } The x-axis of the point at which the string "Hello World!" is drawn is equal to 0 If we change the value of bounds.origin.x from 0 to 50, the string drawn will move 50 to the left as shown in Figure 5.4 Figure 5.4 Changes to the bounds property’s origin affect the content of the view not its dimension/location The View 121 5.2 The View Hierarchy Most of the time, you will have one main window for the application and several views and controls with different sizes and locations The main window (an instance of UIWindow which is a subclass of UIView) will act as a root of a tree When you want to add a view to the application, you add that view to the window or to an existing view Eventually, you end up with a tree structure rooted at that window Every view will have exactly one parent view called superview, and zero or more child views called subviews To access the superview instance, use the property superview which is declared as follows: @property(nonatomic, readonly) UIView *superview To retrieve the children of a given view, use the property subviews, which is declared as follows: @property(nonatomic, readonly, copy) NSArray *subviews To add a view to an existing view, you allocate it, initialize it, configure it, and then add it as a subview The following two statements create a view that occupies the full screen (minus the status bar) CGRect frame = [UIScreen mainScreen].applicationFrame; view1 = [[UIView alloc] initWithFrame:frame]; The initializer that is usually used is the initWithFrame: initializer To add a view as a subview, use the addSubview: method which is declared as follows: - (void)addSubview:(UIView *)view After invoking this method, the superview will retain the instance view To remove a view from the view hierarchy, you use the method removeFromSuperview In addition to removing the view from the tree, this method will also release the view 5.3 The Multitouch Interface When the user touches the screen, they are requesting feedback from the application Given that the application presents multiple views, subviews, and controls to the user at the same time, there is a need for the system to figure out which object is the intended recipient of the user’s touches Every application has a single UIApplication object for handling users’ touches When the user touches the screen, the system packages the touches in an event object and puts that event object in the application’s event queue This event object is an instance of the class UIEvent The event object contains all the touches that are currently on the screen Each finger on the screen has its own touch object, an instance of the class UITouch As you will see later, each touch object can be in different phases, such as, has just touched the screen, moving, stationary, etc Each time the user touches the screen, the event object and the touches objects get mutated to reflect the change 122 iPhone SDK 3 Programming The UIApplication unique instance picks up the event object from the queue and sends it to the key window object (an instance of UIWindow class) The window object, through a mechanism called hit-testing, figures out which subview should receive that event and dispatches the event to it This object is referred to as the first responder If that object is interested in handling the event, it does so and the event is considered as delivered If, on the other hand, that object is not interested in handling the event, it passes it through a linked list of objects called the responder chain The responder chain of a given object starts from that object and ends in the application object If any object on this chain accepts the event, then the event’s propagation towards the application instance stops If the application instance receives the event and does not know of a valid recipient of it, it throws that event away 5.3.1 The UITouch class Each finger touching the screen is encapsulated by an object of the UITouch class The following are some of the important properties and methods of this class • phase This property is used to retrieve the current phase of the touch The property is declared as follows: @property(nonatomic,readonly) UITouchPhase phase There are several UITouchPhase values available including: – UITouchPhaseBegan indicates that the finger touched the screen – UITouchPhaseMoved indicates that the finger moved on the screen – UITouchPhaseStationary indicates that the finger has not moved on the screen since the last event – UITouchPhaseEnded indicates that the finger has left the screen – UITouchPhaseCancelled indicates that the touch is being cancelled by the system • timestamp The time when the touch changed its phase The UITouch object keeps mutating during an event This value refers to the last mutation • tapCount The number of taps that the user made when he/she touched the screen Successive tapping on the same place will result in a tap count greater than 1 The property is declared as follows: @property(nonatomic,readonly) NSUInteger tapCount • locationInView: This method returns the location of the touch in a given view The method is declared as follows: - (CGPoint)locationInView:(UIView *)view The returned value is in the coordinate system of view If you pass nil, the returned value is in the window’s coordinate system The View 123 • previousLocationInView: The previous location of the touch in a given view can be retrieved using this method The method is declared as follows: - (CGPoint)previousLocationInView:(UIView *)view 5.3.2 The UIEvent class A multitouch sequence is captured by an object of the class UIEvent The application will receive the same UIEvent object throughout its lifetime This object will be mutated during the execution of the application You can retrieve the timestamp of this event using the timestamp property To retrieve the touches that this event represents, use the allTouches method which is declared as follows: - (NSSet *) allTouches 5.3.3 The UIResponder class User interface objects, such as instances of UIView, receiving touches are subclasses of the UIResponder class To understand the multitouch interface, we need to understand the UIResponder class and its four main multitouch-handling methods The following are the main methods which subclasses of UIResponder class (such as UIView subclasses) need to override in order to handle gestures 1 touchesBegan:withEvent: This method is invoked to tell the responder object that one or more fingers have just touched the screen The method is declared as follows: - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event The first parameter is a set of UITouch objects that have just touched the screen The second parameter is the event which these touches are associated with 2 touchesMoved:withEvent: This method is invoked to tell the responder object that one or more fingers have just moved on the screen The method is declared as follows: - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event The first parameter is a set of UITouch objects that have just moved on the screen The second parameter is the event which these touches are associated with 3 touchesEnded:withEvent: This method is invoked to tell the responder object that one or more fingers have just been lifted from the screen The method is declared as follows: - (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event The first parameter is a set of UITouch objects that have just been lifted from the screen The second parameter is the event which these touches are associated with 124 iPhone SDK 3 Programming 4 touchesCancelled:withEvent: This method is invoked by the system to tell the responder object that the event has been cancelled The method is declared as follows: - (void)touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event The first parameter is a set containing a single UITouch object whose phase is UITouchPhaseCancel The second parameter is the event which has been cancelled It is best to understand the multitouch mechanism through a detailed example Let’s imagine three fingers, F1, F2, and F3, touching the screen, moving on the screen, and ending at various times We will show the invocation of the responder’s methods as a result of these fingers For each invocation, we show the content of the touches set as well as the allTouches set of the event object The following assumes a starting condition just prior to Step 1 where no fingers are touching the screen 1 Two fingers, F1 and F2, touched the screen touchesBegan:withEvent: is called touches: a set of two elements: Touch T1 representing F1: Touch T2 representing F2: event: The allTouches set: T1: T2: phase: Began phase: Began 2 Fingers F1 and F2 moved touchesMoved:withEvent: is called touches: a set of two elements: T1: T2: phase: Moved phase: Moved event: The allTouches set: T1: T2: phase: Moved phase: Moved 3 Finger F1 moved touchesMoved:withEvent: is called touches: a set of one element: T1: phase: Moved event: The allTouches set: T1: T2: phase: Moved phase: Stationary phase: Began phase: Began 168 iPhone SDK 3 Programming The action method is shown below To retrieve the current page, use the property currentPage -(void)pageChanged:(id)sender{ if(pageCtrl == sender){ printf("The page was changed to %d\n", [pageCtrl currentPage]); } } You can also change the current page programatically and update the visual page indicator by invoking updateCurrentPageDisplay 6.8 Date Pickers The UIDatePicker is a control that allows the user to select a time and a date using rotating wheels Figure 6.16 shows four examples of a UIDatePicker instance UIDatePickerModeTime UIDatePickerModeCountDownTimer UIDatePickerModeDateAndTime Figure 6.16 UIDatePickerModeDate Four examples of UIDatePicker Here are several important properties and methods declared by this class • calendar The calendar used in the UIDatePicker instance The property is declared as: @property(nonatomic, copy) NSCalendar *calendar If this value is nil, then the user’s current calendar is used • date This property represents the date used in the display of the date picker Controls 169 @property(nonatomic, copy) NSDate *date • setDate:animated: This method is used to change the date The method is declared as: - (void)setDate:(NSDate *)date animated:(BOOL)animated If animated is YES, the change is animated • datePickerMode Using this property you can select the date picker mode The property is defined as: @property(nonatomic) UIDatePickerMode datePickerMode The UIDatePicker instance can be configured (see Figure 6.16) to select a date; a time; a time and date; or to act as a countdown timer Listing 6.12 shows how you can configure a date picker instance and add it as a subview to a view Listing 6.12 Creating and configuring a UIDatePicker instance myDatePicker = [[UIDatePicker alloc] initWithFrame:CGRectZero]; myDatePicker.autoresizingMask = UIViewAutoresizingFlexibleWidth; myDatePicker.datePickerMode = UIDatePickerModeDate; CGSize pickerSize = [myDatePicker sizeThatFits:CGSizeZero]; rect = CGRectMake(0,150, pickerSize.width, pickerSize.height); myDatePicker.frame = rect; [myDatePicker addTarget:self action:@selector(datePickerChanged:) forControlEvents:UIControlEventValueChanged]; [theView addSubview: myDatePicker]; UIDatePicker instances differ from other controls in that they optimize their layout internally You only need to specify the origin in the view; the size will be calculated automatically The code above creates the instance, and sets up an action method for receiving value changes of the control When the user rotates the wheel, the control will call the action method as soon as the wheel finishes rotating Listing 6.13 shows the action method datePickerChanged: that is triggered when the value is changed Listing 6.13 Action method for date picker value change - (void)datePickerChanged:(id)sender{ UIDatePicker *datePicker = sender; if(myDatePicker == datePicker){ printf("Value of picker is %s\n", [[[myDatePicker date] description] cString]); } } 170 iPhone SDK 3 Programming 6.9 Summary In this chapter, we covered the topic of controls in the iPhone OS We started by presenting the base class of all controls, UIControl, and its main features We then talked about the important targetaction mechanisms used to communicate changes in the control to the clients This chapter covered the text field, slider, switch, button, page control, segmented controls, and pickers Problems (1) Study the UIControl.h header file and the UIControl class in the documentation (2) How many different forms are available for an action selector? Name them 7 View Controllers The model view controller (MVC) is a popular design pattern that is used in software construction to isolate the business logic from the graphical user interface In MVC, a controller is used for the purpose of coordination between the model (where the business logic resides) and the view (where the user’s interactions occur) In this chapter, you learn about the available view controllers that are provided in the iPhone SDK Although you can build iPhone applications without the use of these view controllers, you shouldn’t As you will see in this chapter, view controllers greatly simplify your application Section 7.1 provides a gentle introduction to view controllers by presenting a simple application with a single view controller This application demonstrates important view controller concepts In Section 7.2, we talk about tab bar controllers and how they can be used in the construction of radio interfaces In Section 7.3, we talk about navigation controllers used primarily for presenting hierarchical information to the user After that, Section 7.4 talks about modal view controllers and provides a detailed example showing their appropriate usage Finally, we summarize the chapter in Section 7.5 7.1 The Simplest View Controller In this section, we demonstrate the simplest view controller The application is composed of a view, a view controller, and a data model The application simply displays a message that describes the orientation of the device The view asks the controller for the message string, and the controller consults the device orientation and retrieves the appropriate text from the data model 7.1.1 The view controller Listing 7.1 shows the declaration of the view controller The UIViewController is the base class for all view controllers When creating a view controller, you either subclass this class or one of its subclasses The data model is represented by three strings where each describes the orientation of the 172 iPhone SDK 3 Programming device The method message is used by the view instance to retrieve the appropriate text describing the orientation of the device Listing 7.1 The declaration of a simple view controller CDAViewController in file CDAViewController.h #import @interface CDAViewController : UIViewController { NSString *strPortraitNormal, *strPortraitUpSideDown, *strLandscape; } -(NSString*)message; @end In Listing 7.2, we show the implementation of the view controller CDAViewController Listing 7.2 The implementation of a simple view controller CDAViewController in file CDAViewController.m #import "CDAViewController.h" #import "CDAUIView.h" @implementation CDAViewController - (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil { if (self =[super initWithNibName:nibNameOrNil bundle:nibBundleOrNil]){ strPortraitNormal = @"Portrait"; strPortraitUpSideDown = @"Portrait UpSideDown"; strLandscape = @"Landscape"; } return self; } - (void)loadView { CGRect rectFrame = [UIScreen mainScreen].applicationFrame; //Create the main view CDAUIView *theView = [[CDAUIView alloc] initWithFrame:rectFrame]; theView.backgroundColor = [UIColor whiteColor]; theView.myController = self; theView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth; self.view = theView; [theView autorelease]; } - (BOOL)shouldAutorotateToInterfaceOrientation: (UIInterfaceOrientation)interfaceOrientation { return YES; } - (NSString*)message{ switch (self.interfaceOrientation) { case UIInterfaceOrientationPortrait: View Controllers 173 return strPortraitNormal; case UIInterfaceOrientationPortraitUpsideDown: return strPortraitNormal; default: return strLandscape; } } @end We override the initialization method initWithNibName:bundle: in order to initialize the data model The three strings are set according to their purpose Since we are creating the view programmatically, we need to override the method loadView Our method creates a view instance of the class CDAUIView (discussed later) and configures it to have flexible height and width This is achieved by setting the autoresizingMask property with the appropriate value Since the view needs a reference to the controller, we also set the property myController of our custom view with the view controller’s instance The method shouldAutorotateToInterfaceOrientation: is also overridden This method is called whenever the device’s orientation changes If you return YES, then the device orientation is changed; otherwise, no change in the device orientation occurs Since our application requires that the orientation be changed, we return YES The message method is the method used by the view to retrieve the text that needs to be displayed The method simply queries the current orientation of the device and returns the appropriate string using the simple data model The UIViewController’s property interfaceOrientation is used to retrieve the current orientation of the device The property is declared as follows: @property(nonatomic, readonly) UIInterfaceOrientation interfaceOrientation There are four orientations of type UIInterfaceOrientation These orientations are: • UIInterfaceOrientationPortrait indicates that the iPhone is in portrait orientation where the home button is on the bottom • UIInterfaceOrientationPortraitUpsideDown indicates that the iPhone is in portrait orientation where the home button is on the top • UIInterfaceOrientationLandscapeLeft indicates that the iPhone is in landscape orientation where the home button is on the left • UIInterfaceOrientationLandscapeRight indicates that the iPhone is in landscape orientation where the home button is on the right 7.1.2 The view The view managed by the view controller is an instance of the class CDAUIView declared in Listing 7.3 The view has a property used to assign the view controller that is managing the view 174 iPhone SDK 3 Programming Listing 7.3 The declaration of the view CDAUIView in CDAUIView.h used to demonstrate the simplest view controller #import @class CDAViewController; @interface CDAUIView : UIView { CDAViewController *myController; } @property(nonatomic, assign) CDAViewController* myController; @end Listing 7.4 shows the implementation of the view class The class overrides the drawRect: method The method simply asks the controller for a text message and draws that message on the view Listing 7.4 The implementation of the view CDAUIView in CDAUIView.m used to demonstrate the simplest view controller #import "CDAUIView.h" @implementation CDAUIView @synthesize myController; - (void)drawRect:(CGRect)rect { [[myController message] drawAtPoint:CGPointMake(80, 30) withFont:[UIFont systemFontOfSize:50]]; } @end 7.1.3 The application delegate Listing 7.5 shows the declaration of the application delegate It holds two instance variables: a window instance and a view controller instance Listing 7.5 The declaration of the application delegate CDAAppDelegate in CDAAppDelegate.h demonstrating the simplest view controller @class CDAViewController; @interface CDAAppDelegate : NSObject { UIWindow *window; CDAViewController *viewController; } @end In Listing 7.6, we show the implementation of the application delegate class As usual, we initialize the user interface objects in the method applicationDidFinishLaunching: First, we create the application window Next, the view controller instance is created and initialized using initWithNibName:bundle: Since we are creating the controller programatically, we pass nil for both parameters The controller’s view is then added to the window as a subview, and the window is made key and visible View Controllers 175 Listing 7.6 The implementation of the application delegate CDAAppDelegate in CDAAppDelegate.m demonstrating the simplest view controller #import "CDAAppDelegate.h" #import "CDAViewController.h" @implementation CDAAppDelegate - (void)applicationDidFinishLaunching:(UIApplication *)application { window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]]; viewController = [[CDAViewController alloc] initWithNibName:nil bundle:nil]; [window addSubview:viewController.view]; [window makeKeyAndVisible]; } - (void)dealloc { [window release]; [viewController release]; [super dealloc]; } @end The UIViewController declares a view property as follows: @property(nonatomic, retain) UIView *view The view property is initially nil When the property is accessed (as in the statement viewController.view), the controller checks to see if it is nil If it is nil, it sends itself a loadView message As we saw before, we create the view in the loadView method and set the property view with the instance created Therefore, when the controller’s view is eventually added to the window, our CDAUIView instance is actually added as a subview to the window Figures 7.1 and 7.2 show the application in portrait and landscape orientations, respectively 7.1.4 Summary: creating a simple MVC application Let’s look at the major steps we have performed: 1 Create a subclass of UIViewController Create the subclass and override the following methods: (a) initWithNibName:bundle: This is the initializer of the view controller You can perform initialization of the data model and the controller instance (b) loadView This method is used to load the view managed by the controller You should create the view instance, configure it, and set its reference to the view property of the controller 176 iPhone SDK 3 Programming Figure 7.1 The application demonstrating the simplest view controller in portrait orientation Figure 7.2 The application demonstrating the simplest view controller in landscape orientation View Controllers 177 (c) shouldAutorotateToInterfaceOrientation: If your application allows for the orientation to change, you should override this method and return YES for the acceptable orientations 2 Create a subclass of UIView If your application requires a specialized view, you should subclass the UIView class Optionally, add a property for the controller so that the controller can set this property in order for the view to communicate with the controller concerning changes in the data model Otherwise, the view can communicate with the application delegate 3 Create an application delegate class In the applicationDidFinishLaunching: method, you should create the main window and the view controller, and add the view property of the view controller as a subview to the main window The complete application can be found in the CDA project in the source downloads 7.2 Radio Interfaces Often you need to design an application that has several functionalities or operates in parallel modes The interface of such an application is sometimes referred to as a radio interface Each functionality or mode will be managed by a view controller, and the set of these controllers defines the application You can use a tab bar controller to manage several view controllers similar to the one you saw in the previous section Each controller is represented by a button, and the set of buttons is available at the bottom of the screen on a tab bar managed by the tab bar controller When the user taps a button, the view of the corresponding controller becomes the visible view, and the button changes to indicate that it is the active mode Adding a tab bar to your application is simple: you simply create a tab bar controller, add the set of view controllers to it, and add its view to an existing view In the next section, we present a simple application that demonstrates the basic steps needed in developing radio-based interface applications 7.2.1 A detailed example In this section, we create a simple application that utilizes a tab bar The application screenshot is shown in Figure 7.3 The application presents to the user a number of geometric shapes to select from Each item is represented by a view controller that, when its item is selected, displays the name of the shape in its view The first step is writing the classes for the view controllers of each item In this example, we use a single view controller class to represent every item Each controller instance will be configured to output a different message Note that it is usually the case that every item (or mode) has its own view controller class The view controller class is CDBViewController, and it is declared in Listing 7.7 178 iPhone SDK 3 Programming Figure 7.3 A screenshot of a simple tab bar application Listing 7.7 The declaration of the view controller representing each item in the tab bar application #import @interface CDBViewController : UIViewController { NSString *message; } @property (nonatomic, retain) NSString *message; - (id)initWithMessage:(NSString *)theMessage andImage:(UIImage*) image; @end The view controller uses a custom initializer, initWithMessage:andImage:, that initializes the view controller with the custom message that will be displayed when it becomes active, and an image used to represent its item in the item list on the tab bar The implementation of the view controller class is shown in Listing 7.8 Listing 7.8 The implementation of the view controller used in the tab bar application #import "CDBViewController.h" #import "CDBUIView.h" @implementation CDBViewController View Controllers 179 @synthesize message; - (id)initWithMessage:(NSString *)theMessage andImage:(UIImage*) image { if (self = [super initWithNibName:nil bundle:nil]) { self.message = theMessage; self.tabBarItem.image = image; } return self; } - (void)loadView { CGRect rectFrame = [UIScreen mainScreen].applicationFrame; CDBUIView *theView = [[CDBUIView alloc] initWithFrame:rectFrame]; theView.backgroundColor = [UIColor whiteColor]; theView.myController = self; theView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth; self.view = theView; [theView release]; } @end The initializer first calls the super’s initializer, initWithNibName:bundle: Since we are going to build our graphical interface programatically, we pass nil value for both parameters The initializer then stores the custom message in the message property for later use by its managed view, and stores the image representing this controller in the image property of the tabBarItem property of the view controller instance The tabBarItem property is declared in the UIViewController class as follows: @property(nonatomic, readonly, retain) UITabBarItem *tabBarItem The value for this property is an object (possibly nil) of the class UITabBarItem representing the view controller on the tab bar The UITabBarItem class is a subclass of UIBarItem It inherits from its superclass the image and title properties The default value for the image is nil However, the title value, if not set, is set to the value of the view controller’s title property The UITabBarItem class adds an additional property: badgeValue which is an instance of NSString and its value is shown inside a red oval to the right of the corresponding tab bar item More on this later The controller, as usual, overrides the loadView method for setting up its managed view This method is similar to what we saw in the previous section The view class is a custom view class CDBUIView that we will see shortly Since we plan to add the view controller to a tab bar controller, the view managed by the view controller needs to be able to resize so that it fits above the tab bar Therefore, it is important to set the autoresizingMask property of the managed view as shown in the method The CDBUIView view class is declared in Listing 7.9 It simply maintains a myController property to hold a reference to its controller This reference is needed so that the view can retrieve the proper message to be drawn in the view 180 iPhone SDK 3 Programming Listing 7.9 The view class declaration used in the tab bar application #import @class CDBViewController; @interface CDBUIView : UIView { CDBViewController *myController; } @property(nonatomic, assign) CDBViewController* myController; @end The implementation of the CDBUIView class is shown in Listing 7.10 The class overrides the drawRect: method of its superclass to draw the message obtained from the controller Listing 7.10 The implementation of the view class used in the tab bar application #import "CDBUIView.h" @implementation CDBUIView @synthesize myController; - (void)drawRect:(CGRect)rect { [[myController message] drawAtPoint:CGPointMake(80, 30) withFont:[UIFont systemFontOfSize:20]]; } @end Now that we have constructed the view controller and its required view class, we can use the application delegate to present the application window to the user The application delegate class declaration is shown in Listing 7.11 In addition to maintaining a reference to the main window, it has six references to view controllers, all of type CDBViewController These controllers will be added to a tab bar controller of type UITabBarController whose reference is in the instance variable tabBarController Listing 7.11 The application delegate class declaration used to present the main window in the tab bar application #import @class CDBViewController; @interface CDBAppDelegate : NSObject { UIWindow *window; CDBViewController *viewController1, *viewController2, *viewController3, *viewController4, *viewController5, *viewController6; UITabBarController *tabBarController; } @end Listing 7.12 shows the implementation of the application delegate class View Controllers 181 Listing 7.12 The application delegate class implementation used to present the main window in the tab bar application #import "CDBAppDelegate.h" #import "CDBViewController.h" @implementation CDBAppDelegate - (void)applicationDidFinishLaunching:(UIApplication *)application { window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]]; viewController1 = [[CDBViewController alloc] initWithMessage:@"Triangle" andImage:[UIImage imageNamed:@"tri.png"]]; viewController1.title = @"Tri"; viewController2 = [[CDBViewController alloc] initWithMessage:@"Rectangle" andImage:[UIImage imageNamed:@"rect.png"]]; viewController2.title = @"Rect"; viewController3 = [[CDBViewController alloc] initWithMessage:@"Ellipse" andImage:[UIImage imageNamed:@"ellipse.png"]]; viewController3.title = @"Elli"; viewController4 = [[CDBViewController alloc] initWithMessage:@"Rectangle+Ellipse" andImage:[UIImage imageNamed:@"rect-elli.png"]]; viewController4.title = @"R&E"; viewController5 = [[CDBViewController alloc] initWithMessage:@"Rectangle+Triangle" andImage:[UIImage imageNamed:@"rect-tri.png"]]; viewController5.title = @"R&T"; viewController6 = [[CDBViewController alloc] initWithMessage:@"Rectangle+Rectangle" andImage:[UIImage imageNamed:@"two-tri.png"]]; viewController6.title = @"R&R"; tabBarController = [[UITabBarController alloc] init]; tabBarController.viewControllers = [NSArray arrayWithObjects: viewController1, viewController2, viewController3, viewController4, viewController5, viewController6, nil]; [window addSubview:tabBarController.view]; [window makeKeyAndVisible]; } 182 iPhone SDK 3 Programming - (void)dealloc { [window release]; [viewController1 release]; [viewController2 release]; [viewController3 release]; [viewController4 release]; [viewController5 release]; [viewController6 release]; [tabBarController release]; [super dealloc]; } @end The application delegate overrides the applicationDidFinishLaunching: method for setting up the main window First, we create six instances of the CDBViewController view controller class Each of these instances is initialized with the message that will be displayed in their view and the image that will be displayed as their representation on the tab bar In addition, the view controller’s title is set, which also has the side effect of setting the tab bar item’s title to the same value The image files are stored in the application’s bundle Using the class method imageNamed:, we retrieve the image encapsulated by a UIImage class See Chapter 10 for more information After creating the view controllers, we create the tab bar controller that will manage them This class is of type UITabBarController To add the view controllers, we set its viewControllers property This property is declared as: @property(nonatomic, copy) NSArray *viewControllers Therefore, all we have to do is create an instance of NSArray with the six view controller instances as its elements and use it as the value for the viewControllers property Finally, we have to add the tab bar’s view as a subview to the main window When the window appears, the tab bar’s view appears and it will consist of the tab bar (at the bottom) and the currently selected view controller’s view above it Initially, the first controller is selected The complete application can be found in the CDB project in the source downloads 7.2.2 Some comments on tab bar controllers There are several additional aspects of the tab bar controller that need to be highlighted • The More List If there are more than five view controllers to be managed, the tab bar will show the first four controllers and an additional More item is added as the fifth controller ... 126 iPhone SDK Programming event: The allTouches set: T1: T2: T3: phase: Stationary phase: Moved phase: Ended touchesEnded:withEvent:... (noTouchesInEvent==2) ){ UITouch *aTouch = (UITouch*)[touches anyObject]; 134 iPhone SDK Programming if((aTouch.timestamp - firstTouchTimeStamp)