Question

Hi I am trying to replicate the same rotation which can be seen in the camera app when orientation is shifted to landscape. Unfortunately I've had no luck. I need to set this up for the custom cameraOverlayView with UIImagePickerController.

From this portrait (B are UIButtons)

|-----------|
|           |
|           |
|           |
|           |
|           |    
|           |
| B   B   B |
|-----------|

To this landscape

|----------------|
|              B |
|                |
|              B |
|                |
|              B |
|----------------|

In other words I would like the buttons to stick to the original portrait bottom and rotate on their centres. I am using Storyboards and Autolayout is enabled. Any help is greatly appreciated.

Was it helpful?

Solution

OK, so I've managed to sort this out. A thing to note is the UIImagePickerController class supports portrait mode only as per Apple documentation.

To capture the rotation the willRotateToInterfaceOrientation is useless here, so you have to use notificatons. Also setting autolayout contraints at runtime is not the way to go.

In the AppDelegate didFinishLaunchingWithOptions you need to enabled rotation notifications:

// send notification on rotation
[[UIDevice currentDevice]beginGeneratingDeviceOrientationNotifications];

In viewDidLoad method of the cameraOverlayView UIViewController add the following:

//add observer for the rotation notification
[[NSNotificationCenter defaultCenter]addObserver:self selector:@selector(orientationChanged:) name:UIDeviceOrientationDidChangeNotification object:nil]; 

Finally add the orientationChanged: method to the cameraOverlay UIViewController

- (void)orientationChanged:(NSNotification *)notification
{
    UIDeviceOrientation orientation = [[UIDevice currentDevice] orientation];
    double rotation = 0;

    switch (orientation) {
        case UIDeviceOrientationPortrait:
            rotation = 0;
            break;
        case UIDeviceOrientationPortraitUpsideDown:
            rotation = M_PI;
            break;
        case UIDeviceOrientationLandscapeLeft:
            rotation = M_PI_2;
            break;
        case UIDeviceOrientationLandscapeRight:
            rotation = -M_PI_2;
            break;
        case UIDeviceOrientationFaceDown:
        case UIDeviceOrientationFaceUp:
        case UIDeviceOrientationUnknown:
        default:
            return;
    }
    CGAffineTransform transform = CGAffineTransformMakeRotation(rotation);
    [UIView animateWithDuration:0.4 delay:0.0 options:UIViewAnimationOptionBeginFromCurrentState animations:^{
        self.btnCancel.transform = transform;
        self.btnSnap.transform = transform;     
    }completion:nil];
}

The above code applies the rotation transform on the 2 UIButtons I am using in this case btnCancel and btnSnap. This gives you the Camera app effect when rotating the device. I am still getting a Warning in the console <Error>: CGAffineTransformInvert: singular matrix. not sure why this is happening but it is something to do with the camera view.

Hope the above helps.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top