Swift：圆形按钮

Question

我正在按照以下教程学习如何使按钮的侧面变圆：

https://blog.supereasyapps.com/how-to-create-round-buttons-using-ibdesignable-on-ios-11/

我已经按照它的建议创建了一个新的 Swift 代码文件并输入了以下代码：

import Foundation
import UIKit

@IBDesignable class RoundButton: UIButton {

    override init(frame: CGRect) {
        super.init(frame: frame)
        sharedInit()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        sharedInit()
    }

    override func prepareForInterfaceBuilder() {
        sharedInit()
    }

    func sharedInit() {
        refreshCorners(value: cornerRadius)
    }

    func refreshCorners(value: CGFloat) {
        layer.cornerRadius = value
    }

    var cornerRadius: CGFloat = 15 {
        didSet {
            refreshCorners(value: cornerRadius)
        }
    }

}

我看不到“身份检查器”中的“角半径”选项，如网站上的动画所示，用于创建圆角按钮。有人可以告诉我我做错了什么吗？非常感谢您的帮助

Answer 1

您需要将cornerRadius 更改为以下内容，以包含@IBInspectable：

@IBInspectable
var cornerRadius: CGFloat = 15 {
    didSet {
        refreshCorners(value: cornerRadius)
        layer.masksToBounds = true     // Could include this
    }
}

@IBInspectable 允许您访问故事板中的属性，即界面构建器。

您还可以包含layer.masksToBounds = true，因此即使未选中情节提要中的masksToBounds，角也一定会变圆。但是，您不能同时应用圆角和阴影，但有许多可用的解决方法。

Answer 2

您错过了添加cornerRadius var：

@IBDesignable class RoundButton: UIButton {

  @IBInspectable var cornerRadius: CGFloat = 15 { didSet { refreshCorners(value: cornerRadius) } }

   override func awakeFromNib() {
        super.awakeFromNib()
        setupView()
    }

   .
   .
   .
   .
}

Answer 3

这是我对UIView 的通用扩展。您只能将其移至 UIButton。因此，您可以使用界面中的 2 种方法来制作圆角。

@IBDesignable extension UIView {
    @IBInspectable var roundRadius : CGFloat {
        set {
            self.layer.cornerRadius = newValue
        }
        get {
            return self.roundRadius
        }
    }

    /// automatically set cornerRadius as half of height
    @IBInspectable var isRounded : Bool {
        set {
            let radius = newValue ? self.frame.height/2 : 0
            self.layer.cornerRadius = radius
        }
        get {
            return self.isRounded
        }
    }
}