文本更改颜色时，自定义UIView将无法正确制作动画

Question

I have created a toggle button that is a custom UIControl which gives the user two options -- Male or Female . When selecting one or the other, the text color is supposed to change to be the appropriate opposite color. The text color change works correctly and the toggle moves to the other selection, however when the toggle button is clicked, the animation to show it moving doesn't work. I've tried several different variations of the code but nothing works. Any suggestions?

import UIKit

@IBDesignable
class GenderSelector: UIControl {

    var buttons = [UIButton]()
    var selector: UIView!
    var selectedSegmentIndex = 0
    var activated = false

    @IBInspectable
    var Titles: String = "" {
        didSet {
            updateView()
        }
    }

    @IBInspectable
    var textColor = UIColor(red: 29.0/255.0, green: 151.0/255.0, blue: 94.0/255.0, alpha: 1.0) {
        didSet {
            updateView()
        }
    }

    var selectedTextColor = UIColor(red: 29.0/255.0, green: 151.0/255.0, blue: 94.0/255.0, alpha: 1.0) {
        didSet {
            updateView()
        }
    }

    @IBInspectable
    var unselectedTextColor: UIColor = .white {
        didSet {
            updateView()
        }
    }

    @IBInspectable
    var selectorColor = UIColor(red: 255.0/255.0, green: 255.0/255.0, blue: 255.0/255.0, alpha: 1.0) {
        didSet {
            updateView()
        }
    }

    @IBInspectable
    var selectorTextColor: UIColor = .white {
        didSet {
            updateView()
        }
    }

    func updateView() {

        buttons.removeAll()
        subviews.forEach {
            $0.removeFromSuperview()
        }

        let buttonTitles = Titles.components(separatedBy: ",")
        for buttonTitle in buttonTitles {
            let button = UIButton(type: .system)
            button.titleLabel?.font = UIFont(name: "Avenir-Medium", size: 12)
            button.setTitle(buttonTitle, for: .normal)
            if activated == true {
                button.setTitleColor(selectedTextColor, for: .normal)
                if buttonTitle == "Male" {
                    button.setTitleColor(unselectedTextColor, for: .normal)
                }
            } else if activated == false {
                button.setTitleColor(unselectedTextColor, for: .normal)
                if buttonTitle == "Male" {
                    button.setTitleColor(selectedTextColor, for: .normal)
                }
            }

            button.addTarget(self, action: #selector(buttonTapped(button:)), for: .touchUpInside)

            buttons.append(button)
        }

        let selectorWidth = frame.width / 2
        if activated == true {
            selector = UIView(frame: CGRect(x: 152.0, y: 0, width: selectorWidth, height: frame.height))
        } else if activated == false {
            selector = UIView(frame: CGRect(x: 0.0, y: 0, width: selectorWidth, height: frame.height))
        }
        selector.layer.cornerRadius = 3
        selector.backgroundColor = selectorColor
        addSubview(selector)

        let stackview = UIStackView(arrangedSubviews: buttons)
        stackview.axis = .horizontal
        stackview.alignment = .center
        stackview.distribution = .fillEqually
        addSubview(stackview)
        stackview.translatesAutoresizingMaskIntoConstraints = false
        stackview.topAnchor.constraint(equalTo: self.topAnchor).isActive = true
        stackview.bottomAnchor.constraint(equalTo: self.bottomAnchor).isActive = true
        stackview.leftAnchor.constraint(equalTo: self.leftAnchor).isActive = true
        stackview.rightAnchor.constraint(equalTo: self.rightAnchor).isActive = true
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        self.backgroundColor = UIColor(red: 255.0/255.0, green: 255.0/255.0, blue: 255.0/255.0, alpha: 0.0)
    }

    override init(frame: CGRect) {
        super.init(frame: frame)
    }

    override func draw(_ rect: CGRect) {
        layer.cornerRadius = 3
        layer.borderWidth = 1
        layer.borderColor = UIColor.white.cgColor
    }

    @objc func buttonTapped(button: UIButton) {
        for (buttonIndex, btn) in buttons.enumerated() {
            if btn == button {
                selectedSegmentIndex = buttonIndex
                if selectedSegmentIndex == 0 {
                    activated = false
                    updateView()
                } else if selectedSegmentIndex == 1 {
                    activated = true
                    updateView()
                }
                let selectorStartPosition = frame.width / CGFloat(buttons.count) * CGFloat(buttonIndex)
                UIView.animate(withDuration: 0.3, animations: {
                    self.selector.frame.origin.x = selectorStartPosition
                    print(selectorStartPosition)
                })
            }
        }
        sendActions(for: .valueChanged)
    }
}

Answer 1

There's something wrong with your updateView() function. This function is called every time you tap on button and the frame of selector view gets updated here:

if activated == true {
            selector = UIView(frame: CGRect(x: 152.0, y: 0, width: selectorWidth, height: frame.height))
        } else if activated == false {
            selector = UIView(frame: CGRect(x: 0.0, y: 0, width: selectorWidth, height: frame.height))
        }

So the frame gets updated before the animation call. When X position is already 0 then how is selector movement supposed to animate.

So, you should add a nil check in updateView() function and assign frame to view on initialization only

if selector == nil {
        if activated == true {
            selector = UIView(frame: CGRect(x: 152.0, y: 0, width: selectorWidth, height: frame.height))
        } else if activated == false {
            selector = UIView(frame: CGRect(x: 0.0, y: 0, width: selectorWidth, height: frame.height))
        }
    }