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

Posted 2023-03-15

【中文标题】如何更改自定义 UIButton 的边框宽度

【英文标题】：How to change border width of custom UIButton

【发布时间】：2017-11-14 09:58:45

【问题描述】：

所以，我正在为我的应用程序制作简单的表单。我有两个按钮，允许用户选择是否要输入电子邮件或电话号码。我制作了 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"
    

但这是我得到的结果：

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

【问题讨论】：

示例/逻辑见***.com/questions/46402984/custom-checkbox-in-swift-3/…

sender.tabButtonBorderWidth = 4.0 所以你改变了按钮底栏。但是您不要将另一个更改为 0。另外，强烈建议：以小写开头命名您的 var。

@Larme 我确实改变了另一个。我更改了 PhoneButton 上的 EmailButton 边框，反之亦然。

@EgaSetyaPutra 只需用我在下面回答的按钮更改您的 Button 类。你不会遇到这个问题。

【参考方案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
    

【参考方案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

【讨论】：

根据您的答案宽度永远不会改变。在回答之前先检查它。

谢谢，现在修好了。

【参考方案3】：

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

class CustomButton: UIButton 

    override func awakeFromNib() 

        layer.borderWidth = 0.5
    

并更改 awakeFromNib 中的属性。