Why despite using `insertSubview:belowSubview:` does my view still appear on top of the other one?

Question

On my Storyboard I have added a tap icon as a UIImageView, and in code I make it pulsate and add a "ripple" effect by creating circles view and enlarging and fading them. I add these circle views in viewDidLoad with insertSubview:belowSubview: but for whatever reason they still appear on top. Why is this?

Here's the code I'm using:

// For the tap animation at the top
UIView *topTapRipple1 = [[UIView alloc] initWithFrame:(CGRectMake(157, 50, 13.0, 13.0))];
topTapRipple1.backgroundColor = [UIColor clearColor];
topTapRipple1.layer.cornerRadius = topTapRipple1.bounds.size.height/2;
topTapRipple1.layer.borderColor = [UIColor colorWithRed:0.886 green:0.886 blue:0.886 alpha:1].CGColor;
topTapRipple1.layer.borderWidth = 1.0;
[self.view insertSubview:topTapRipple1 belowSubview:self.middle];

UIView *topTapRipple2 = [[UIView alloc] initWithFrame:(CGRectMake(157, 50, 13.0, 13.0))];
topTapRipple2.backgroundColor = [UIColor clearColor];
topTapRipple2.layer.cornerRadius = topTapRipple2.bounds.size.height/2;
topTapRipple2.layer.borderColor = [UIColor colorWithRed:0.886 green:0.886 blue:0.886 alpha:1].CGColor;
topTapRipple2.layer.borderWidth = 1.0;
[self.view insertSubview:topTapRipple2 belowSubview:self.middle];

So as you can see I add the views below my self.middle view which is the UImageView.

I want the ripples to start from behind it, but it still looks like this:

Where you can see the circles on top of the image, when the image looks like this:

Example project containing the issue: http://cl.ly/2v2G053t3t0z

Answer 1

The problem is that you're adding topTapRipple1 and topTapRipple2 to self.view instead of self.topView (which is self.middle's superview). Change that, and change the origin of those to (73,30), and it will appear from behind as you want.