How to change border width of custom UIButton

Question

So, I'm working on simple form for my app. I have two button that allow user to choose wether they want to input email or phone number. I make 2 button that looks like android style tab button. Like Below:

So I made custom class for my button. Here is the code:

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

}

And here is the code on my view controller:

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

But this is the result I got:

I want only one button that have colored border, like a switch. How can I fix this issue?

Answer 1

You can create a custom button like this:

class CustomButton: UIButton {

    override func awakeFromNib() {

        layer.borderWidth = 0.5
    }

}

and change attributes in awakeFromNib.

Answer 2

In updateView() you are adding a new border but never really removing the border for the deselected tab. Instead of creating the border every time, just create it once and then simply change its color to hide it.

Modified version would be:

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

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

You are not updating your view when ever an button click event is calling as well as you are neither removing previously added layer not changing width of that layer.

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

}