[在UICollectionView单元格中添加更多约束时，视图消失了

Question

这是我尝试使用代码创建的设计。

这是我到目前为止编写的UICollectionViewCell类代码。

import UIKit

class HitchCollectionViewCell: UICollectionViewCell {

    var origin: String?
    var destination: String?
    var price: Int?
    var rating: Float?
    var date: String?
    var profileImageUrl: String?

    var arrowImageView: UIImageView = {
        let imageView = UIImageView()
        imageView.translatesAutoresizingMaskIntoConstraints = false
        imageView.image = UIImage(named: "arrowright")
        return imageView
    }()

    var originLabel: UILabel = {
        let uiLabel = UILabel()
        uiLabel.translatesAutoresizingMaskIntoConstraints = false
        uiLabel.font = .systemFont(ofSize: 18)
        return uiLabel
    }()

    var destinationLabel: UILabel = {
        let uiLabel = UILabel()
        uiLabel.translatesAutoresizingMaskIntoConstraints = false
        uiLabel.font = .systemFont(ofSize: 18)
        return uiLabel
    }()

    var priceLabel: UILabel = {
        let uiLabel = UILabel()
        uiLabel.translatesAutoresizingMaskIntoConstraints = false
        uiLabel.font = .systemFont(ofSize: 20, weight: .bold)
        return uiLabel
    }()

    var dateLabel: UILabel = {
        let uiLabel = UILabel()
        uiLabel.translatesAutoresizingMaskIntoConstraints = false
        uiLabel.font = .systemFont(ofSize: 14)
        uiLabel.textAlignment = .center
        return uiLabel
    }()

    var starImageView: UIImageView = {
        let imageView = UIImageView()
        imageView.translatesAutoresizingMaskIntoConstraints = false
        imageView.image = UIImage(named: "car")
        return imageView
    }()

    var ratingLabel: UILabel = {
        let uiLabel = UILabel()
        uiLabel.translatesAutoresizingMaskIntoConstraints = false
        return uiLabel
    }()

    var profileImageView: UIImageView = {
        let imageView = UIImageView()
        imageView.translatesAutoresizingMaskIntoConstraints = false
        imageView.backgroundColor = .red
        return imageView
    }()

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

        // ProfileImage
        self.addSubview(profileImageView)
        profileImageView.topAnchor.constraint(equalTo: self.topAnchor).isActive = true
        profileImageView.leftAnchor.constraint(equalTo: self.leftAnchor).isActive = true
        profileImageView.widthAnchor.constraint(equalToConstant: 48).isActive = true
        profileImageView.heightAnchor.constraint(equalToConstant: 48).isActive = true

        // Arrow
        self.addSubview(arrowImageView)
        arrowImageView.centerYAnchor.constraint(equalTo: self.centerYAnchor, constant: 0).isActive = true
        arrowImageView.centerXAnchor.constraint(equalTo: self.centerXAnchor, constant: 0).isActive = true
        arrowImageView.widthAnchor.constraint(equalToConstant: 40).isActive = true
        arrowImageView.heightAnchor.constraint(equalToConstant: 40).isActive = true

        // Date
        self.addSubview(dateLabel)
        dateLabel.leftAnchor.constraint(equalTo: self.leftAnchor, constant: 0).isActive = true
        dateLabel.rightAnchor.constraint(equalTo: self.rightAnchor, constant: 0).isActive = true
        dateLabel.topAnchor.constraint(equalTo: self.topAnchor, constant: 0).isActive = true
        dateLabel.widthAnchor.constraint(equalToConstant: self.frame.width).isActive = true
        dateLabel.heightAnchor.constraint(equalToConstant: 16).isActive = true

        // Origin
        self.addSubview(originLabel)
        originLabel.leftAnchor.constraint(greaterThanOrEqualTo: profileImageView.rightAnchor).isActive = true
        originLabel.rightAnchor.constraint(greaterThanOrEqualTo: arrowImageView.leftAnchor).isActive = true
        originLabel.topAnchor.constraint(greaterThanOrEqualTo: dateLabel.bottomAnchor).isActive = true
        originLabel.bottomAnchor.constraint(greaterThanOrEqualTo: self.bottomAnchor).isActive = true

        // Price
        self.addSubview(priceLabel)
        priceLabel.rightAnchor.constraint(greaterThanOrEqualTo: self.rightAnchor).isActive = true
        priceLabel.topAnchor.constraint(greaterThanOrEqualTo: self.topAnchor).isActive = true
        priceLabel.bottomAnchor.constraint(greaterThanOrEqualTo: self.bottomAnchor).isActive = true
        priceLabel.heightAnchor.constraint(equalToConstant: self.frame.height).isActive = true
        priceLabel.widthAnchor.constraint(greaterThanOrEqualToConstant: 48).isActive = true

        // Destination
        self.addSubview(destinationLabel)
        destinationLabel.leftAnchor.constraint(greaterThanOrEqualTo: arrowImageView.rightAnchor).isActive = true
        destinationLabel.rightAnchor.constraint(greaterThanOrEqualTo: priceLabel.leftAnchor).isActive = true
        destinationLabel.topAnchor.constraint(greaterThanOrEqualTo: dateLabel.bottomAnchor).isActive = true
        destinationLabel.bottomAnchor.constraint(greaterThanOrEqualTo: self.bottomAnchor).isActive = true
        destinationLabel.widthAnchor.constraint(equalToConstant: 80).isActive = true
        destinationLabel.heightAnchor.constraint(greaterThanOrEqualToConstant: 0).isActive = true

        // Rating
        let stackView = UIStackView()
        stackView.axis = .horizontal
        stackView.addArrangedSubview(starImageView)
        starImageView.widthAnchor.constraint(equalToConstant: 20).isActive = true
        starImageView.heightAnchor.constraint(equalToConstant: 20).isActive = true
        stackView.addArrangedSubview(ratingLabel)
        self.addSubview(stackView)
        //stackView.topAnchor.constraint(equalTo: profileImageView.bottomAnchor, constant: 4).isActive = true
//        stackView.bottomAnchor.constraint(greaterThanOrEqualTo: self.bottomAnchor).isActive = true
        //stackView.leftAnchor.constraint(equalTo: profileImageView.leftAnchor).isActive = true
        //stackView.rightAnchor.constraint(equalTo: profileImageView.rightAnchor).isActive = true
        //stackView.centerYAnchor.constraint(equalTo: profileImageView.centerYAnchor).isActive = true

        backgroundColor = UIColor.purple()
    }

    override func layoutSubviews() {
        super.layoutSubviews()

        self.dateLabel.text = "Sunday, Jan 11"
        self.priceLabel.text = "$ 10"
        self.originLabel.text = "Pheonix,\n Arizona"
        self.destinationLabel.text = "Pheonix,\n Arizona"
        self.ratingLabel.text = "4.2"
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

到目前为止，我已经实现了

但是我无法添加这些等级UIStackView，始发地UILabel和目的地UILabel，如果我尝试添加这些等级UIImageView，则这些消失。

任何帮助将不胜感激。

Answer 1

从我可以看到的地方，您将标签等添加到子视图而不是堆栈视图，因此它完全是空的。标签很可能被其他东西隐藏或在可见屏幕之外。我的意思是：您应该首先初始化stackview并向其添加imagesviews，label等。

    let stackView = UIStackView()
    stackView.addArrangedSubview(arrowImageView, ...etc) 

并且在所有锚的末尾，将stackview添加到subView。

    self.addSubview(stackView)