Flip circular UIView that is constrained with Auto Layout

Question

I have a UIView that I've made circular in the following manner.

view.layer.cornerRadius = view.frame.size.width / 2;
view.clipsToBounds = YES;

I have a UIImageView inside the view that fills the view.

UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, view.frame.size.width, view.frame.size.height)];
imageView.contentMode = UIViewContentModeScaleAspectFill;
[view addSubview: imageView];

The view has the following constraints:

• centre horizontally
• fixed width/height
• bottom space = -50

I want to animate the view by flipping it around. I've tried two approaches to doing this.

Approach 1: Using transitionWithView:

This results in the full image being shown while the flip is being animated (the image loses the aspect fill, it looks as if the image is being flipped within the view instead of the view itself).

[UIView transitionWithView:view duration:1.0 options:UIViewAnimationOptionTransitionFlipFromRight | UIViewAnimationOptionShowHideTransitionViews animations:^{
} completion:nil];

Approach 2: Applying a layer transform

This results in a very buggy animation where half of the view controller cuts off. I believe this might be due to the constraints in Auto Layout.

[UIView animateWithDuration:1.0 animations:^{
    view.layer.transform = CATransform3DMakeRotation(M_PI,0.0,1.0,0.0);
}];

How can I achieve a smooth flipping animation of my view keeping in mind the constraints and the image subview of the view?

Screenshots of how it looks like using Approach 1

Here's the original view with the subview

And here's what it looks like in the middle of the flip animation

Screenshots of how it looks like using Approach 2

Image inside view gets cut in half, and the half that is still visible flips.

Constraints for UIView and UIImageView

Answer 1

There is problem with UIImageView constraints. in order to get full UIImageView inside UIView, you need to set following constraints.

Output is :

Hope this help you.

Answer 2

This works for me. Make sure it is called in viewDidLayoutSubviews.

- (void)viewDidLayoutSubviews
{
    [super viewDidLayoutSubviews];
    [self makeImageRound]; // call it here to make perfect circle
}


- (void)makeImageRound
{
    self.profileView.layer.cornerRadius = self.profileView.frame.size.width / 2;
    self.profileView.layer.borderWidth = 0.0f;
    self.profileView.layer.borderColor = [UIColor whiteColor].CGColor;
    self.profileView.clipsToBounds = YES;
    self.profileView.layer.masksToBounds = true;
}