如何在 Storyboard 中制作一个简单的圆形按钮？答案

【问题标题】：How to make a simple rounded button in Storyboard?如何在 Storyboard 中制作一个简单的圆形按钮？
【发布时间】：2016-12-16 21:40:45
【问题描述】：

我刚开始学习iOS开发，不知道如何制作简单的圆形按钮。我找到旧版本的资源。我需要为按钮设置自定义背景吗？在 Android 中，我只会使用 9 补丁，但我知道 iOS 没有此功能。

【问题讨论】：

标签： ios xcode uibutton storyboard

【解决方案1】：

按照下面的屏幕截图。当您运行模拟器时它可以工作（不会在预览中看到它）

【讨论】：

【解决方案2】：

我正在使用 Xcode 11.4 版

在属性检查器中，您可以定义圆角半径。

它不会显示在情节提要中，但在您运行项目时会正常工作。

【讨论】：

【解决方案3】：

扩展是解决这个问题的最佳选择。创建视图或按钮的扩展

public extension UIView {
  //Round the corners
  func roundCorners(){
    let radius = bounds.maxX / 16
    layer.cornerRadius = radius
  }
}

从代码中调用它

button.roundCorners()

【讨论】：

【解决方案4】：

简短回答：是

您完全可以制作一个简单的圆形按钮，而无需额外的背景图片或为此编写任何代码。只需按照下面给出的屏幕截图，设置按钮的运行时属性，即可获得所需的结果。

它不会在Storyboard 中显示，但在您运行项目时会正常工作。

注意：
'Key Path'layer.cornerRadius，值为5。该值需要根据按钮的高度和宽度来改变。它的公式是按钮的高度 * 0.50。因此，围绕该值在模拟器或物理设备上查看预期的圆形按钮。如果情节提要中有多个按钮要四舍五入，则此过程看起来很乏味。

【讨论】：

投反对票时请添加评论。
令人失望的是，IB 无法像运行绘图应用程序那样展示这一点。
@WilliamCerniuk：实际上可以。查看nshipster.com/ibinspectable-ibdesignable
设置用户定义的运行时属性确实有效，构建后可以在模拟器中查看。
正如接受的答案所说，您可能还需要添加一个布尔键路径 clipsToBounds 才能工作。

【解决方案5】：

我发现最简单的方法就是将cornerRadius设置为视图高度的一半。

button.layer.cornerRadius = button.bounds.size.height/2

【讨论】：

不，我没有。如果你的高度和宽度相同（所以它本来是正方形的），那么你会得到一个圆圈。但是如果宽度大于高度，按钮就会正确。
你说得对，我错过了问题中包含的图片，该图片显示了海报在匹配您的答案后的实际情况，而不是接受的答案 - 赞成

【解决方案6】：

import UIKit

@IBDesignable class MyButton: UIButton
{
    override func layoutSubviews() {
        super.layoutSubviews()


    }

    func updateCornerRadius(radius:CGFloat) {
        layer.cornerRadius = radius
    }
    @IBInspectable var cornerRadius:CGFloat = 0{
        didSet{
            updateCornerRadius(radius: cornerRadius)
        }
    }
}

【讨论】：

【解决方案7】：

正如其他答案建议在代码中执行大部分工作一样，只有一个答案实际上提供了一种在情节提要 IB 界面中查看您的更改的方法。我的答案超越了那个答案，允许您更改视图、按钮、图像等的角半径。

请看下面的代码。要使用此代码，请创建一个名为 RoundedView 的新 swift 文件或任何您想要调用的文件，然后转到您的故事板并将类更改为“RoundedView”、“RoundedImageView”或“RoundedButton”。

import UIKit

@IBDesignable class RoundedImage: UIImageView
{
    override func layoutSubviews() {
        super.layoutSubviews()

        updateCornerRadius()
    }

    @IBInspectable var rounded: Bool = false {
        didSet {
            updateCornerRadius()
        }
    }

    @IBInspectable var cornerRadius: CGFloat = 0.1 {
        didSet {
            updateCornerRadius()
        }
    }

    func updateCornerRadius() {
        layer.cornerRadius = rounded ? cornerRadius : 0
        layer.masksToBounds = rounded ? true : false
    }
}

@IBDesignable class RoundedView: UIView
{
    override func layoutSubviews() {
        super.layoutSubviews()

        updateCornerRadius()
    }

    @IBInspectable var rounded: Bool = false {
        didSet {
            updateCornerRadius()
        }
    }

