CODEWITHSUNDEEP
iosobjective-cswiftcore-animation
dev_ios999
dev_ios999

Reputation: 359

Flipping and replacing UIView

I have a UIVIew added as a subview in view Controller that i am trying to flip and replace it with some other view.

[UIView transitionFromView:self.testBlueTicket toView:self.testOrangeTicket duration:2 options:UIViewAnimationOptionTransitionFlipFromRight completion:^(BOOL finished) {
        
}];

The problem is that the whole viewcontroller is flipping and not just the particular view that i want to get flipped and replaced.

I have searched the documentation and have not been able to find any particular solutions. Any suggestions would be greatly appreciated.

Upvotes: 2

Views: 166

Answers (1)

DonMag
DonMag

Reputation: 77433

Using [UIView transitionFromView... animates the superview.

So, embed your testBlueTicket and testOrangeTicket views in a container view.

Here's a simple example:

@interface FlipViewController ()

@property (strong, nonatomic) UIView *testBlueTicket;
@property (strong, nonatomic) UIView *testOrangeTicket;
@property (strong, nonatomic) UIView *containerView;

@end

@implementation FlipViewController

- (void)viewDidLoad {
    
    _containerView = [UIView new];
    _testBlueTicket = [UIView new];
    _testOrangeTicket = [UIView new];
    
    _containerView.translatesAutoresizingMaskIntoConstraints = NO;
    _testBlueTicket.translatesAutoresizingMaskIntoConstraints = NO;
    _testOrangeTicket.translatesAutoresizingMaskIntoConstraints = NO;
    
    _containerView.backgroundColor = [UIColor systemYellowColor];
    _testBlueTicket.backgroundColor = [UIColor systemBlueColor];
    _testOrangeTicket.backgroundColor = [UIColor systemOrangeColor];
    
    // respect safe area
    UILayoutGuide *g = [self.view safeAreaLayoutGuide];
    
    [_containerView addSubview:_testOrangeTicket];
    [_containerView addSubview:_testBlueTicket];
    
    [self.view addSubview:_containerView];
    
    [NSLayoutConstraint activateConstraints:@[
        
        [_containerView.widthAnchor constraintEqualToConstant:200.0],
        [_containerView.heightAnchor constraintEqualToConstant:260.0],
        [_containerView.centerXAnchor constraintEqualToAnchor:g.centerXAnchor],
        [_containerView.centerYAnchor constraintEqualToAnchor:g.centerYAnchor],
        
        [_testBlueTicket.widthAnchor constraintEqualToAnchor:_containerView.widthAnchor multiplier:1.0],
        [_testBlueTicket.heightAnchor constraintEqualToAnchor:_containerView.heightAnchor multiplier:1.0],
        [_testBlueTicket.centerXAnchor constraintEqualToAnchor:_containerView.centerXAnchor],
        [_testBlueTicket.centerYAnchor constraintEqualToAnchor:_containerView.centerYAnchor],
        
        [_testOrangeTicket.widthAnchor constraintEqualToAnchor:_containerView.widthAnchor multiplier:1.0],
        [_testOrangeTicket.heightAnchor constraintEqualToAnchor:_containerView.heightAnchor multiplier:1.0],
        [_testOrangeTicket.centerXAnchor constraintEqualToAnchor:_containerView.centerXAnchor],
        [_testOrangeTicket.centerYAnchor constraintEqualToAnchor:_containerView.centerYAnchor],
        
    ]];
    
    _testOrangeTicket.hidden = YES;
    
    UITapGestureRecognizer *t = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(didTap)];
    [self.view addGestureRecognizer:t];
}

- (void)didTap {
    
    UIView *fromView = self.testBlueTicket.isHidden ? self.testOrangeTicket : self.testBlueTicket;
    UIView *toView = self.testBlueTicket.isHidden ? self.testBlueTicket : self.testOrangeTicket;

    [UIView transitionFromView:fromView
                        toView:toView
                      duration:2
                       options:UIViewAnimationOptionTransitionFlipFromRight | UIViewAnimationOptionShowHideTransitionViews
                    completion:^(BOOL finished) {
        
    }];
    
}

@end

Note that it is using UIViewAnimationOptionShowHideTransitionViews so the "ticket" views remain in the view hierarchy.

To see things more clearly, change some of the constraints on the ticket views (such as the multiplier: on the width and/or height constraints)... you'll then see the .systemYellow container view animating, with the ticket views embedded.

Upvotes: 2

Related Questions