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

在self中，您要添加新边框但从未真正删除取消选中标签的边框。不是每次都创建边框，只需创建一次，然后只需更改其颜色即可隐藏它。

修改后的版本将是：

@IBDesignable HC24Button类：UIButton {

updateView()

}

Answer 3

您可以创建如下自定义按钮：

    <script type="text/javascript">

    $(document).ready(function () {
        $('#data').DataTable();
    });

</script>

并更改awakeFromNib中的属性。

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

3 个答案: