iPod app view transition like question - tabBar view to cowerflow view transition

[Jume]

Hi,

I will post same question into this section as well.

I want to archive view transition effect, similar to that in iPod app. When the device is flipped to a landscape orientation the tabBar view fades out and a full screen cover flow view slowly fades in and vice versa.

I was able to achieve view transition but with one problem. Here's what I've done so far:

1) I have an application where the top level view is a tabBarController
2) I've sub-classed tabBarController where I determine if the device is rotated to landscape and vice versa. I do this by returning YES in shouldAutorotateToInterfaceOrientation
3) one the device is put into new orientation mode I animate view transitions (hide tabBarController view and fade in cover flow view) in function willRotateToInterfaceOrientation

This all works fine. The only thing that bothers me is when I change device orientation the tabBarController starts to autorotate it's orientation. I don't want that. How do I disable this autorotation?

I tried to do it by returning NO in shouldAutorotateToInterfaceOrientation but then the other method - willRotateToInterfaceOrientation is never called where I do my view transition animation.

Here are the main questions:
1) are the above methods right to do this kind of effect,. if yes how do I disable autorotation of tabBarController?
2) should I rely on accelerometer data to find out when device changes it's orientation and do the view transition there?

Thanks for helping.

PS: if you don't understand what I'm trying to do, run an iPod app on your iPhone and rotate the device from portrait to landscape orientation. What happens is tabBarConroller view fades out and cover flow view fades in and vice versa.

[Jume]

Ok finally figured it out how to do that. It fairly simple. It is done by a use of UIDevice class which provides notifications for device orientation. Here is how I implemented view transitions when device changes orientation without UIView's self autorotate methods. Hope someone finds this useful.

- (void)applicationDidFinishLaunching:(UIApplication *)application {
	[window addSubview:tabBarController.view];
	
	[[UIDevice currentDevice] beginGeneratingDeviceOrientationNotifications];	
	[[NSNotificationCenter defaultCenter] addObserver:self
										  selector:@selector(didRotate:)
										  name:@"UIDeviceOrientationDidChangeNotification" 
										  object:nil];	
    
	if ([self isDataSourceAvailable] == NO) {
        return;
    }
}

- (void) didRotate:(NSNotification *)notification
{	
	UIDeviceOrientation orientation = [[UIDevice currentDevice] orientation];
	
	if (orientation == UIDeviceOrientationLandscapeLeft || orientation == UIDeviceOrientationLandscapeRight)
	{
           //view transition code in here
	}
}

BR,
Jume

[davesmith]

Jume,

Do you have any pointers on how you would make a window or view like the ipod cover flow one with a full status bar up top.

I would assume somehow rotating the orientation of the device programmatically and changing the properties of the status bar.

I can get a new window to display using the code you suggested but cannot get it to draw with the right orientation (should be landscape).

Any help would be greatly appreciate, I am basically trying to reproduce the iPod cover flow screen but with something else in the middle

Best
Dave

[Jume]

Yes the code mentioned up only describes the transition to the landscape view and vice versa when the device is flipped. You will need to apply rotation transformation code to the landscape view in order to draw thing nicely in landscape. There's a couple of open topics on this forum about that. You should easily find them with searching for "landscape view".

Should be fairly easy to layout landscape views but there's no documented method on how to transform view coordinates for landscape layout. Most of guys (including me) do it like it's mentioned on this forum - by applying rotation transformation to the view and it's subviews.

[zubair.daud]

Jume, do you think i need to use QuartzCore API for this? also if you can help me to put images side by side like in coverflow that will be really helpful,

thanks

[Jume]

I managed view transition only with the help of accelerometer and the view's animation capabilities. I didn't want to simulate the cower flow it self, just the same transition between views.
To align images into cowerflow you will have to use core animation and quartz. I never did this before and I guess it's not easy. The coverflow example code is available in xcode example folder (for OS X 10.5 on mac) and it doesn't look simple. I would start here, it's your best shot. There's no API for coverflow on iPhone.

[Maechi]

Hi everybody,

Thanks for the code, it brought me one step forward. I use it to hand over a new Viewcontroller when the application runs in landscape mode.

But as expected the new View has not the right coordinatsystem... So I searched for some transform code to include, as described by Jume.

But every pice of code I tried, just produced an empty view.

viewController.view.transform = CGAffineTransformMakeRotation( M_PI /2);

Thanks for your hints in advance...
Maechi