Flip SubView on UIScrollView not working

Question

I'm coding an iPhone TabBar Project with UiNavigation, the first view contain UIScrollView and the scrollview contain views every subview contain imageview,anUiImage and a UiButton follows is the function that build the first screen

//*******************************************************
//*            Build the main screen                    *
//*******************************************************
-(void) buildScreen{
    sing.viewsArray = [[NSMutableArray alloc]init];

    int Vve = 10;
    int Vho = 10;
    int wi = 95;
    int hi = 95;
    int ArrayIndex = 0;
    for (int i = 0; i < 5; i++) {

        for (int j = 0; j < 3; j++) {

            staticView = [[UIView alloc] initWithFrame:CGRectMake(Vve, Vho, 100, 100)];
            [staticView setTag:ArrayIndex];

            staticImage = [[UIImageView alloc] initWithImage:[UIImage imageNamed:[sing.stdPicArray objectAtIndex:ArrayIndex]]];
            [staticImage setFrame:CGRectMake(0, 0, wi, hi)];
            [staticView addSubview:staticImage];

            viewButton = [UIButton buttonWithType:UIButtonTypeCustom];
            viewButton.frame = CGRectMake(0, 0, wi, hi);
            [viewButton addTarget:self action:@selector(buttonClick:) forControlEvents:UIControlEventTouchUpInside];
            [viewButton setTag:ArrayIndex];
            [sing.buttonsArray addObject:viewButton];

            [staticView addSubview:viewButton];
            [sing.viewsArray addObject:staticView];

            [MainScroll addSubview:[sing.viewsArray objectAtIndex:ArrayIndex]];

            Vve += 100;
            ArrayIndex++;
        }
        Vve = 10;
        Vho += 100;
    }
}

When I click on the UiButton I want to add another UIView to the UIScrollView and make a "UIViewAnimationTransitionFlipFromLeft" when the view is added to the scroll view tried the following code

-(void)animateFlip{    
    [UIView transitionWithView:flipViewBack
                      duration:1.0
                       options:UIViewAnimationTransitionFlipFromLeft
                    animations:^{ [self.view addSubview:flipViewBack]; }
                    completion:^(BOOL f){ }];
}

didn't work just added the flipViewBack

-(void)animateFlip{     
    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDuration:1.0];
    [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft        
                           forView:self.flipViewFront 
                             cache:YES];
    [MainScroll addSubview:flipViewFront];
    [UIView setAnimationDidStopSelector:@selector(flipAnimationDidStop:finished:context:)];
    [UIView setAnimationDelegate:self];
    [UIView commitAnimations];
}

didn't work just like the other one, the next code did flip the main view with the view I wanted, but it didn't flip only the the view I want

-(void)animateFlip{
    [UIView beginAnimations:nil 
                    context:nil];
    [UIView setAnimationDuration:1.0];

    [UIView transitionFromView:self.view 
                        toView:flipViewBack 
                      duration:2 
                       options:UIViewAnimationOptionTransitionFlipFromBottom 
                    completion:NULL];
    [UIView setAnimationDidStopSelector:@selector(flipAnimationDidStop:finished:context:)];
    [UIView setAnimationDelegate:self];

    //set transformation

    [UIView commitAnimations];

}

Does any body know how to do it' I looked everywhere and all the code I found didn't work for me

Thanks

I tried another option suggested in this link iPhone subview flip between 2 views and it didn't work for me

this is the function that I use on click in the last 3 lines im adding to the flipView (container) the flipViewFront view then I add the flipView to the mainScroll view and then I go to execute the animation in the animateFlip that I copied from your sample

    //*******************************************************
//*            Click on the picture as button           *
//*******************************************************
-(void) buttonClick:(id) sender{
    UIButton *button = (UIButton *)sender;
    int row = [button superview].tag;
    NSLog(@"Button pressed tag: %i",row);
    self.flipView = [[UIView alloc]initWithFrame:CGRectMake(65, 130, 190, 190)];
    self.flipView.backgroundColor = [UIColor clearColor];

    self.flipViewBack = [[UIView alloc]initWithFrame:CGRectMake(65, 130, 190, 190)];

    self.flipViewFront = [[UIView alloc]initWithFrame:CGRectMake(65, 130, 190, 190)];
    self.flipViewFront.backgroundColor = [UIColor whiteColor];

    self.flipViewImage = [UIImage imageNamed:[sing.stdPicArray objectAtIndex:row]];
    self.filpImage = [[UIImageView alloc]initWithImage:self.flipViewImage];
    [self.flipViewBack addSubview:self.filpImage];

    self.flipCloseButton = [UIButton buttonWithType:UIButtonTypeCustom];
    [self.flipCloseButton setFrame:CGRectMake(0, 0, 24, 24)];
    [self.flipCloseButton setImage:[UIImage imageNamed:@"close_button.png"] forState:UIControlStateNormal];
    [self.flipCloseButton addTarget:self action:@selector(closwFlip:) forControlEvents:UIControlEventTouchUpInside];
    [self.flipViewBack addSubview:flipCloseButton];

    self.flipOkButton = [[UIButton alloc]initWithFrame:CGRectMake(30, 0, 190, 190)];
    [self.flipCloseButton addTarget:self action:@selector(continueTo:) forControlEvents:UIControlEventTouchUpInside];
    [self.flipViewBack addSubview:flipOkButton];
    [flipView addSubview:flipViewFront];
    [MainScroll addSubview:flipView];
    [self animateFlip];
}

found the problem, but not the answer, if it works directly from the ViewDidLoad it and the first view is on screen all is well and the flip works' if I change it so that the want to add a view and flip it in one event it shows me the second(flipped) view without the flip

Answer 1

Your problems seems to be that you are trying to animate the flip on the view before it is added to the view hierarchy.

Instead you should add the back view to a common container view (that later will contain the front view) and then flip the container view while adding the front and removing the back, like this:

// Container view is a view that is already added to your view hierarchy.
// It contains the back view. The front view will be added to it.
[UIView transitionWithView:containerView
                  duration:1.0
                   options:UIViewAnimationOptionTransitionFlipFromLeft
                animations:^{
                    [backView removeFromSuperview]; // This is already added to the container
                    [containerView addSubview:frontView]; // Not yet added ...
                }
                completion:NULL];

Update

This is all the code I wrote when answering this question. It works for me. If it still doesn't animate for you then you probably haven\t set up your view hierarchy the same way.

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

    containerView = [[UIView alloc] initWithFrame:CGRectMake(30, 30, 100, 100)];
    [self.view addSubview:containerView];

    frontView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
    [frontView setBackgroundColor:[UIColor orangeColor]];
    backView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
    [backView setBackgroundColor:[UIColor redColor]];
    [containerView addSubview:backView];

    UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self
                                                                          action:@selector(flip)];
    [self.view addGestureRecognizer:tap];
}

- (void)flip {
    [UIView transitionWithView:containerView
                      duration:1.0
                       options:UIViewAnimationOptionTransitionFlipFromLeft
                    animations:^{
                        [backView removeFromSuperview];
                        [containerView addSubview:frontView];
                    }
                    completion:NULL];
}