Question 66604 in IOS Swift Question posted in
The official documentation can be found here.

setTitleColor not working for custom UIButton in .disabled state – Ios swift

I have a form to collect basic user info. There is a "Continue" button on the form that has different appearances based on whether it is in the .enabled or .disabled state.

The .enabled state formatting works fine with the setTitleColor method. But when I execute setTitleColor for the .disabled state, the button text color changes to a different color than the one I want. What is going on?

I have a CustomButton subclass of UIButton that changes its state to .disabled when the text fields above it are empty. Then I call a function to do some custom formatting to give the .disabled button a medium grey background with a light grey text.

class CustomButton: UIButton {

    // Format a button with filled background
    // Default button text color to white if no parameter is provided
    func configFilledButton(color: UIColor, textColor: UIColor? = UIColor.white) {

        self.titleLabel?.textColor = textColor
        self.backgroundColor = color
        self.setTitleColor(color, for: .disabled)

    } // close configFilledButton


    // Call this function to toggle the Continue button state to disabled
    func toggleEnabledState(isEnabled: Bool) {
    
        if isEnabled == false {
                    
            let newColor = UIColor(named: K.BrandColors.greyMedium)!
            
            self.configFilledButton(
                color: newColor, 
                textColor: UIColor(named: K.BrandColors.greyLight))

     } // close toggleEnabledState 

} // close CustomButton

When I run the code to disable the button, the button background changes to the correct color but the title text changes to a color I did not set (I assume it is using some default color for disabled buttons). I verified that the colors I am using in my Assets folder are correctly named and referenced in my constants K.brandColors structure.

Any idea why setTitleColor does not seem to be working for the .disabled state?

Tags:

2

Answers


  1. 0

    self.setTitleColor(color, for: .disabled) is wrong. Please use self.setTitleColor(textColor, for: .disabled)

    When the button enters the disabled state, an alpha value is applied to both the text and background. If you want the text color to remain solid without alpha, set the text color using the .disabled state. Otherwise, use the .normal state for text color.

    Login or Signup to reply.
  2. 0

    You can save yourself a lot of work by making use of the .normal / .highlighted / .disabled states… and then overriding isEnabled to handle the background color change:

    class CustomButton: UIButton {
    
    // these will be set by configure()
    private var bkgEnabled: UIColor = .white
    private var bkgDisabled: UIColor = .black

    override init(frame: CGRect) {
        super.init(frame: frame)
        // configure with defaults
        self.configure()
    }
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        // configure with defaults
        self.configure()
    }
    
    // Format a button...
    // Each parameter has a "default" value
    func configure(titleNormal: UIColor? = .white,
                   titleHighlighted: UIColor? = .lightGray,
                   titleDisabled: UIColor? = .darkGray,
                   bkgEnabled: UIColor? = .red,
                   bkgDisabled: UIColor? = .lightGray) {
        
        self.setTitleColor(titleNormal, for: .normal)
        self.setTitleColor(titleHighlighted, for: .highlighted)
        self.setTitleColor(titleDisabled, for: .disabled)
        self.backgroundColor = self.isEnabled ? bkgEnabled : bkgDisabled

        // update background color properties
        self.bkgEnabled = bkgEnabled!
        self.bkgDisabled = bkgDisabled!
    }

    // this will set the background color, based on Enabled / Disabled state
    override var isEnabled: Bool {
        didSet {
            self.backgroundColor = isEnabled ? bkgEnabled : bkgDisabled
        }
    }
    
}

    Here’s an example controller… it will create two custom buttons:

    • The top button – "button A" – will use the default color values
    • we’ll set custom color values for the bottom button – "button B"
    • tapping the top button will toggle .isEnabled state of the bottom button

    Controller class:

    class ViewController: UIViewController {
    
    let customButtonA = CustomButton()
    let customButtonB = CustomButton()

    override func viewDidLoad() {
        super.viewDidLoad()
        
        customButtonA.translatesAutoresizingMaskIntoConstraints = false
        customButtonB.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(customButtonA)
        view.addSubview(customButtonB)

        NSLayoutConstraint.activate([
            customButtonA.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            customButtonA.centerYAnchor.constraint(equalTo: view.centerYAnchor, constant: -80.0),

            customButtonB.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            customButtonB.topAnchor.constraint(equalTo: customButtonA.bottomAnchor, constant: 40.0),
        ])

        customButtonA.setTitle("Toggle enabled/disabled", for: [])
        customButtonB.setTitle("Enabled", for: [])
        
        customButtonA.addTarget(self, action: #selector(btnATapped(_:)), for: .touchUpInside)
        customButtonB.addTarget(self, action: #selector(btnBTapped(_:)), for: .touchUpInside)
        
        customButtonB.configure(titleNormal: .red, titleHighlighted: .green, titleDisabled: .black, bkgEnabled: .yellow, bkgDisabled: .gray)
        
    }
    @objc func btnATapped(_ sender: UIButton) {
        print("Toggling .isEnabled of button B")
        customButtonB.isEnabled.toggle()
        let t: String = customButtonA.isEnabled ? "Enabled" : "Disabled"
        customButtonB.setTitle(t, for: [])
    }
    @objc func btnBTapped(_ sender: UIButton) {
        print("Button B tapped")
    }

}

class CustomButton: UIButton {
    
    // these will be set by configure()
    private var bkgEnabled: UIColor = .white
    private var bkgDisabled: UIColor = .black

    override init(frame: CGRect) {
        super.init(frame: frame)
        // configure with defaults
        self.configure()
    }
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        // configure with defaults
        self.configure()
    }
    
    // Format a button...
    // Each parameter has a "default" value
    func configure(titleNormal: UIColor? = .white,
                   titleHighlighted: UIColor? = .lightGray,
                   titleDisabled: UIColor? = .darkGray,
                   bkgEnabled: UIColor? = .red,
                   bkgDisabled: UIColor? = .lightGray) {
        
        self.setTitleColor(titleNormal, for: .normal)
        self.setTitleColor(titleHighlighted, for: .highlighted)
        self.setTitleColor(titleDisabled, for: .disabled)
        self.backgroundColor = self.isEnabled ? bkgEnabled : bkgDisabled

        // update background color properties
        self.bkgEnabled = bkgEnabled!
        self.bkgDisabled = bkgDisabled!
    }

    // this will set the background color, based on Enabled / Disabled state
    override var isEnabled: Bool {
        didSet {
            self.backgroundColor = isEnabled ? bkgEnabled : bkgDisabled
        }
    }
    
}

    Looks like this to start:

    enter image description here

    while the bottom button is tapped (highlighted):

    enter image description here

    and after tapping the top button to disable the bottom button:

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search