Two UIView with same anchor point

Question

I have been trying the below code, to intersect two UIView with anchorPoint (1,0).

UIView *v=[[UIView alloc] initWithFrame:CGRectMake(50,50, 100, 100)];
v.backgroundColor=[UIColor redColor];
v.layer.anchorPoint=CGPointMake(1,0);

UIView *v2=[[UIView alloc] initWithFrame:CGRectMake(50,50,200,300)];
v2.backgroundColor=[UIColor greenColor];
v2.layer.anchorPoint=CGPointMake(1, 0);

[self.view addSubview:v2];
[self.view addSubview:v];

The output that I have with this code is as shown below.

I looking of output like red view overlaps green view and both of them having same anchor point, as show below.

Answer 1

It might help to describe what is happening in your example:

You are putting two rectangles on the screen of an exact size, in an exact location (50, 50) (relative to their origins in their top left corners) They both have anchor points which by default are in their centres. Imagine putting a pin in these centre points. Now you say you actually want the pins in the top right corner not the centre.

One of two things will happen, either

1) The rectangles will stay stationary and the pins will move themselves to the top right corners red:(150, 50) green:(250, 50), which isn't what you want.

or

2) The pins will stay stationary and the rectangles will move themselves until their top right corners are where the pins are red pin:(100, 100) green pin:(150, 200), which also isn't what you want!

The second option is what actually happens.

According to the docs the layer.position is relative to the layer.anchorPoint, so you should try setting the anchorPoint to the top right corners and then set the position of both rectangles layers to the exact position you want. e.g.

UIView *v=[[UIView alloc] initWithFrame:CGRectMake(50,50, 100, 100)];
v.backgroundColor=[UIColor redColor];
v.layer.anchorPoint=CGPointMake(1,0);
v.layer.position = CGPointMake(200, 50);

UIView *v2=[[UIView alloc] initWithFrame:CGRectMake(50,50,200,300)];
v2.backgroundColor=[UIColor greenColor];
v2.layer.anchorPoint=CGPointMake(1, 0);
v2.layer.position = CGPointMake(200, 50);

[self.view addSubview:v2];
[self.view addSubview:v];

Just for fun: here is an animation to show how the rectangles get from their initial locations in initWithFrame to their final positions, relative to the anchor points in their centres.

UIView *v=[[UIView alloc] initWithFrame:CGRectMake(50,50, 100, 100)];
v.backgroundColor=[UIColor redColor];

UIView *v2=[[UIView alloc] initWithFrame:CGRectMake(50,50,200,300)];
v2.backgroundColor=[UIColor greenColor];

[self.view addSubview:v2];
[self.view addSubview:v];   

UIView *ap=[[UIView alloc] initWithFrame:CGRectMake(0,0, 10, 10)];
ap.backgroundColor=[UIColor blackColor];
ap.center = v.layer.position;

UIView *ap2=[[UIView alloc] initWithFrame:CGRectMake(0,0, 10, 10)];
ap2.backgroundColor=[UIColor blackColor];
ap2.center = v2.layer.position;

[self.view addSubview:ap]; 
[self.view addSubview:ap2];   

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"anchorPoint"];
animation.duration = 2.0;
animation.toValue = [NSValue valueWithCGPoint:CGPointMake(1,0)];
animation.autoreverses = YES;
animation.repeatCount = 10;
[v.layer addAnimation:animation forKey:@"anchorPoint"];
[v2.layer addAnimation:animation forKey:@"anchorPoint"];