UILabel 背景颜色泄漏到边框

Posted 2023-03-13

【中文标题】UILabel 背景颜色泄漏到边框

【英文标题】：UILabel Background Color Leaks to Border

【发布时间】：2015-04-11 00:00:18

【问题描述】：

我正在创建一个 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];

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

【问题讨论】：

"您知道如何解决吗？"好吧，你必须承认，到目前为止，你已经采取了简单的方法。您正在使用内置视图子类 (UILabel)，并且您让头脑简单的图层命令为您完成所有工作，并希望获得最好的结果。如果你想要一个圆圈中的数字，为什么不画一个圆圈中的数字？是的，它需要更多的代码，但现在您可以完全控制用户将看到的内容。

我承认，这是最简单的出路。我为什么要先努力尝试？如果用这种方法没有直接的方法来完成它，我会考虑另一种选择。

你看，我觉得画出来更直接。

【参考方案1】：

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

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

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

label.layer.masksToBounds = true

【参考方案2】：

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

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

替换：

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

有了这个：

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

【讨论】：

没有为我修复它。 :(你知道问题的根本原因是什么吗？

这不起作用！

【参考方案3】：

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

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

UILabel *label;

将此写入您项目的.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.

【参考方案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];

【参考方案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。

【参考方案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;