UIButton tint color not working for whole button? Set in storyboard?

Question

I have looked through other questions but can't find a definitive answer - I created my UIButton in my storyboard (not programmatically) and I am trying to tint the WHOLE button (not just text) on click. I have set my tint color to black and yet this does not affect the whole button.

I have tried setting my type to System as I heard that affects it but nothing has changed. Still no tint.

Furthermore I have to touch/click very "forcefully" (really press down if on device) to even trigger the tint color affecting the text on the button even though the button click registers.

The button's action func will be called so it does not affect functionality, but the text "highlighted state" seems to be only triggered if the user clicks really hard.

How can I tint the entire button? And why would the highlighted state only be triggered with really forced clicking?

Setting tint color -

Trying to implement with IBOutlet:

@IBOutlet var postBtn: UIButton!
postBtn = customButton()
        postBtn.highlightedColor = UIColor.blueColor()

after creating custom class in new file:

public class customButton: UIButton {
    public var highlightedColor = UIColor.blueColor()
    public var unhighlightedColor = UIColor.clearColor()
    override public var highlighted: Bool {
        didSet {
            if (highlighted) {
                self.backgroundColor = UIColor.blueColor()
            }
            else {
                self.backgroundColor = UIColor.clearColor()
            }

        }
    }

}

I either get a bad access error if I declare postBtn initially as a customButton() or I am told postBtn has no member called highlightedColor. What am I doing wrong?

Answer 1

var button = UIButton(type: .system)

If you are using the system button style for maccatalyst, the tintcolor or setTitleColor will not be able to be modified customarily.

Only for Primary button role the systemblue color will be changed by default

button.role = .primary

Answer 2

Swift 3

For anyone doing it programatically:

var button = UIButton(type: .system)
button.tintColor = UIColor.blue

Answer 3

tint property sets the color of the button image and text.

As you don't have any image on your button, it only affect the color of the text

Also, tint will only affect the color of button's image when you set the button type to any except custom.

Now for example, we want to set the color of button image to red.

Then we will see:

In your case, you actually want to set the background color and title color of UIButton when button is highlighted.

For title color, you can directly use button.setTitleColor(UIColor.whiteColor(), forState: .Highlighted)

For background color, there is no direct method you can use, but you can create a custom UIButton which override the highlighted property of UIButton or use setBackgroundImage:forState:

Custom UIButton

public class customButton: UIButton {
    public var highlightedColor = UIColor.blueColor()
    public var unhighlightedColor = UIColor.clearColor()
    override public var highlighted: Bool {
        didSet {
            if (highlighted) {
                self.backgroundColor = UIColor.blueColor()
            }
            else {
                self.backgroundColor = UIColor.clearColor()
            }

        }
    }

}

Usage:

let button1 = customButton()
let button2 = customButton()

button1.highlightedColor = UIColor.redColor()
button2.highlightedColor = UIColor.blueColor()
button1.unhighlightedColor = UIColor.clearColor()
button2.unhighlightedColor = UIColor.blackColor()

setBackgroundImage:forState:

Another method to achieve what you want is use setBackgroundImage:forState:. You may need to create an UIImage from UIColor first.

Generate a image from UIColor:

func getImageWithColor(color: UIColor, size: CGSize) -> UIImage {
    let rect = CGRectMake(0, 0, size.width, size.height)
    UIGraphicsBeginImageContextWithOptions(size, false, 0)
    color.setFill()
    UIRectFill(rect)
    let image: UIImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    return image
}

Usage:

button1.setBackgroundImage(getImageWithColor(UIColor.redColor(), size: button1.bounds.size), forState: .Highlighted)
button2.setBackgroundImage(getImageWithColor(UIColor.blueColor(), size: button2.bounds.size), forState: .Highlighted)

Answer 4

With regards your first question, you would need to do this in code. The tint only affects the text. If you wanted the background colour to change, you would need to change it manually as the button state changes. One way to do this would be to subclass UIButton and add a target/action on it for the relevant control events. In your case, you would listen to UIControlEventTouchDownto know when to change the background colour to your chosen 'highlight' colour, and UIControlEventTouchDragExitand UIControlEventTouchUpInside to know when to revert back to the normal state background colour.

Here's an existing implementation if you want to save time: https://github.com/TakeScoop/SwiftyButton

Answer 5

Try like this,

1) Set UIButton type to custom from storyboard

then write like below,

Create IBoutlet for that button like,

@IBOutlet var btnSubmit : UIButton!

Create click event of that button,

@IBAction func btnSubmitClick(sender : UIButton)
{
    if(sender.selected == false)
    {
        self.btnSubmit.backgroundColor = UIColor.redColor()
        self.btnSubmit.selected = true
    }
    else
    {
        self.btnSubmit.backgroundColor = UIColor.blueColor()
        self.btnSubmit.selected = false
    }
}

This will change your whole button background color. Hope this will help you :)