斯威夫特：圆形按钮

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

}

我无法在“Identity Inspector”中找到Corner Radius选项，如网站上的动画所示，以创建圆形按钮。有人可以告诉我我做错了什么吗？非常感谢帮助

Answer 1

你错过了添加cornerRadius var：

@IBDesignable class RoundButton: UIButton {

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

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

   .
   .
   .
   .
}

Answer 2

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

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

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

你也可以包括layer.masksToBounds = true，所以即使故事板中的masksToBounds未经检查，角落肯定会被舍入。但是，您不能同时应用圆角和阴影，但有许多可用的变通方法。

Answer 3

这是我对UIView的普遍延伸。你可以将它移动到UIButton。因此，您可以使用界面中的两种方法来制作圆角。

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