Question

我已经在Sketch中设计了屏幕：

有两个按钮。现在我在Xcode中设计这样的按钮，我就是这样设置UIButton的角半径：

layer.cornerRadius = 30
clipsToBounds = true

但结果我有一些奇怪的事情：

如果按钮的左右两侧，您可以在中心看到一些角落。我该怎么办？

Answer 1

要在此类按钮上生成圆角，如果将cornerRadius值设置为30，则假设按钮的高度设置为60。

在所有设备上可能不是这样，具体取决于您处理布局的方式。看到您的图像，看起来按钮的高度略低于您设计的按钮。

两个选项：

使用自动布局并在按钮上添加“固定高度”约束，值为60，因此您的按钮的高度始终为60磅。
实施UIButton子类，并在layoutSubviews方法中，将cornerRadius设置为按钮bounds的一半高度。这样，只要系统重新绘制按钮，角半径就会适当更新。

Answer 2

创建一个自定义UIButton类并将所有所需按钮设置为该类，这样您就不需要在每个UIViewController类中再添加任何代码。

自定义UIButton类应如下所示：

import UIKit

class RoundCornerButton: UIButton {

   override func drawRect(rect: CGRect) {
       // Drawing code
       self.clipsToBounds = true
       self.layer.cornerRadius = self.frame.size.width / 2
   }

}

Answer 3

现在，您的按钮图层的大小与草图不同在layoutSubviews之后，将圆角半径设置为图层高度的一半。

override func layoutSubviews() {
  super.layoutSubviews()
  layer.cornerRadius = layer.bounds.height / 2.0
}

Answer 4

如果要多次使用，不是在每个控制器中编写代码，而是可以使用下面的代码进行扩展以制作圆形按钮，视图。您可以在其中传递cornerRadius，borderWidth和UIColor。

import UIKit

extension UIView
{
    func makeCircular(cornerRadius: CGFloat, borderWidth: CGFloat, borderColor: UIColor)
    {
        self.layer.cornerRadius = cornerRadius * self.bounds.size.width
        self.layer.borderColor = borderColor.CGColor as CGColorRef
        self.layer.borderWidth = borderWidth
        self.clipsToBounds = true
    }
}

您可以根据需要简单地传递值。

用法：

    snapButton.makeCircular(0.5, borderWidth: 1.0, borderColor: UIColor.clearColor())

iOS SDK：Corner Radius显示不正确

4 个答案: