UILabel 背景颜色泄漏到边框

Question

我正在创建一个 UILabel，我使用以下代码为其设置背景颜色和圆角半径：

self.scoreLabel.backgroundColor = [UIColor DISRed];// custom red`
self.scoreLabel.layer.masksToBounds = YES;
self.scoreLabel.layer.cornerRadius = self.scoreLabel.frame.size.width/2;
self.scoreLabel.layer.borderWidth = 8.0;
self.scoreLabel.layer.borderColor = [[UIColor DISNavy] CGColor];

但是，背景的颜色似乎泄漏到了边框的边缘（见图）。任何想法为什么？关于如何修复它的任何想法？

Answer 1

我也遇到了同样的问题。这是一个愚蠢的错误。如果是cornerRadius，我总是忘记打勾clipToBounds。

所以，只需在 Storyboard 中勾选 UILabel 的 Clip to Bounds 即可解决我的问题。

是的，我们也需要保留以下代码：

label.layer.masksToBounds = true

Answer 2

我遇到了 UIButton 的背景颜色在其边框边缘泄漏的相同问题。

不要在 UIButton 上设置 UIButton 背景颜色，而是在 UIButton 的图层上设置它。

替换：

self.scoreLabel.backgroundColor = [UIColor DISRed];// custom red`

有了这个：

self.scoreLabel.layer.backgroundColor = [[UIColor DISRed] CGColor];// custom red`

Answer 3

我创建了自己的 UILabel，背景颜色似乎没有泄漏。

1. 将此写入您项目的.h 文件中。

   UILabel *label;

2. 将此写入您项目的.m 文件中。

label=[[UILabel alloc]initWithFrame:CGRectMake(100, 300, 100, 100)];//Set frame of label in your viewcontroller.
    [label setBackgroundColor:[UIColor redColor]];//Set background color of label.
    [label setText:@"Label"];//Set text in label.
    [label setTextColor:[UIColor blackColor]];//Set text color in label.
    [label setTextAlignment:NSTextAlignmentCenter];//Set text alignment in label.
    [label.layer setCornerRadius:50.0];//Set corner radius of label to change the shape.
    [label.layer setBorderWidth:8.0f];//Set border width of label.
    [label setClipsToBounds:YES];//Set its to YES for Corner radius to work.
    [label.layer setBorderColor:[UIColor greenColor].CGColor];//Set Border color.
    [self.view addSubview:label];//Add it to the view of your choice.

Answer 4

这可能是抗锯齿问题。您可以通过在拐角处添加贝塞尔路径来更好地修复它。

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];

Answer 5

对于那些仍然面临边框颜色泄漏问题的人： 浏览下面的代码，请注意您需要根据您的要求设置框架和边框宽度，我将位置设置为视图的中心

 let badgeSize: CGFloat = 10
 let redBadge = UIView(frame: CGRect(x: view.center.x, y:view.center.y, width: badgeSize, height: badgeSize))
 redBadge.layer.borderColor = UIColor.white.cgColor
 redBadge.layer.borderWidth = 2
 redBadge.backgroundColor = .red
 redBadge.layer.cornerRadius = badgeSize * 0.5
 redBadge.clipsToBounds = true
 redBadge.layer.masksToBounds = true
 redBadge.maskLayerOnView(radius: badgeSize * 0.5)
 view.addSubview(redBadge)

其次，我们需要在 UIView 上写一个扩展

extension UIView{
 func maskLayerOnView(radius: CGFloat){
   let maskLayer = CAShapeLayer()
   maskLayer.path = UIBezierPath(roundedRect: self.bounds,
                    byRoundingCorners: [.allCorners], 
                    cornerRadii: CGSize(width: radius, 
                    height: radius)).cgPath
   self.layer.mask = maskLayer
 }
}

这段代码 sn-p 删除了边框颜色分离，可以在任何类型的视图上复制此行为。

详细解释请见this article。

Answer 6

嗯，很多答案...

我发现问题仍然存在，只要使用 UIViews 背景颜色而不是 UIViews 'layer' 的背景颜色。此外，当然还需要启用屏蔽功能。

对于 UICollectionViewCell 子类，代码为：

- (void)prepare
{
    self.contentView.layer.backgroundColor = UIColor.redColor.CGColor;
    self.contentView.layer.cornerRadius = 25.0;
    self.contentView.layer.borderColor = UIColor.blackColor.CGColor;
    self.contentView.layer.borderWidth = 1.0;
    //Enable to optimize image views: self.contentView.layer.shouldRasterize = YES;
    //Enable to optimize image views: self.contentView.layer.rasterizationScale = UIScreen.mainScreen.scale;
    self.contentView.layer.masksToBounds = YES;
    self.contentView.clipsToBounds = YES;
}

为了使背景颜色的设置更舒适，更不容易出错，有些人可以添加：

/*
 setBackgroundColor:

 */
- (void)setBackgroundColor:(UIColor *)p_BackgroundColor
{
    super.backgroundColor = nil;
    self.contentView.layer.backgroundColor = p_BackgroundColor.CGColor;

    self.contentView.layer.masksToBounds = YES;
    self.contentView.clipsToBounds = YES;
}