UIView带圆角和边框的边缘颜色错误。

Question

我有一个UIView和两个子视图。子视图有圆角和边框值。我的问题是圆角边框的外边缘包含了子视图背景颜色的细线条。我一定是漏掉了什么？

UIView *outerView = [[UIView alloc] initWithFrame:CGRectMake(0, 50, 320, 320)];
[self.view addSubview:outerView];
outerView.backgroundColor = [UIColor whiteColor];

UIView *innerView1 = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 160, 320)];
[outerView addSubview:innerView1];
innerView1.backgroundColor = [UIColor blackColor];
innerView1.layer.borderWidth = 20;
innerView1.layer.borderColor = [UIColor whiteColor].CGColor;
innerView1.layer.cornerRadius = 20;
//innerView1.layer.masksToBounds = YES;

UIView *innerView2 = [[UIView alloc] initWithFrame:CGRectMake(160, 0, 160, 320)];
[outerView addSubview:innerView2];
innerView2.backgroundColor = [UIColor blackColor];
innerView2.layer.borderWidth = 20;
innerView2.layer.borderColor = [UIColor whiteColor].CGColor;
innerView2.layer.cornerRadius = 20;
//innerView2.layer.masksToBounds = NO;
//innerView2.clipsToBounds = YES;
//innerView2.layer.shouldRasterize = YES;

- venkat557

---

最好附上一个相关的截图来展示问题。 - rmaddy

我用绿色背景运行了你的代码，得到的结果是 -> http://puu.sh/89bjO/6e551e085e.png ，你得到的也一样吗？我没有将你的问题与我的结果匹配起来。 - Michael King

我现在看到你的错误了。我正在调整代码，看看是什么原因导致这个问题。 - Michael King

感谢Mike King提供的图片。Stack Overflow不允许我添加图片，看起来我需要更高的分数才能发布它。 - venkat557

@venkat557 好的，我发布了我的临时解决方案。 - user3386109

Answer 1

为解决该问题，请将子视图的背景颜色设置为“clearColor”，然后使用自定义视图类的“drawRect”方法绘制背景颜色。以下是视图类的代码。

@interface WorkAroundView : UIView
@end

@implementation WorkAroundView
- (void)drawRect:(CGRect)rect
{
    CGFloat margin = self.layer.borderWidth;
    CGRect  background;
    background.origin.x = margin;
    background.origin.y = margin;
    background.size.width  = self.bounds.size.width  - 2 * margin;
    background.size.height = self.bounds.size.height - 2 * margin;

    CGContextRef context = UIGraphicsGetCurrentContext();
    [[UIColor blackColor] set];
    CGContextFillRect( context, background );
}
@end

以下是如何使用自定义视图类。与您发布的内容相比，唯一真正的变化是子视图的背景颜色设置为clearColor。

UIView *outerView = [[UIView alloc] initWithFrame:CGRectMake(360, 200, 320, 320)];
[self.view addSubview:outerView];
outerView.backgroundColor = [UIColor whiteColor];

WorkAroundView *innerView1 = [[WorkAroundView alloc] initWithFrame:CGRectMake(0, 0, 160, 320)];
innerView1.backgroundColor = [UIColor clearColor];
innerView1.layer.borderWidth = 20;
innerView1.layer.borderColor = [UIColor whiteColor].CGColor;
innerView1.layer.cornerRadius = 20;
[outerView addSubview:innerView1];

WorkAroundView *innerView2 = [[WorkAroundView alloc] initWithFrame:CGRectMake(160, 0, 160, 320)];
innerView2.backgroundColor = [UIColor clearColor];
innerView2.layer.borderWidth = 20;
innerView2.layer.borderColor = [UIColor whiteColor].CGColor;
innerView2.layer.cornerRadius = 20;
[outerView addSubview:innerView2];

- user3386109

---

这是一个很棒的答案。 - Legolas

Answer 2

在角落周围添加贝塞尔路径。

CAShapeLayer *subLayer = [[CAShapeLayer alloc] init];
[subLayer setFillColor:[UIColor clearColor].CGColor];
[subLayer setStrokeColor:[UIColor whiteColor].CGColor];
[subLayer setLineWidth:1.0];
[subLayer setPath:[UIBezierPath bezierPathWithRoundedRect:imageView.bounds cornerRadius:imageView.layer.cornerRadius].CGPath];
[imageView.layer addSublayer:subLayer];

- user3693546