我在自定义UITableViewCell中以编程方式设置布局约束时遇到麻烦

Question

我正在开发一个iOS应用程序，它是一个基本的Pokedex，它将有望教给我使用UIKit的基础知识（在该项目中不使用Storyboards）。当我运行我的应用程序时，一切都很好。但是，当我向下滚动时，有些约束变得混乱，导致按钮显示在屏幕外。我不知道会导致这种情况发生的原因。我认为重用单元格时某些约束正在应用或未应用，但在约束代码中找不到明显的错误。

func set(pokemon: Pokemon) {
    name.text = pokemon.name
    var spriteName: String?

    if let pokemonForm = pokemon.form {
        addSubview(form)
        form.text = pokemonForm
        setNameLabelConstraints(hasForm: true)
        setFormLabelConstraints()
        switch pokemonForm {
            case "Mega":
                spriteName = String(pokemon.speciesID) + "-mega-sprite"
            case "Mega X":
                spriteName = String(pokemon.speciesID) + "-mega-x-sprite"
            case "Mega Y":
                spriteName = String(pokemon.speciesID) + "-mega-y-sprite"
            default:
                spriteName = String(pokemon.speciesID) + "-sprite"
        }
    } else {
        spriteName = String(pokemon.id) + "-sprite"
        form.removeFromSuperview()
        setNameLabelConstraints(hasForm: false)
    }
    sprite.image = UIImage(named: spriteName!)
    type1.setTitle(pokemon.type1, for: .normal)
    styleTypeFilterButton(button: type1)
    type1.addTarget(self, action: #selector(buttonTapped(sender:)), for: UIControl.Event.touchUpInside)
    if let secondType = pokemon.type2 {
        addSubview(type2)
        type2.setTitle(secondType, for: .normal)
        styleTypeFilterButton(button: type2)
        setType2ButtonConstraints()
        setType1ButtonConstraints(twoButtons: true)
        type2.addTarget(self, action: #selector(buttonTapped(sender:)), for: UIControl.Event.touchUpInside)
    } else {
        type2.removeFromSuperview()
        setType1ButtonConstraints(twoButtons: false)
    }

}

func setNameLabelConstraints(hasForm: Bool) {
    name.translatesAutoresizingMaskIntoConstraints = false
    name.leadingAnchor.constraint(equalTo: sprite.trailingAnchor, constant: 20).isActive = true
    if hasForm == false {
        name.centerYAnchor.constraint(equalTo: centerYAnchor).isActive = true
    } else {
        name.heightAnchor.constraint(equalToConstant: 40).isActive = true
        name.centerYAnchor.constraint(equalTo: centerYAnchor).isActive = false
    }
}

func setType1ButtonConstraints(twoButtons: Bool) {
    //type1.translatesAutoresizingMaskIntoConstraints = false
    if twoButtons == true {
        type1.trailingAnchor.constraint(equalTo: type2.leadingAnchor, constant: -15).isActive = true
    } else {
        type1.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -25).isActive = true
    }
}

func setType2ButtonConstraints() {
    //type2.translatesAutoresizingMaskIntoConstraints = false
    type2.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -25).isActive = true
}

func setFormLabelConstraints() {
    form.translatesAutoresizingMaskIntoConstraints = false
    form.leadingAnchor.constraint(equalTo: sprite.trailingAnchor, constant: 20).isActive = true
    form.heightAnchor.constraint(equalToConstant: 40).isActive = true
    form.topAnchor.constraint(equalTo: name.bottomAnchor, constant: -20).isActive = true
    form.font = form.font.withSize(14)
}

func styleTypeFilterButton(button: UIButton) {
    button.translatesAutoresizingMaskIntoConstraints = false
    button.heightAnchor.constraint(equalToConstant: 25).isActive = true
    button.widthAnchor.constraint(equalToConstant: 65).isActive = true
    button.centerYAnchor.constraint(equalTo: centerYAnchor).isActive = true

    button.layer.cornerRadius = 12
    button.setTitleColor(UIColor.white, for: .normal)
    button.titleLabel?.font = button.titleLabel?.font.withSize(14)

    switch button.titleLabel?.text {
        case "Normal":
            button.backgroundColor = UIColor(hexValue: "a8a878")
        case "Fighting":
            button.backgroundColor = UIColor(hexValue: "c03028")
        case "Flying":
            button.backgroundColor = UIColor(hexValue: "a890f0")
        case "Poison":
            button.backgroundColor = UIColor(hexValue: "a040a0")
        case "Ground":
            button.backgroundColor = UIColor(hexValue: "e0c068")
        case "Rock":
            button.backgroundColor = UIColor(hexValue: "b8a038")
        case "Bug":
            button.backgroundColor = UIColor(hexValue: "a8b820")
        case "Ghost":
            button.backgroundColor = UIColor(hexValue: "705898")
        case "Steel":
            button.backgroundColor = UIColor(hexValue: "b8b8d0")
        case "Fire":
            button.backgroundColor = UIColor(hexValue: "f08030")
        case "Water":
            button.backgroundColor = UIColor(hexValue: "6890f0")
        case "Grass":
            button.backgroundColor = UIColor(hexValue: "78C850")
        case "Electric":
            button.backgroundColor = UIColor(hexValue: "f8d030")
        case "Psychic":
            button.backgroundColor = UIColor(hexValue: "f85888")
        case "Ice":
            button.backgroundColor = UIColor(hexValue: "98d8d8")
        case "Dragon":
            button.backgroundColor = UIColor(hexValue: "7038f8")
        case "Dark":
            button.backgroundColor = UIColor(hexValue: "705848")
        case "Fairy":
            button.backgroundColor = UIColor(hexValue: "ee99ac")
        case "???":
            button.backgroundColor = UIColor(hexValue: "68a090")
        case "Shadow":
            button.backgroundColor = UIColor(hexValue: "705848")
        default:
            button.backgroundColor = UIColor(hexValue: "a8a878")
    }
}

[如果有人可以解释为什么当应用程序首次运行时它的布局正确，但是在单元被重用后变得混乱，我将不胜感激！我以前从未使用过自动布局，因此我的自动布局代码也可能有错误，但是我不确定是否有任何问题。提前谢谢！

Answer 1

我在猜测代码的工作方式，但是总之，问题在于，在回收单元时，您没有删除旧的布局约束。

假设创建了一个单元格，对于它必须显示的第一个条目，您调用setType1ButtonConstraints(twoButtons: false)。 type1现在固定到单元的后沿。然后，该单元格将被回收，对于新条目，它必须显示为setType2ButtonConstraints()，然后是setType1ButtonConstraints(twoButtons: true)。您的代码会将type2固定到单元格的后沿，然后将type1固定在type2之前，但是您从未摆脱过从第一个条目开始的约束。现在，您有一组无法满足的约束（控制台中将对此发出警告），并且系统必须中断一个约束。

要解决此问题，您应保留对这些约束的引用，并在prepareForReuse()中将其删除。您也可以使用水平UIStackView。