带有圆角和背景错误的 iOS UIButton

Posted 2023-02-24

【中文标题】带有圆角和背景错误的 iOS UIButton

【英文标题】：iOS UIButton with rounded corners and background bug

【发布时间】：2016-07-25 09:14:43

【问题描述】：

我发现了一个关于圆形 UIButton 的奇怪问题。

这是我创建此按钮的代码块。

let roundedButton = UIButton(type: .System)
roundedButton.frame = CGRectMake(100, 100, 100, 100)
roundedButton.backgroundColor = UIColor.blackColor()
roundedButton.layer.borderColor = UIColor.whiteColor().CGColor
roundedButton.layer.borderWidth = 3.0
roundedButton.layer.cornerRadius = roundedButton.frame.size.width/2
roundedButton.layer.masksToBounds = true
self.view.addSubview(roundedButton)

如您所见，有一个带有背景颜色、边框和圆角半径的 UIButton。它是全圆的。但在输出中，我得到了下一个外观：

您可以看到按钮外的 1px 边框，它是它的背景颜色（黑色）。似乎它的内边框（白色）不是从按钮的 edje 开始的。

你知道如何解决这个问题吗？

【问题讨论】：

您保持边框宽度 = 3，这就是显示白色圆圈的原因 ..make roundedButton.layer.borderWidth = 1.0

【参考方案1】：

改用 CAShapeLayer，它还可以增强性能：

    let roundedButton = UIButton(type: .Custom)
    roundedButton.frame = CGRectMake(100, 100, 100, 100)
    let _border = CAShapeLayer()
    _border.path = UIBezierPath(roundedRect: roundedButton.bounds, cornerRadius:roundedButton.frame.size.width/2).CGPath
    _border.frame = roundedButton.bounds
    _border.strokeColor = UIColor.whiteColor().CGColor
    _border.fillColor = UIColor.blackColor().CGColor
    _border.lineWidth = 3.0
    roundedButton.layer.addSublayer(_border)

    self.view.addSubview(roundedButton)

切记不要使用roundedButton的backgroundColor，使用CAShapeLayer的fillColor即可。

【参考方案2】：

在为图像添加边框时也会发生这种情况。我找不到直接解决它的方法，而是在我的图像后面添加了一个白色 UIView 以实现相同的外观。

在您的情况下，在按钮后面添加一个白色 UIView，具有更大的宽度和高度尺寸，以实现所需的边框宽度（在您的情况下，它将比按钮高 6 [3x2]，宽 6）。 然后，只需将边框半径应用于 UIView 和 UIButton 就可以了！

【参考方案3】：

我认为这是CALayer 的错误。

我会这样做：

let borderWidth: CGFloat = 3.0

let roundedButton = UIButton(type: .System)
roundedButton.frame = CGRectMake(100, 100, 100, 100)
roundedButton.layer.cornerRadius = roundedButton.frame.size.width / 2
roundedButton.layer.backgroundColor = UIColor.whiteColor().CGColor
roundedButton.layer.masksToBounds = true

let innerLayer = CALayer()
innerLayer.frame = CGRect(
  x: borderWidth,
  y: borderWidth,
  width: roundedButton.frame.width - borderWidth * 2,
  height: roundedButton.frame.height - borderWidth * 2
)
innerLayer.backgroundColor = UIColor.blackColor().CGColor
innerLayer.cornerRadius = innerLayer.frame.size.width / 2
roundedButton.layer.addSublayer(innerLayer)