This question is about Swift 4, Xcode 9.3.1.
The process to change the color of an image button is well documented. That's not the problem.
This question is about WHY the color of an image button resets to the default color if the button happens to be the target inside IBAction, and what do to about it.
I created a fresh project in Xcode to demonstrate what I'm seeing. This is a project that has an IBAction in the view controller that attempts to change the color of the images on a button. I added three buttons(oneButton, twoButton, threeButton) to the app, and wired them, so each has the following outlets:
Each button has a different image defined. Here's an example:
And here's the ViewController:
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var oneButton: UIButton!
@IBOutlet weak var twoButton: UIButton!
@IBOutlet weak var threeButton: UIButton!
override func viewDidLoad() {
super.viewDidLoad()
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
@IBAction func myAction(sender: UIButton) {
let oneImageView = oneButton.imageView
if sender == oneButton {
print("oneButton")
oneImageView?.setImageColor(color: UIColor.red)
} else if sender == twoButton {
print("twoButton")
oneImageView?.setImageColor(color: UIColor.blue)
} else if sender == threeButton {
print("threeButton")
oneImageView?.setImageColor(color: UIColor.purple)
}
}
}
extension UIImageView {
func setImageColor(color: UIColor) {
let templateImage = self.image?.withRenderingMode(UIImageRenderingMode.alwaysTemplate)
self.image = templateImage
self.tintColor = color
}
}
Clicking each icon shows the appropriate text in the output window (oneButton, twoButton, threeButton), depending on which one is clicked. That works fine.
When the app starts, the color of the first image is black (default), as expected.
Clicking twoButton causes the color on the first image to change to blue, as expected.
Clicking threeButton causes the color on the first image to change to purple, as expected.
Clicking oneButton causes the color on the first image to reset to the default (black). This is NOT expected.
I imagine what is happening is that, because the button is currently processing the system event (the touch), the color I'm setting gets wiped-out by some system process.
I changed the code so that rather than Touch Up Inside, the myAction() was called upon Touch Down, and the color of the first image DID turn red! But only while touching... as soon as I released, the color went back to default.
What I would like is to be able to touch oneButton and have it change to whatever color is in the code, and stay that way, rather than having it reset to the default color.
ADDITION / EDIT
The code above does set the image rendering mode over and over. It shouldn't be necessary to do that, I realize. But when I didn't do it this way, no colors would be changed when the app ran in the simulator. The code above at least changes the color of the image as long as it's not the item being touched. In the code below, although the appropriate portion of the if/else in myAction() runs, setting .tintColor has no effect at all, no matter which item is clicked. I tried with experiment true and false, to no avail.
class ViewController: UIViewController {
@IBOutlet weak var oneButton: UIButton!
@IBOutlet weak var twoButton: UIButton!
@IBOutlet weak var threeButton: UIButton!
var oneImageView: UIImageView!
var oneImage: UIImage!
override func viewDidLoad() {
super.viewDidLoad()
oneImageView = oneButton.imageView
oneImage = oneImageView?.image
let experiment = true
if experiment {
oneImageView?.image = UIImage(named: "image")?.withRenderingMode(.alwaysTemplate)
} else {
oneImage.withRenderingMode(.alwaysTemplate)
oneImageView.image = oneImage
}
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
@IBAction func myAction(sender: UIButton) {
//let oneImageView = oneButton.imageView
let tintColor: UIColor = {
print("switch doesn't work here for some reason")
if sender == oneButton {
print("oneButton")
return .red
} else if sender == twoButton {
print("twoButton")
return .blue
} else if sender == threeButton {
print("threeButton")
return .purple
} else {
return .cyan
}
}()
oneImageView?.tintColor = tintColor
}
}
