How to properly position a CATransformLayer in its super layer

Question

I have created on a UIView named containerView which spans the whole screen.On this view a CATransormLayer and a UIView have to be added that have the following dimensions.

CATransformlayer : doubleSidedLayer  
Height = containerView.frame.size.height  
Width = containerView.frame.size.width  

UIView : stripView
Height = containerView.frame.size.height  
Width = 20;

The x position for both of them is specified by the variable positionX. Theoritcally for both DoubleSidedLayer and stripView must overlapp. But they are not.

Here is the code.

CGRect containerFrame =CGRectMake(0,0,self.view.frame.size.height,self.view.frame.size.width);
NSLog(@"container frame = %f %f %f %f",containerFrame.origin.x,containerFrame.origin.y,containerFrame.size.width,containerFrame.size.height);
UIView *containerView = [[UIView alloc]initWithFrame:containerFrame];
[containerView setBackgroundColor:[UIColor grayColor]];

float positionX = containerFrame.size.width/4;//This is the position where the stripView and doubleSidedLayer must be placed

//Configuration of CATransformLayer.
CGRect doubleLayerFrame = CGRectMake(positionX,0,containerFrame.size.width/2,containerFrame.size.height);
CATransformLayer *doubleSidedLayer  = [CATransformLayer layer];
[doubleSidedLayer setFrame:doubleLayerFrame];

NSLog(@"DoubleSidedLayer frame = %f %f %f %f",doubleSidedLayer.frame.origin.x,doubleSidedLayer.frame.origin.y,doubleSidedLayer.frame.size.width,doubleSidedLayer.frame.size.height);
NSLog(@"DoubleSidedLayer bounds = %f %f %f %f",doubleSidedLayer.bounds.origin.x,doubleSidedLayer.bounds.origin.y,doubleSidedLayer.bounds.size.width,doubleSidedLayer.bounds.size.height);
NSLog(@"Anchor Points = %f %f",doubleSidedLayer.anchorPoint.x, doubleSidedLayer.anchorPoint.y);
NSLog(@"position = %f %f",doubleSidedLayer.position.x,doubleSidedLayer.position.y);

//Configuring top layer
CALayer *topLayer = [[CALayer alloc]init];
[topLayer setFrame:doubleLayerFrame];
[topLayer setContents:(id)[UIImage imageNamed:@"1.png"].CGImage];
[topLayer setZPosition:2];
[topLayer setDoubleSided:NO];

//Adding the layers
[doubleSidedLayer addSublayer:topLayer];
[containerView.layer addSublayer:doubleSidedLayer];

//Adding the stripView
UIView *stripView = [[UIView alloc]initWithFrame:CGRectMake(positionX, 0, 20,containerView.frame.size.height)];
[stripView setBackgroundColor:[UIColor cyanColor]];
[containerView addSubview:stripView];
NSLog(@"Strip frame = %f %f %f %f",stripView.frame.origin.x,stripView.frame.origin.y,stripView.frame.size.width,stripView.frame.size.height);

//Adding the containerView to the main view
[self.view addSubview:containerView];

From the log statements you can see the frames of doubleSidedLayer and stripView.

doubleSidedLayer frame = 120.000000 0.000000 240.000000 300.000000   
strip frame = 120.000000 0.000000 20.000000 300.000000

But both of them do not overlap. Here is the screenshot.

Note : I am working in landscape orientation.

Answer 1

I'm wonder if there's an easier way to achieve what you're looking for. For example, if I have some view where I want to "flip" an image from one image to another, I use something like the following:

[UIView transitionWithView:self.imageView
                  duration:0.5
                   options:UIViewAnimationOptionTransitionFlipFromLeft | UIViewAnimationOptionCurveEaseInOut
                animations:^{
                    if (self.flipped)
                        self.imageView.image = [UIImage imageNamed:@"front.png"];
                    else
                        self.imageView.image = [UIImage imageNamed:@"back.png"];

                    self.flipped = !self.flipped;

                }
                completion:nil];

I'm doing this with an imageview, but the concept works the same for whatever UIView controls you use. If you have some container view and you want to add/remove or show/hide controls in this animations block, you can do that, too. Just use the container view for the first parameter of the transitionWithView.

Answer 2

I could figure out my mistake. There was problem in configuration of topLayer. This should be fit within the bounds of doubleSidedLayer. So I changed [topLayer setFrame:doubleLayerFrame] to [topLayer setFrame:doubleSidedLayer.bounds]. This fixed my issue.