Properly masking CALayers

Question

I am using the TapkuLibrary's otherwise excellent TKCalendarDayEventView and trying to selectively round one of the corners in the view as StuDev demonstrates here. Unfortunately, applying StuDev's code snippet results in the EventView disappearing entirely from its containing TKCalendarDayTimelineView. I am adding this code snippet underneath the current code in the

+ (id)eventViewWithFrame:(CGRect)frame id:(NSNumber *)id startDate:(NSDate *)startDate endDate:(NSDate *)endDate title:(NSString *)title location:(NSString *)location;

method. I have commented out code that otherwise sets the border width, color, or radius in the code. I have made sure that TKCalendarDayEventView doesn't have any superlayers, since the apple docs warn against adding masks to layers with superlayers:

When setting the mask to a new layer, the new layer’s superlayer must first be set to nil, otherwise the behavior is undefined.

I have also tried playing around with the backgroundColor and fillColor properties of the maskLayer. I don't see anything in the TKCalendarDayEventView that might stop this mask from being correctly applied. What could I be doing wrong?

I have just pushed a codefile out as a demonstration of what is happnening [here](https://github.com/aashidham/TapkuCalDemo). [The offending file is here](https://github.com/aashidham/TapkuCalDemo/blob/master/TKCalendarDayEventView.m), beginning in line 76 and ending in line 95. — Coder, Jan 02 '12 at 00:54
I downloaded the test code that you posted as a comment under your question. Commenting out the masking code (lines 76-96 in TKCalendarDayEventView.m) doesn't appear to have any effect on the view, and so it would appear the problem could lie elsewhere. What made you suspect this code was causing the problem? — Stuart, Jan 02 '12 at 17:03
Hey StuDev! Thanks for your help! :) The reason you are not seeing a difference in views is because the timeline application is displaying events on Jan 2 2012 (today), of which there are none. The difference in the views is seen if you press the back arrow, to go to Jan 1, 2012, to see a difference. I have also pushed a commit to the repo so that Jan 1 2012 is displayed by default. Pull that commit, or go to Jan 1 2012, and you will see what I mean. — Coder, Jan 02 '12 at 20:57

score 1 · Accepted Answer · answered Jan 02 '12 at 21:55

If you put a breakpoint in your eventViewWithFrame:id:startDate:endDate:title:location: method, you will see that when you create your event view you are setting the frame to CGRectZero. The code snippet that then sets the rounded corner mask is using CGRectZero as the mask layer's frame.

Probably the simplest way to deal with this would be to override TKCalendarDayEventView's setFrame: method like so:

- (void)setFrame:(CGRect)newFrame
{
    if (!CGRectEqualToRect([super frame], newFrame)) {
        [super setFrame:newFrame];

        // Change the view's mask layer to fit the new frame.
        UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:self.bounds 
                                                       byRoundingCorners:UIRectCornerTopLeft
                                                             cornerRadii:CGSizeMake(15.0, 15.0)];
        CAShapeLayer *maskLayer = [CAShapeLayer layer];
        maskLayer.frame = self.bounds;
        maskLayer.path = maskPath.CGPath;
        self.layer.mask = maskLayer;
    }
}

This way, every time you change the frame of the view the mask automatically adjusts.

Properly masking CALayers

1 Answers1