How to achieve .isHighlighted animation in a Custom UIButton?

Question

Preamble (page down after code for the actual problem):

I have a custom UIButton class in which I replaced the ordinary UIButton isHighlighted animation behavior with this behavior:

When the user's finger is actually on the button (ie. highlighting the button), a stroked outline (square border) will appear around the button. When they are no longer touching the button, the outline disappears.

Also, I have replaced the normal isSelected behavior (background goes blue) with this:

An outline identical to the one used with isHighlighted is drawn, except it is slightly thicker and always there as long as isSelected = true, and it is not there when isSelected = false.

This works, and this is how I did it:

import UIKit

class CustomButton: UIButton {

    // BUTTON TYPES:
    // Gorsh, enums sure would be swell here. :T
    // 1 : plus
    // 2 : minus
    // 3 : etc etc....
    @IBInspectable
    var thisButtonsType: Int = 1 { didSet { setNeedsDisplay() } }

    @IBInspectable
    var fillColor: UIColor = .black { didSet { setNeedsDisplay() } }

    @IBInspectable
    var strokeColor: UIColor = .black { didSet { setNeedsDisplay() } }

    override var isHighlighted: Bool {
        didSet {
            setNeedsDisplay()
        }
    }

    override func draw(_ rect: CGRect) {

        let unitOfMeasure = bounds.width / 5

        // draw outline in case we are selected / highlighted
        if (isSelected || isHighlighted) {

            let tempPath = BezierPathFactory.outline(totalWidth: bounds.width)
            if (isSelected) {tempPath.lineWidth = 4.0}
            strokeColor.setStroke()
            tempPath.stroke()

        }

        // initialize path object
        var path = UIBezierPath()

        // get the path corresponding to our button type
        switch thisButtonsType {

        case 1:
            path = BezierPathFactory.plus(gridSpacing: unitOfMeasure)
        case 2:
            path = BezierPathFactory.minus(gridSpacing: unitOfMeasure)

        default: print("hewo!")

        }

        fillColor.setFill()

        path.fill()


    }

}

Once again, that code works but ...

What I would really like is if that isHighlighted border outline would gradually fade away after the touch finishes.

Note: In case you're wondering why I would do things this way... I plan to implement lots of different button types... all with different icons "printed" on them... but I want them all to follow these basic behaviors. Only a couple of them are "toggle" buttons that ever become selected, so there IS a use for the highlight fade.

I already know how to do animations... but it's just doing my head in trying to think how to do that in this context.

I wish I could get the UIButton source code.

Is there a way that the fade animation could be added relatively simply to my above code without completely changing the design pattern? Am I going to have to start using some other feature of core graphics like layers?

Thanks!

Answer 1

You might do the following:

1. Create a subclass of UIButton which adds and manages a sublayer of class CAShapeLayer for the outline the button.
2. Draw the outline the outline into the shape layer.
3. Ensure that the layer resizes with the view: Overwrite layoutSubviews of your view such that it updates the frame of the layer and updates the path for the outline.
4. You should observe or overwrite the state property of UIControl (which is an ancestor of UIButton) to notice the state changes.
5. Use property animations (CABasicAnimation) for the opacity of the shape layer to fade the outline in and out.