    @IBInspectable var cornerRadius: CGFloat = 0.1 {
        didSet {
            updateCornerRadius()
        }
    }

    func updateCornerRadius() {
        layer.cornerRadius = rounded ? cornerRadius : 0
        layer.masksToBounds = rounded ? true : false
    }
}

@IBDesignable class RoundedButton: UIButton
{
    override func layoutSubviews() {
        super.layoutSubviews()

        updateCornerRadius()
    }

    @IBInspectable var rounded: Bool = false {
        didSet {
            updateCornerRadius()
        }
    }

    @IBInspectable var cornerRadius: CGFloat = 0.1 {
        didSet {
            updateCornerRadius()
        }
    }

    func updateCornerRadius() {
        layer.cornerRadius = rounded ? cornerRadius : 0
        layer.masksToBounds = rounded ? true : false
    }
}

【讨论】：

【解决方案8】：

创建一个 Cocoa Touch 类。

在 RoundButton 类中插入代码。

import UIKit

@IBDesignable
class RoundButton: UIButton {

    @IBInspectable var cornerRadius: CGFloat = 0{
        didSet{
        self.layer.cornerRadius = cornerRadius
        }
    }

    @IBInspectable var borderWidth: CGFloat = 0{
        didSet{
            self.layer.borderWidth = borderWidth
        }
    }

    @IBInspectable var borderColor: UIColor = UIColor.clear{
        didSet{
            self.layer.borderColor = borderColor.cgColor
        }
    }
}

参考图片。

【讨论】：

不知道其他人是否也遇到了这个问题，但是一旦我将类设置为按钮并给它一个半径、边框宽度和边框颜色 Xcode (9.2) 就会抛出一个错误出现渲染错误。应用程序构建成功但红色“！”一直显示。只是说...我切换回纯代码解决方案（尽管这确实是一种优雅的方式）。

【解决方案9】：

在情节提要中添加layer.cornerRadius 时，请确保您没有前导或尾随空格。如果你复制粘贴，你可能会插入空格。如果 XCode 能给出某种警告或错误，那就太好了。

【讨论】：

【解决方案10】：

你可以这样做：

@IBDesignable class MyButton: UIButton
{
    override func layoutSubviews() {
        super.layoutSubviews()

        updateCornerRadius()
    }

    @IBInspectable var rounded: Bool = false {
        didSet {
            updateCornerRadius()
        }
    }

    func updateCornerRadius() {
        layer.cornerRadius = rounded ? frame.size.height / 2 : 0
    }
}

在Identity Inspector 中将类设置为MyButton，在IB 中您将拥有rounded 属性：

【讨论】：

迄今为止最好的答案。今天学到了新东西真棒！
这个答案不完整。当您启动应用时，xCode 将使用界面构建器中视图的帧大小，而不是应用运行时的实际帧大小。
你也可以用“didSet”代替“willSet”，去掉isRounded参数。
如果使用背景图片，也要设置layer.masksToBounds = true

【解决方案11】：

您可以从情节提要中连接您的按钮的IBOutlet。

然后您可以设置按钮的corner radius 使其变为圆角。

例如，你的outlet 是myButton 那么，

Obj - C

 self.myButton.layer.cornerRadius = 5.0 ;

斯威夫特

  myButton.layer.cornerRadius = 5.0

如果您想要精确的圆形按钮，那么您的按钮的width 和height 必须是equal 和cornerRadius 必须等于高度或宽度/2（宽度或高度的一半）。

【讨论】：

【解决方案12】：

试试这个！！

 override func viewDidLoad() {
   super.viewDidLoad()

   var button = UIButton.buttonWithType(.Custom) as UIButton
   button.frame = CGRectMake(160, 100, 200,40)

   button.layer.cornerRadius =5.0
   button.layer.borderColor = UIColor.redColor().CGColor
   button.layer.borderWidth = 2.0

   button.setImage(UIImage(named:"Placeholder.png"), forState: .Normal)
   button.addTarget(self, action: "OnClickroundButton", forControlEvents: .TouchUpInside)
   button.clipsToBounds = true

   view.addSubview(button)
}
    func OnClickroundButton() {
   NSLog(@"roundButton Method Called");
}

【讨论】：

【解决方案13】：

要在情节提要中执行此操作，您需要为按钮使用图像。

您也可以在代码中执行此操作：

 btn.layer.cornerRadius = 10
 btn.clipsToBounds = true

【讨论】：

为什么需要 clipsToBounds？看来，在我删除它之前，那个阴影不起作用。
很好的答案，但您可以在 IB 中完成，无需图像。见下文。