2

I am trying to create a layer mask for a UIView which will server as a slide out panel. The effect I need for this a rounded bottom right corner that is inset about 50 pixels. So far, I've been able to achieve this effect by creating a UIView xib with a clear background color, and another smaller UIView (the subview) on top of it that is 50 px inset on the bottom and right sides. I would like to achieve this effect without using the smaller subview. In other words, create a mask that is inset 50 px from the bottom and right side with a round corner on the bottom right.

When I draw the mask on the subview now, it works in whatever screen orientation I start in, but when the device is rotated, I get really inconsistent results. In my subview class I have the following code:

- (void)drawRect:(CGRect)rect
{
    CAShapeLayer *maskLayer = [CAShapeLayer layer];
    CGPathRef path = [[UIBezierPath bezierPathWithRoundedRect:[_subView bounds]
                                           byRoundingCorners:UIRectCornerBottomRight
                                                  cornerRadii:(CGSize){150.0, 150.0}] CGPath];
    [maskLayer setPath:path];
    [_subView.layer setMask:maskLayer];
    CGPathRelease(path);
}

I'm not sure what the issue is, but it seems like it might be easier to deal with it if I could achieve this effect by using one UIView with a mask. Below is a screenshot with the subview. Obviously, I am a bit new to masking techniques.

The grey pattern shown in the image is the main view controller with the UIView from the xib on top. The transparency is achieved by setting the main view of the xib to have a clear background color.

enter image description here

EDITs Here is the view when opening in landscape. I set the background of the UIView to white to show that it is the sub view that doesn't render properly upon device rotation.

enter image description here

And when rotated, this is the result:

enter image description here

As already mentioned, since the main view is rendering properly, it seems like the better approach would be to create a mask that achieves a similar effect, not sure though, that's why I'm here!

I hope I have been clear enough. Can anyone help with this? Thanks!

Pheepster
  • 6,045
  • 6
  • 41
  • 75

2 Answers2

5

You shouldn't be creating or updating layers in drawRect:. The layoutSubviews method is an appropriate time for that. You can also reuse the mask. You also have some retain/release problems.

- (void)layoutSubviews {
    [super layoutSubviews];
    [self layoutMask];
}

- (void)layoutMask {
    CAShapeLayer *maskLayer = [self subviewMaskLayer];
    UIBezierPath *path =  [UIBezierPath bezierPathWithRoundedRect:_subView.bounds
        byRoundingCorners:UIRectCornerBottomRight cornerRadii:(CGSize){150.0, 150.0}];
    maskLayer.path = path.CGPath;
}

- (CAShapeLayer *)subviewMaskLayer {
    CAShapeLayer *mask = (CAShapeLayer *)_subView.layer.mask;
    if (mask == nil) {
        mask = [CAShapeLayer layer];
        _subView.layer.mask = mask;
    }
    return mask;
}
rob mayoff
  • 375,296
  • 67
  • 796
  • 848
  • Thanks for your help. Could you clarify my retain/release issue? It's my understanding that a CGPathRef should be released by calling CGPathRelease() when finihsed... – Pheepster Sep 15 '14 at 21:28
  • 1
    You don't own the `CGPath` so you don't get to release it. Look at the [*Memory Management Programming Guide for Core Foundation*](https://developer.apple.com/library/mac/documentation/corefoundation/Conceptual/CFMemoryMgmt/Concepts/Ownership.html#//apple_ref/doc/uid/20001148-SW2). – rob mayoff Sep 15 '14 at 21:38
1

Make sure your view is getting redrawn on rotation. You'll need to override this method:

 didRotateFromInterfaceOrientation

and then make sure that you're calling the setNeedsDisplay, and setNeedsUpdateConstratints.

This will ensure that the view will call your draw method above every time you rotate.

Brooks Hanes
  • 425
  • 2
  • 12