带有圆角和边框的 UIView 边缘颜色错误答案

【问题标题】：UIView with rounded corner and border has wrong edge color带有圆角和边框的 UIView 边缘颜色错误
【发布时间】：2014-04-15 01:37:34
【问题描述】：

我有一个 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;

【问题讨论】：

包含显示问题的相关屏幕截图会有所帮助。
我在绿色背景下运行了你的代码，这就是我得到的 -> puu.sh/89bjO/6e551e085e.png 是你得到的吗？我并没有真正将您的问题与我所得到的相匹配
我现在看到了您的错误。我正在弄乱代码，看看是什么原因造成的。
对我来说看起来像一个错误，我看不出有什么简单的方法可以绕过它。您对笨拙的解决方法感兴趣吗？
感谢 Mike King 的照片。堆栈溢出不允许我添加图片，看起来我需要更多分数才能发布。

标签： ios objective-c cocoa-touch uiview

【解决方案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];

【讨论】：

这是一个很好的答案

【解决方案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];

【讨论】：