Next, you are going to animate the highlight color. To begin, add an array of highlight colors to ImageSelector to correspond with each button. As the selectedIndex changes, the highlight view will update its background color to the corresponding color in this array.

var highlightColors: [UIColor] = []

Users of ImageSelector do not need to provide an array of highlight colors; if no colors are provided, a backup color will be used.

Implement a method that returns either a highlight color from the array or the default color, if none is provided.

private func highlightColor(forIndex index: Int) -> UIColor {
    guard index >= 0 && index < highlightColors.count else {
        return UIColor.blue.withAlphaComponent(0.6)
    }

    return highlightColors[index]
}

If the highlight colors ever change, the current background color also needs to change. Add a property observer to the highlightColors array that does this.

var highlightColors: [UIColor] = [] {
    didSet {
        highlightView.backgroundColor = highlightColor(forIndex: selectedIndex)
    }
}

Whenever the selectedIndex changes, the background color for the highlight view also needs to be updated. Make this change in the property observer for the selectIndex.

var selectedIndex = 0 {
    didSet {
        if selectedIndex < 0 {
            selectedIndex = 0
        }
        if selectedIndex >= imageButtons.count {
            selectedIndex = imageButtons.count - 1
        }

        highlightView.backgroundColor = highlightColor(forIndex: selectedIndex)

        let imageButton = imageButtons[selectedIndex]
        highlightViewXConstraint =
            highlightView.centerXAnchor.constraint(equalTo: imageButton.centerXAnchor)
    }
}

With the background color changes you have made, you no longer need to set an initial background color on the highlightView. Remove the code that sets the background color on the highlight view when it is created.

private let highlightView: UIView = {
    let view = UIView()
    view.backgroundColor = view.tintColor
    view.translatesAutoresizingMaskIntoConstraints = false
    return view
}()

Now open MoodSelectionViewController.swift and set the highlightColors array whenever the moods are set.

var moods: [Mood] = [] {
    didSet {
        currentMood = moods.first
        moodSelector.images = moods.map { $0.image }
        moodSelector.highlightColors = moods.map { $0.color }
    }
}

Build and run the application. Tap different images in the ImageSelector and you will see the highlight color change (Figure 19.4).

Figure 19.4  Changing highlight view colors

The highlight view’s background color is set within the property observer of selectedIndex. Since the selectedIndex is set within the property animator, the background color is also being animated. It can be difficult to see the animation, because it happens so quickly. One way to more easily see the animation is to increase the animation duration. If you are running in the simulator, you can select Debug → Slow Animations to slow everything down. Do not forget to disable that option when you are done.