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

Question

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

Answer 1

简答:是的

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

它不会显示在Storyboard它,但它会在你运行项目时正常工作.

注意:Key Path layer.cornerRadius和value是5.需要根据按钮的高度和宽度更改值.它的公式是按钮的高度*0.50.因此,请在模拟器或物理设备上查看预期的圆形按钮.如果在故事板中有多个圆形按钮,则此过程看起来很乏味.

Answer 2

你可以这样做:

@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属性:

Answer 3

要在故事板中执行此操作,您需要使用按钮的图像.

或者你可以用代码完成:

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

Answer 4

1. 创建一个Cocoa Touch类.

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. 参考图像.

Answer 5

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

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

Answer 6

Xcode 13 添加了一个选项，通过调整角样式属性（在“背景配置”下）来实现此目的。

必须在“背景配置”中配置背景，然后将“查看背景”设置为默认值（无）。