I want to show you a simple example of Core Animation within Cocoa Touch. Many of the UIView properties are already animatable for you, so you do not need to create an explicit animation. In this case, we say that the animation is implicit in the UIView. For example, if you have a view with transparency alpha = 1.0 and you change it to 0.0, you should see during the execution an animation performing a gradual change of the alpha value. I say “you should”, because the default animation speed is quite fast, so you cannot usually appreciate it. This is due to the default value of the time duration of the animation. To modify this value, you need to explicitly refer to the animation process. So, in this case, you cannot simply change a property value of your view, but you need to adjust other parameters before the animation starts. We will see this in our example.

I believe you already notice in many iPhone Apps a small round button with an “i” (info button), which, when pressed, provides information about the App. Usually this information is represented on a dedicated view that appears after a very nice animation flipping between the main view and this info view. Let us reproduce this nice animation.

Open Xcode and create a View-Based Application. Name it ToggleTest and save it on your disk. Go to the Resources folder and double click the ToggleTestViewController.xib file to open it in Interface Builder (IB). Let us add an extra UIView object to the ToggleTestViewController.xib window (they must be two in total). Save the document and go to Xcode without closing IB. We need to add an outlet to the UiViewController for the info view. So, open the ToggleTestViewController.h file and add

IBOutlet UIView *secondaryView;

Add also this action that we need when the info button is pressed:

- (IBAction)toggleView:(id)sender;

Let us go back to IB. Connect the secondaryView outlet of the File’s Owner to the previously added UIView. Open this view and change the background color (in the Inspector View Attributes) to red. Double click the main view to open it and add a button to it. Keeping the button selected, chose Info Dark as Type in the Attribute Pane of the inspector. The button will become a small round icon containing a lower case i as shown in the following picture.

Toggle button

Now, connect the -toggleView action to the info button and choose Touch Up Inside. Save and go back to Xcode. Now we add the functionality to the action.

- (IBAction)toggleView:(id)sender {

[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:1.0];

[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft
forView:[self view]
cache:YES];
[[self view] addSubview:secondaryView];
[UIView commitAnimations];
}


To toggle back the main view, we add a touch control, so that you just tap on the screen:

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {

NSSet *aSet = [event touchesForView:secondaryView];
if ([aSet count] > 0) {

[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:1.0];

[secondaryView removeFromSuperview];
[UIView commitAnimations];
}
}

You can also play a little bit with the transition types. Try UIViewAnimationTransitionCurlUp and UIViewAnimationTransitionCurlDown.

Let’s create a simple project. Open Xcode and chose the Tab Bar Application template in the iPhone OS group. Name it SimpleTab and save it where ever you like in your HD. Build and run it. If you rotate the iPhone (or the Simulator via Apple-Left or Right Arrow keys), it does not work: the interface keeps its portrait position.

Let’s add a new class to the project. Right-click the Classes group in the Groups & Files pane and choose Add… -> New File… Choose an NSObject subclass in the Cocoa Touch Classes group and name it MyTabBarController.

Open the MyTabBarController.h file and change it in this way:

#import <UIKit/UIKit.h>

@interface MyTabBarController : UITabBarController {

}
@end
 
Notice that I am subclassing UITabBarController. Now, edit the MyTabBarController.m file and add the following method:

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
return YES;
}

Save it. We have simply created a subclass of UITabBarController able to rotate. Now, we need to tell Interface Builder to use this class, instead of its parent.

Double-click the MainWindow.xib file and select the Tab Bar Controller object in the MainWindow.xib window. Open the Identity Inspector and change the class name to MyTabBarController. Save it and close Interface Builder. Go back to Xcode and build and run. Now, if you try to rotate the view…… it works.

When you rotate the iPhone, the content of each view is not correctly displayed. You have to play with the autosizing mask in Interface Builder or programmatically. But I leave this to you.