如何更改自定义 UIButton 的边框宽度

Question

所以，我正在为我的应用程序制作简单的表单。我有两个按钮，允许用户选择是否要输入电子邮件或电话号码。我制作了 2 个看起来像 android 样式标签按钮的按钮。如下：

所以我为我的按钮制作了自定义类。代码如下：

@IBDesignable
class HC24Button: UIButton {

    @IBInspectable var tabButtonBorderWidth: CGFloat = 1.0

    @IBInspectable var borderWidth: CGFloat = 0{
        didSet{
            layer.borderWidth = borderWidth
        }
    }

    @IBInspectable var borderColor: UIColor? {
        didSet{
            updateView()
        }
    }

    @IBInspectable var cornerRadius: CGFloat = 0{
        didSet{
            layer.cornerRadius = cornerRadius
        }
    }

    @IBInspectable var tabsButton : Bool = false{
        didSet{
            updateView()
        }
    }

    func updateView(){
        let border = CALayer()
        let width = tabButtonBorderWidth
        border.borderColor = borderColor?.cgColor
        border.frame = CGRect(x: 0, y: frame.size.height - width, width:  frame.size.width + 20, height: frame.size.height)

        border.borderWidth = width

        layer.addSublayer(border)
        layer.masksToBounds = true
    }

}

这是我的视图控制器上的代码：

   @IBAction func PhoneTapped(_ sender: HC24Button) {
        sender.titleLabel?.font = UIFont.boldSystemFont(ofSize: 17)
        sender.tabButtonBorderWidth = 4.0
        sender.borderColor = HC24AppColors.Main
        EmailButton.tabButtonBorderWidth = 1.0
        EmailButton.titleLabel?.font = UIFont.systemFont(ofSize: 15)
        EmailButton.borderColor = .lightGray
        UserPhoneEmailTextField.text = "62"
        UserPhoneEmailTextField.keyboardType = .numberPad
    }

    @IBAction func EmailTapped(_ sender: HC24Button) {
        sender.titleLabel?.font = UIFont.boldSystemFont(ofSize: 17)
        sender.tabButtonBorderWidth = 4.0
        sender.borderColor = HC24AppColors.Main
        PhoneButton.tabButtonBorderWidth = 1.0
        PhoneButton.titleLabel?.font = UIFont.systemFont(ofSize: 15)
        PhoneButton.borderColor = .lightGray
        UserPhoneEmailTextField.text = ""
        UserPhoneEmailTextField.placeholder = "Alamat Email"
    }

但这是我得到的结果：

我只想要一个带有彩色边框的按钮，例如开关。我该如何解决这个问题？

Answer 1

当按钮单击事件被调用时，您不会更新视图，也不会删除先前添加的图层而不更改该图层的宽度。

@IBDesignable
class HC24Button: UIButton {

    @IBInspectable var tabButtonBorderWidth: CGFloat = 1.0 {
        didSet {
            updateView()
        }
    }
    var borderLayer: CALayer?

    @IBInspectable var borderWidth: CGFloat = 0{
        didSet{
            layer.borderWidth = borderWidth
        }
    }

    @IBInspectable var borderColor: UIColor? {
        didSet{
            updateView()
        }
    }

    @IBInspectable var cornerRadius: CGFloat = 0{
        didSet{
            layer.cornerRadius = cornerRadius
        }
    }

    @IBInspectable var tabsButton : Bool = false{
        didSet{
            updateView()
        }
    }

    func updateView(){
        let border = CALayer()
        let width = tabButtonBorderWidth
        border.borderColor = borderColor?.cgColor
        border.frame = CGRect(x: 0, y: frame.size.height - width, width:  frame.size.width + 20, height: frame.size.height)

        border.borderWidth = width
        if let layerObj = self.borderLayer {
            layerObj.removeFromSuperlayer()
        }
        self.borderLayer = border
        layer.addSublayer(border)
        layer.masksToBounds = true
    }

}

Answer 2

在updateView() 中，您正在添加新边框，但从未真正删除取消选择的选项卡的边框。不要每次都创建边框，只需创建一次，然后简单地更改其颜色即可隐藏它。

修改后的版本为：

@IBDesignable HC24Button 类：UIButton {

@IBInspectable var tabButtonBorderWidth: CGFloat = 1.0

@IBInspectable var borderWidth: CGFloat = 0{
    didSet{
        layer.borderWidth = borderWidth
    }
}

@IBInspectable var borderColor: UIColor? {
    didSet{
        updateView()
    }
}

@IBInspectable var cornerRadius: CGFloat = 0{
    didSet{
        layer.cornerRadius = cornerRadius
    }
}

@IBInspectable var tabsButton : Bool = false{
    didSet{
        updateView()
    }
}

var border: CALayer?

func updateView(){
    if let border = border {
        border.borderColor = borderColor?.cgColor
        border.borderWidth = tabButtonBorderWidth
        return
    }
    border = CALayer()
    border.borderColor = borderColor?.cgColor
    let width = tabButtonBorderWidth
    border.borderWidth = width
    border.frame = CGRect(x: 0, y: frame.size.height - width, width:  frame.size.width + 20, height: frame.size.height)
    layer.addSublayer(border)
    layer.masksToBounds = true
}

}

Answer 3

您可以像这样创建自定义按钮：

class CustomButton: UIButton {

    override func awakeFromNib() {

        layer.borderWidth = 0.5
    }

}

并更改 awakeFromNib 中的属性。