Add color reaction to UIButton when is clicked or hovered with finger

Question

I am creating a custom alert view in swift, because the design I want is different, anyway everything works perfect but the buttons I added doesn't have any recognition when they are clicked, no background change, nothing. When I click one of them, I want the background to became gray like in the other alerts in swift (the standard ones), or when I hold my finger over them.

Here is the code:

let window = UIApplication.shared.keyWindow!
        self.alertPopUp10.tag = 31
        self.alertPopUp10.frame.origin.x = 0
        self.alertPopUp10.frame.origin.y = 0
        self.alertPopUp10.frame.size.width = window.bounds.width
        self.alertPopUp10.frame.size.height = window.bounds.height

        let blurEffect = UIBlurEffect(style: UIBlurEffect.Style.dark)
        let blurEffectView = UIVisualEffectView(effect: blurEffect)
        blurEffectView.tag = 121212
        blurEffectView.frame = self.alertPopUp10.bounds

        let cardView = UIView()
        blurEffectView.contentView.addSubview(cardView)

        cardView.translatesAutoresizingMaskIntoConstraints = false
        cardView.frame.size.width = 250
        cardView.frame.size.height = 121
        cardView.tag = 76859
        cardView.frame.origin.x = (self.alertPopUp10.bounds.width / 2) - (cardView.frame.width / 2)
        cardView.frame.origin.y = (self.alertPopUp10.bounds.height / 2) - (cardView.frame.height / 2)

        cardView.backgroundColor = .white
        cardView.layer.cornerRadius = CGFloat(15.0)
        cardView.clipsToBounds = true

        let title = UILabel()
        title.text = "Die Session läuft in 2 Minuten ab, soll sie verlängert werden?"
        title.textAlignment = .center
        title.layoutMargins = UIEdgeInsets(top: 30, left: 5, bottom: 5, right: 5)
        title.frame.size.width = 250
        title.frame.size.height = 70
        title.frame.origin.y = 0
        title.font = .systemFont(ofSize: 15.0)
        title.frame.origin.x = (cardView.bounds.width / 2) - (title.frame.width / 2)
        title.numberOfLines = 2
        title.textAlignment = .center
        cardView.addSubview(title)

        let horizontalLine = UIView(frame: CGRect(x: 0, y: title.frame.maxY, width: cardView.frame.width, height: 1))
        horizontalLine.backgroundColor = .lightGray
        cardView.addSubview(horizontalLine)

        let vertLine = UIView()
        vertLine.frame.size.width = 1
        vertLine.frame.origin.x = (cardView.bounds.width / 2) - (vertLine.frame.width / 2)
        vertLine.frame.origin.y = horizontalLine.frame.maxY
        vertLine.frame.size.height = 50
        vertLine.backgroundColor = .lightGray
        vertLine.translatesAutoresizingMaskIntoConstraints = false
        cardView.addSubview(vertLine)

        let yes = UIButton()
        yes.setTitle("JA", for: .normal)
        yes.tag = 54362
        yes.setTitleColor(UIColor(named: "default"), for: .normal)
        yes.addTarget(self, action: #selector(self.resetToken(_:)), for: .touchUpInside)
        yes.frame.size.width = 124
        yes.frame.size.height = 50
        yes.frame.origin.x = 0
        yes.titleLabel?.font = .boldSystemFont(ofSize: 15.0)
        yes.frame.origin.y = horizontalLine.frame.maxY
        cardView.addSubview(yes)

        let no = UIButton()
        no.setTitle("NEIN", for: .normal)
        no.tag = 45234
        no.setTitleColor(UIColor(named: "default"), for: .normal)
        no.addTarget(self, action: #selector(self.dismissAlert(_:)), for: .touchUpInside)
        no.frame.size.width = 124
        no.frame.size.height = 50
        no.titleLabel?.font = .boldSystemFont(ofSize: 15.0)
        no.frame.origin.x = vertLine.frame.maxX
        no.frame.origin.y = horizontalLine.frame.maxY
        cardView.addSubview(no)

        self.alertPopUp10.addSubview(blurEffectView)

This might help: https://stackoverflow.com/a/17602296/3418097 — andromedainiative, Oct 29 '19 at 14:44
this is not helping, the reason is because this custom alert is called in app delegate and created there too — Ray, Oct 29 '19 at 15:11

score 1 · Accepted Answer · answered Oct 29 '19 at 15:16

So you have two options to make button dynamic:

First easier option is to initialize button as system button.

Like this:

let button = UIButton(type: .system)

Button will automaticly get effects when pressed.

Second option which is more customizable.

Changing title color when button is highlighted:

let button = UIButton()
button.setTitleColor(.yourColor, for: .highlighted)

Changing button color when is highlighted can be achived by overridng isHidden property of UIButton:

class UIButton {
    override open var isHighlighted: Bool {
        didSet {
            let normalColor = .yourColor
            let highlightedColor = .yourColor
            self.backgroundColor = isHighlighted ? highlightedColor : normalColor
        }
    }
}

But remember this will effect all UIButtons you will create. If you want to effect just specific button then it is better to create custom UIButton.

flanker · Answer 2 · 2019-10-29T15:23:42.607

Performing the background change when clicked is easy if you use a background image for the button rather than a straightforward background colour. You can use an extension on UIColour to easily create a coloured background image for the button.

extension UIColor {
    func image(_ size: CGSize = CGSize(width: 1, height: 1)) -> UIImage {
        return UIGraphicsImageRenderer(size: size).image { rendererContext in
            self.setFill()
            rendererContext.fill(CGRect(origin: .zero, size: size))
        }
    }
}

and then just create an image for the normal and selected state, assign to the buttons two states, and it will change when clicked

let normalImage = UIColor.blue.image()
let selectedImage = UIColor.purple.image()
button.setBackgroundImage(normalImage, for: .normal)
button.setBackgroundImage(selectedImage, for: .highlighted)

If this is something you'd want to do regularly, you could even extend UIButton to make it simpler still

extension UIButton {
   func setBackroundColor(_ color: UIColor, for state: UIControl.State) {
      self.setBackgroundImage(color.image(), for: state)
   }
}

and use it as

button.setBackroundColor(.darkGray, for: .normal)

Add color reaction to UIButton when is clicked or hovered with finger

2 Answers2