文本更改顏色時，自定義UIView將無法正確制作動畫

Question

我創建了一個切換按鈕，它是一個自定義UIControl ，為用戶提供了兩個選項Male或Female 。 選擇一個或另一個時，應將文本顏色更改為適當的相反顏色。 文本顏色更改可以正常工作，並且切換將移動到另一個選擇，但是，單擊切換按鈕時，顯示它移動的動畫不起作用。 我嘗試了幾種不同的代碼變體，但沒有任何效果。 有什么建議么？

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

您的updateView()函數updateView() 。 每次您單擊按鈕時都會調用此函數，並且選擇器視圖的框架在此處更新：

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))
        }

因此，在進行動畫調用之前會更新框架。 當X位置已經為0時，選擇器運動應該如何進行動畫處理。

因此，您應該在updateView()函數中添加nil檢查並分配幀以僅在初始化時進行查看

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))
        }
    }