iOS SDK：角半径显示不正确

Posted 2023-03-21

【中文标题】iOS SDK：角半径显示不正确

【英文标题】：iOS SDK: Corner Radius shows incorrectly

【发布时间】：2016-08-01 12:32:01

【问题描述】：

这里我用 Sketch 设计了屏幕：

有两个按钮。现在我正在 Xcode 中设计这样的按钮，并以这种方式设置 UIButton 的角半径：

layer.cornerRadius = 30
clipsToBounds = true

但结果我遇到了一些奇怪的事情：

如果按钮的左侧和右侧，您可以在中心看到一些角落。我能做什么？

【问题讨论】：

使用layer.cornerRadius = yourbuttonwidth/2

@Anbu.Karthik : 一定是layer.cornerRadius = yourbuttonheight/2?

【参考方案1】：

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

这可能并非在所有设备上都适用，具体取决于您处理布局的方式。看到您的图片，按钮的高度似乎比您设计的略低。

两个选项：

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

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

【参考方案3】：

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

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

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