Search code examples
iosswiftuibuttonuibackgroundcolor

Swift UIButton background color does not change

I have the the following custom cell:

class MyCell: UITableViewCell {

    func configure(title1: String, title2: String) {
        backgroundColor = .red

        let myView = MyView(frame: frame)
        myView.button1.setTitle(title1, for: .normal)
        myView.button2.setTitle(title2, for: .normal)

        addSubview(myView)
    }
}

and the custom view:

class MyView: UIView {
    var button1: UIButton!
    var button2: UIButton!

    override var backgroundColor: UIColor? {
        didSet {
            guard UIColor.clear.isEqual(backgroundColor) else { return }
            button1.setTitle("asldkfa")
            button1.backgroundColor = .blue
            button2.backgroundColor = .yellow
        }
    }

    override init(frame: CGRect) {
        super.init(frame: frame)
        button1 = UIButton()
        button2 = UIButton()
        button1.backgroundColor = .purple
        button2.backgroundColor = .brown
        backgroundColor = .gray

        let stackView = UIStackView(); stackView.distribution = .fill; stackView.alignment = .fill
        stackView.addArrangedSubview(button1)
        stackView.addArrangedSubview(button2)

        addSubview(stackView)
    }
}

I initialized the cell view within my tableView:cellForRowAt method like this:

let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! MyCell
cell.configure(title1: "Foo", title2: "Bla")

I get the following output in my tableView:

table cell

Every time the color of MyView is changed externally (for example when clicking on the cell), I want to colours of the buttons to change – that is why I have overridden the didSet observer of backgroundColor in MyView. Eventually I want those colours to be random, but here I am just trying to change button1.backgroundColor = .blue.

It does not work, the color of the buttons does not change. I have even tried changing the tintColor and it also does not work. Changing the title with button1.setTitle(...) does work, so I have no idea what is happening.

Does anyone have an idea?

Thanks in advance.

EDIT

When I build the app, add button1.setTitle("asldkfa", for: .normal) inside the didSet, and click on the cell, this is the output:

enter image description here

Meaning that the backgroundColor is set, as the title does change, just not the colours.

IMPORTANT: There is no other code where the backgroundColor is changed explicitly and the didSelectRowAt method is not even implemented. When a cell is selected, the backgroundColor of its subviews is automatically updated, so that is how I am changing the color at the moment, by selecting the cell.

Solution

  • Updated: Instead of using the UIButton's backgroundColor property, you actually want to be using setBackgroundImage(_:for:). You can use an extension on UIImage (extension example here) to create an image from a color and that should work well for what you're trying to do.

    Your resulting configuration code should look something like: 

    button1.setBackgroundImage(.image(with: .red), for: .normal)