ios - 带有 UIRectCornerBottomLeft/Right 的 CAShapeLayer 使我的 View 消失

Question

好的。我已经完成了 Google 搜索、Stack 搜索、Wenderlich 搜索(那是模因吗？)。我已经在溢出时尝试了这里的所有东西，但没有任何效果。

我需要一个 CALayer 专家。

我有一个 tableView，我将其显示为应用顶部的下拉菜单。在我尝试绕左/右下角之前，它显示得很好而且花花公子。我尝试这样做的每一次尝试都导致我的 table 完全消失了。这些方法仍然有效，我完成了上/下方法。然而，表格就这样消失了。

带有 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];
}

只有一个 View 的代码(我认为它可能与 tableView 有关，但当我使用常规 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];
}

我用来显示 View 的代码:

- (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;
}

注意:我也尝试过像 Round some corners of UIView and round the view’s layer’s border too 中那样将蒙版添加到图层的想法。

同样的结果。

如果我去掉图层代码， View 会完美显示，但使用图层代码会使它们消失。

我显示 View 的方式是否存在某些我看不到的东西，导致它消失了？

感谢您的帮助。

Answer 1

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

确实如此 - 因为它与 TableView 无关。这与你不了解什么是面具有关。

mask 层根据 mask 层的透明度 遮挡部分图层。您没有采取任何措施来区分蒙版的不透明部分和透明部分。你的整个面具是透明的。因此，层的所有 - 即所有 View - 都被遮挡(不可见)。

在我看来你在描述这样的事情(我夸大了角落的圆度，只是为了展示目的):

那是一个上面有面具的矩形。掩码由一个填充圆角矩形路径组成。因此，路径的内部是不透明的，并且出现；外表是透明的，不会出现。

仅供引用，下面是我创建和添加 mask 的方式(我使用了图像和内容，但如果您愿意，您当然可以自由使用形状图层):

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;