如何在情节提要中制作一个简单的圆形按钮？

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

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

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

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

简短答案：是

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

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

注：
在“关键路径” layer.cornerRadius和值是5的值需要根据按钮的高度和宽度被改变。公式为按钮的高度* 0.50。因此，请在该值附近进行操作，以在模拟器或物理设备上查看预期的四舍五入按钮。如果在情节提要板上要舍入多个按钮，则此过程将很繁琐。

您可以执行以下操作：

@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
    }
}

将班级设置为MyButtonin Identity Inspector和in IB，您将拥有以下rounded属性：

1. 创建一个可可接触类。

2. 将代码插入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
           }
       }
   }

3. 请参考图片。

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

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

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

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

例如，你outlet的myButton话，

对象-C

 self.myButton.layer.cornerRadius = 5.0 ;

迅速

  myButton.layer.cornerRadius = 5.0

如果要使用精确的圆形按钮，则按钮的width和height必须为equal且cornerRadius必须等于高度或宽度/ 2（宽度或高度的一半）。

正如其他答案建议以代码执行大多数工作一样，实际上只有一个答案提供了一种在情节提要IB界面中查看更改的方法。通过允许您更改视图，按钮，图像等的CornerRadius，我的答案超出了答案。

请看下面的代码。要使用此代码，请创建一个名为RoundedView的新快速文件或您要调用的文件，然后转到情节提要，将类更改为“ 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
    }
}

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

试试这个！！

 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");
}

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

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

从代码中调用

button.roundCorners()

我正在使用Xcode版本11.4

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

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

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)
        }
    }
}