UIButton background color overlaps text on highlight

Question

After I set my UIButton's backgroundColor and textColor for state highlighted the following output is presented:

The problem here is that the button's background overlaps the white text. How can I solve this?

I also have lots of problem on tvOS with setting the background and text color from the Interface Builder (not working from State Config). I have to make a combination of the IB's properties and code.

Here is my code:

if shopNowButton.highlighted == true {
    shopNowButton.highlighted = false
    shopNowButton.backgroundColor = UIColor.orangeColor()
    shopNowButton.setTitleColor(UIColor.whiteColor(), forState: .Highlighted)

}
else {
    shopNowButton.highlighted = true
    shopNowButton.backgroundColor = UIColor.whiteColor()
    shopNowButton.layer.borderWidth = 1
    shopNowButton.layer.borderColor = UIColor.orangeColor().CGColor
    shopNowButton.setTitleColor(UIColor.orangeColor(), forState: .Normal)
}

`button.setTitleColor(UIColor.whiteColor(), forState: .Selected)` — Rahul Patel, Dec 23 '15 at 11:33
The button will not be touched. It only needs to change its background color on highlight. — Teodor Ciuraru, Dec 23 '15 at 11:40
@TeodorCiuraru *The button will not be touched*, should this `UIButton` actually be a `UILabel` then? — Daniel Storm, Dec 23 '15 at 14:08
Yes. With UILabel it worked, but, for the next page, I will still need a UIButton with that functionality. — Teodor Ciuraru, Dec 23 '15 at 14:09

score 3 · Answer 1 · answered Dec 23 '15 at 11:49

3

This may help. Change the Button-Type: System to Custom (IB or programmatically), Follow image

changes behaviour of highlighted button.

Add this property in your method "adjustsImageWhenHighlighted = NO".

answered Dec 23 '15 at 11:49

Ramesh_T

1,251
8
19

score 2 · Accepted Answer · edited May 23 '17 at 11:58

I believe the UIControlState you're actually looking for is Focused rather than Highlighted.

Here's an example of how to change the backgroundColor and titleColor of a UIButton when it becomes focused. (Accomplished with the help of this answer):

import UIKit

class ViewController: UIViewController {

    let myButton = UIButton(type: UIButtonType.Custom)
    let myOtherButton = UIButton(type: UIButtonType.Custom)

    override func viewDidLoad() {
        super.viewDidLoad()

        // Button we will change on focus
        myButton.frame = CGRectMake(view.frame.midX - 300, view.frame.midY, 400, 100)
        myButton.setTitle("myButton", forState: .Normal)

        // Normal
        myButton.backgroundColor = UIColor.whiteColor()
        myButton.setTitleColor(UIColor.orangeColor(), forState: .Normal)

        // Focused
        myButton.setBackgroundImage(imageWithColor(UIColor.orangeColor()), forState: .Focused)
        myButton.setTitleColor(UIColor.whiteColor(), forState: .Focused)

        view.addSubview(myButton)

        // Other button so we can change focus // Just for example
        myOtherButton.frame = CGRectMake(view.frame.midX + 300, view.frame.midY, 400, 100)
        myOtherButton.setTitle("myOtherButton", forState: .Normal)

        // Normal
        myOtherButton.backgroundColor = UIColor.whiteColor()
        myOtherButton.setTitleColor(UIColor.orangeColor(), forState: .Normal)

        // Focused
        myOtherButton.setBackgroundImage(imageWithColor(UIColor.orangeColor()), forState: .Focused)
        myOtherButton.setTitleColor(UIColor.whiteColor(), forState: .Focused)

        view.addSubview(myOtherButton)
    }

    // Function to create a UIImage filled with a UIColor
    func imageWithColor(color: UIColor) -> UIImage {
        let rect = CGRectMake(0, 0, 1, 1)
        UIGraphicsBeginImageContext(rect.size)
        let context = UIGraphicsGetCurrentContext()

        CGContextSetFillColorWithColor(context, color.CGColor)
        CGContextFillRect(context, rect)

        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()

        return image
    }
}

This example in action:

UIButton background color overlaps text on highlight

2 Answers2

Linked