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”中找到“转角半径”选项，如网站上的动画所示，以创建圆形按钮。有人可以告诉我我做错了什么吗？非常感谢您的帮助

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

这是我对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
        }
    }
}

Answer 3

您错过了添加cornerRadius变量：

@IBDesignable class RoundButton: UIButton {

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

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

   .
   .
   .
   .
}

Swift：圆形按钮

3 个答案: