change background image in a cell when iPhone rotates

Question

My tableview has 4 cells, and each cells has one different picture as background.

When I rotate the iPhone, the height of the rows change, and also the pictures.

Is really easy to change picture if the position is in landscape or in portrait, but the picture change when the iPhone is already rotated, not while is rotating! What's the problem? For example: the iPhone is in portrait and the user rotates it in landscape. That there is a very ugly effect, because the pictures change just when the iPhone is in landscape, and for a fraction of a second the user sees the portrait picture deformed (before that it changes).

How can I solve it?

Thanks

Answer 1

Implement willAnimateRotationToInterfaceOrientation in your view controller. Inside this method you can reorient your pictures and they'll automatically be animated. There's a short overview this and other available interface orientation methods at http://www.dizzey.com/development/ios/handling-layout-on-uiinterfaceorientation-change/

You could manually track acceleration and write your own animation blocks. Set your view controller as a UIAccelerometerDelegate. Reference the sharedAccelerometer as follows.

    accel = [UIAccelerometer sharedAccelerometer];
    accel.delegate = self;
    accel.updateInterval = 1.0f/60.0f;

Then implement this delegate method. This will be run every time the accelerometer notices acceleration. Tracking acceleration in the X axis will give you landscape/portrait orientation.

#pragma mark UIAccelerometer delegate method
-(void)accelerometer:(UIAccelerometer *)accelerometer didAccelerate:(UIAcceleration *)acceleration {
    if(acceleration.x > 0.8) //landscape right
    {
        [UIView beginAnimations:@"text spin" context:nil];
        [UIView setAnimationCurve:UIViewAnimationCurveLinear];
        [UIView setAnimationDuration:0.2];
        //do some animation to landscape right
        [UIView commitAnimations];
    }
    if(acceleration.x < -0.8) //landscape left
    {
        [UIView beginAnimations:@"text spin" context:nil];
        [UIView setAnimationCurve:UIViewAnimationCurveLinear];
        [UIView setAnimationDuration:0.2];      
        //do some animation to landscape left
        [UIView commitAnimations];
    }
    if(acceleration.x < 0.2 && acceleration.x > -0.2) //portrait 
    {
        [UIView beginAnimations:@"text spin" context:nil];
        [UIView setAnimationCurve:UIViewAnimationCurveLinear];
        [UIView setAnimationDuration:0.2];
        //do some animation to portrait view
        [UIView commitAnimations];
    }

Answer 2

In a situation like this, during a rotation I tend to just use the .hidden property on elements (myObject.hidden = YES) and then restore them when the rotation is complete.

I imagine your picture frames have more room in landscape view - another suggestion if this is true, is to keep them the same size in both orientations, then you wouldn't need to hide them during a rotation, for example.

Hope this helps!