CAShapeLayer with UIRectCornerBottomLeft/Right makes my view disappear

Question

OK. I have done the Google search, the Stack search, the Wenderlich search (is that a meme yet?). I have tried every thing here on overflow and nothing is working.

I need a CALayer expert.

I have a tableView that I'm showing as a dropdown from the top of my app. It shows up fine and dandy until I try to round the bottom left/right corners. Every attempt I have tried to do this has resulted in my table just disappearing entirely. The methods still fire and I get my completions for the up/down methods. However the table just disappears.

Code with a tableView:

- (void)setupTopMenu {
    CGFloat screenWidth = [[UIScreen mainScreen] bounds].size.width;

    self.topMenuTable = [[UITableView alloc] initWithFrame:CGRectMake((screenWidth / 2) - ((screenWidth - topMenuSideBuffer) / 2), self.view.frame.origin.y + topBuffer, (screenWidth - topMenuSideBuffer), 0) style:UITableViewStylePlain];
    self.topMenuTable.backgroundColor = DARK_BLUE_NAVBAR_COLOR;
    self.topMenuTable.dataSource = self;
    self.topMenuTable.delegate = self;
    self.topMenuTable.scrollEnabled = YES;
    self.topMenuTable.separatorStyle = UITableViewCellSeparatorStyleSingleLine;
    self.topMenuTable.separatorColor = [UIColor blackColor];
    self.topMenuTable.tableFooterView = [[UIView alloc] initWithFrame:CGRectZero];
    self.topMenuTable.layer.borderColor = [UIColor blackColor].CGColor;
    self.topMenuTable.layer.borderWidth = 0.4f;

    UIBezierPath *maskPath;
    maskPath = [UIBezierPath bezierPathWithRoundedRect:self.topMenuTable.bounds byRoundingCorners:(UIRectCornerBottomLeft | UIRectCornerBottomRight) cornerRadii:CGSizeMake(5.0, 5.0)];

    CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
    maskLayer.frame = self.view.bounds;
    maskLayer.path = maskPath.CGPath;
    self.topMenuTable.layer.mask = maskLayer;

    [self.view addSubview:self.topMenuTable];
}

Code with just a view (I thought maybe it had something to do with the tableView but it behaves the same when I use a regular UIView)

- (void)setupTopMenu {
    CGFloat screenWidth = [[UIScreen mainScreen] bounds].size.width;

    self.topMenuView = [[UIView alloc] initWithFrame:CGRectMake((screenWidth / 2) - ((screenWidth - topMenuSideBuffer) / 2), self.view.frame.origin.y + topBuffer, (screenWidth - topMenuSideBuffer), 0)];
    self.topMenuView.backgroundColor = [UIColor redColor];
    self.topMenuView.layer.borderColor = [UIColor blackColor].CGColor;
    self.topMenuView.layer.borderWidth = 0.4f;

    UIBezierPath *maskPath;
    maskPath = [UIBezierPath bezierPathWithRoundedRect:self.topMenuView.bounds byRoundingCorners:(UIRectCornerBottomLeft | UIRectCornerBottomRight) cornerRadii:CGSizeMake(5.0, 5.0)];

    CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
    maskLayer.frame = self.view.bounds;
    maskLayer.path = maskPath.CGPath;
    self.topMenuView.layer.mask = maskLayer;

    [self.view addSubview:self.topMenuView];
}

Code I'm using to show the view(s):

- (void)showTopMenu {

    if (!isTopMenuDown) {
        [UIView animateWithDuration:0.45 animations:^ {
            //self.topMenuTable.frame = CGRectMake((self.screenWidth / 2) - (self.topMenuWidth / 2), self.view.bounds.origin.y + topBuffer, self.topMenuWidth, self.topMenuHeight);
            self.topMenuView.frame = CGRectMake((self.screenWidth / 2) - (self.topMenuWidth / 2), self.view.bounds.origin.y + topBuffer, self.topMenuWidth, self.topMenuHeight);
        } completion:^(BOOL finished) {

        }];
    } else {
        [UIView animateWithDuration:0.35 animations:^ {
            // self.topMenuTable.frame = CGRectMake((self.screenWidth / 2) - (self.topMenuWidth /2), self.view.bounds.origin.y + topBuffer, self.topMenuWidth, 0);
            self.topMenuView.frame = CGRectMake((self.screenWidth / 2) - (self.topMenuWidth /2), self.view.bounds.origin.y + topBuffer, self.topMenuWidth, 0);
        } completion:^ (BOOL finished) {

        }];
    }

    isTopMenuDown =! isTopMenuDown;
}

NOTE: I have also tried the idea of adding the mask to the layer like in Round some corners of UIView and round the view’s layer’s border too

Same result.

If I take out the Layer code the views show up perfectly but using the layer code makes them disappear.

Is there something about the way I'm showing the view that I can't see, that is making it disappear?

Thanks for the help.

Answer 1

I thought maybe it had something to do with the tableView but it behaves the same when I use a regular UIView

Exactly so - because it has nothing to do with the table view. It has to do with the fact that you don't understand what a mask is.

A mask layer blocks out parts of its layer depending on the transparency of the mask layer. You have done nothing about distinguishing opaque parts of the mask from transparent parts. Your whole mask is transparent. Therefore, all of the layer - meaning, all of the view - is blocked out (invisible).

It seems to me you are describing something like this (I've exaggerated the rounding of the corners, just for display purposes):

That is a rectangle with a mask on it. The mask consists of a filled rounded rectangle path. Thus, the interior of the path is opaque, and appears; the exterior is transparent, and does not appear.

Just FYI, here's how I created the mask and added it (I used an image and contents, but you are certainly free to use a shape layer if you want to):

UIView* viewToMask = self.view.subviews[0];
UIGraphicsBeginImageContextWithOptions(viewToMask.bounds.size, NO, 0);
UIBezierPath* round = [UIBezierPath bezierPathWithRoundedRect:viewToMask.bounds byRoundingCorners: (UIRectCornerBottomLeft | UIRectCornerBottomRight) cornerRadii:CGSizeMake(50,50)];
[round fill];
UIImage* result = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
CALayer* mask = [CALayer new];
mask.frame = viewToMask.bounds;
mask.contents = (id)result.CGImage;
viewToMask.layer.mask = mask;