使用Uilabel和UiimageView的编程设置UITATIONVIEWCELL的约束

Question

我正在尝试使用自定义的uitableviewcell构建我的桌面视图，但面临着一些共同创造的问题。以下是我的自定义UitablViewCell类：

class MovieCell: UITableViewCell {
static let identifier = "MovieCell"
let cellMargin = 15.0

private lazy var containerView: UIView = {
   let view = UIView()
    view.backgroundColor = .lightGray
    view.layer.cornerRadius = 5
    view.translatesAutoresizingMaskIntoConstraints = false
    view.clipsToBounds = true
    return view
}()

private let movieNameLabel: UILabel = {
   let label = UILabel()
    label.translatesAutoresizingMaskIntoConstraints = false
    label.font = UIFont.movieAppBoldFont(size: 15)
    label.numberOfLines = 0
    return label
}()

private let movieImageView: UIImageView = {
    let imageView = UIImageView()
    imageView.translatesAutoresizingMaskIntoConstraints = false
    imageView.contentMode = .scaleAspectFill
    imageView.clipsToBounds = true
    return imageView
}()

var movieCellViewModel : MoviewCellViewModel = MoviewCellViewModel(image: nil, name: "") {
    didSet {
        movieNameLabel.text = movieCellViewModel.name
    }
}

override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
    super.init(style: style, reuseIdentifier: reuseIdentifier)
    backgroundColor = UIColor(red: 1, green: 1, blue: 1, alpha: 0)
    layoutSubView()
}

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

private func layoutSubView() {
    addSubview(containerView)
    containerView.addSubview(movieNameLabel)
    containerView.addSubview(movieImageView)
    
    let marginGuide = containerView.layoutMarginsGuide
    
    NSLayoutConstraint.activate([
        containerView.topAnchor.constraint(equalTo: contentView.layoutMarginsGuide.topAnchor),
        containerView.leadingAnchor.constraint(equalTo: contentView.layoutMarginsGuide.leadingAnchor),
        containerView.trailingAnchor.constraint(equalTo: contentView.layoutMarginsGuide.trailingAnchor),
        containerView.bottomAnchor.constraint(equalTo: contentView.layoutMarginsGuide.bottomAnchor, constant: -cellMargin),
        
        movieImageView.leadingAnchor.constraint(equalTo: marginGuide.leadingAnchor, constant: 5),
        movieImageView.topAnchor.constraint(equalTo: marginGuide.topAnchor, constant: 5),
        movieImageView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -5),
        movieImageView.widthAnchor.constraint(equalToConstant: 50),
        movieImageView.heightAnchor.constraint(equalToConstant: 50),

        movieNameLabel.leadingAnchor.constraint(equalTo: marginGuide.trailingAnchor, constant: 5),
        movieNameLabel.trailingAnchor.constraint(equalTo: marginGuide.trailingAnchor, constant: -5),
        movieNameLabel.topAnchor.constraint(equalTo: marginGuide.topAnchor, constant: 5),
        movieNameLabel.bottomAnchor.constraint(equalTo: marginGuide.bottomAnchor, constant: -5)
    ])
}

}

我在上面的代码上获得以下结果：

我正在尝试创建一个Uiview并向其添加内容。我之所以添加它，是因为我想在tableview中显示一些空白空间。

Answer 1

夫妇问题...

您在 layoutsubview（）中的第一行是：

addSubview(containerView)

在哪里需要：

contentView.addSubview(containerView)

第二，您有 MoviemageView 被限制在 content> content> contentview ：

movieImageView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -5),

应将其限制在 Marginguide ：

movieImageView.bottomAnchor.constraint(equalTo: marginGuide.bottomAnchor, constant: -5),

第三，您具有 Movienamelabel.Leadinginganchor 被限制为 marginguide.trailinginganchor ：

movieNameLabel.leadingAnchor.constraint(equalTo: marginGuide.trailingAnchor, constant: 5),

在哪里应约束至 MovieimageView.trailinganchor ：

movieNameLabel.leadingAnchor.constraint(equalTo: movieImageView.trailingAnchor, constant: 5),

进行这些更改将为您提供此（我将图像视图背景设置为蓝色，并标记为青色的标签）：

但是，在运行应用程序时，您'请参见很多 无法同时满足约束。 消息。当使用带有单元格中子视图的子视图时，这很常见。

为了摆脱自动投诉，我们可以给出 containerview 底部锚点的优先级较少：

let bottomC = containerView.bottomAnchor.constraint(equalTo: contentView.layoutMarginsGuide.bottomAnchor, constant: -cellMargin)
bottomC.priority = .required - 1

然后在您的约束块中激活该锚：

//containerView.bottomAnchor.constraint(equalTo: contentView.layoutMarginsGuide.bottomAnchor, constant: -cellMargin),
bottomC,

这是您的完整 moviecell 类：

class MovieCell: UITableViewCell {
    static let identifier = "MovieCell"
    let cellMargin = 15.0
    
    private lazy var containerView: UIView = {
        let view = UIView()
        view.backgroundColor = .lightGray
        view.layer.cornerRadius = 5
        view.translatesAutoresizingMaskIntoConstraints = false
        view.clipsToBounds = true
        return view
    }()
    
    private let movieNameLabel: UILabel = {
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        label.font = .systemFont(ofSize: 15, weight: .bold) // UIFont.movieAppBoldFont(size: 15)
        label.numberOfLines = 0
        return label
    }()
    
    private let movieImageView: UIImageView = {
        let imageView = UIImageView()
        imageView.translatesAutoresizingMaskIntoConstraints = false
        imageView.contentMode = .scaleAspectFill
        imageView.clipsToBounds = true
        return imageView
    }()
    
    var movieCellViewModel : MoviewCellViewModel = MoviewCellViewModel(image: nil, name: "") {
        didSet {
            movieNameLabel.text = movieCellViewModel.name
        }
    }
    
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        backgroundColor = UIColor(red: 1, green: 1, blue: 1, alpha: 0)
        layoutSubView()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    private func layoutSubView() {
        contentView.addSubview(containerView)
        containerView.addSubview(movieNameLabel)
        containerView.addSubview(movieImageView)
        
        let marginGuide = containerView.layoutMarginsGuide
    
        let bottomC = containerView.bottomAnchor.constraint(equalTo: contentView.layoutMarginsGuide.bottomAnchor, constant: -cellMargin)
        bottomC.priority = .required - 1

        NSLayoutConstraint.activate([
            containerView.topAnchor.constraint(equalTo: contentView.layoutMarginsGuide.topAnchor),
            containerView.leadingAnchor.constraint(equalTo: contentView.layoutMarginsGuide.leadingAnchor),
            containerView.trailingAnchor.constraint(equalTo: contentView.layoutMarginsGuide.trailingAnchor),
//          containerView.bottomAnchor.constraint(equalTo: contentView.layoutMarginsGuide.bottomAnchor, constant: -cellMargin),
            bottomC,
            
            movieImageView.leadingAnchor.constraint(equalTo: marginGuide.leadingAnchor, constant: 5),
            movieImageView.topAnchor.constraint(equalTo: marginGuide.topAnchor, constant: 5),
//          movieImageView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -5),
            movieImageView.bottomAnchor.constraint(equalTo: marginGuide.bottomAnchor, constant: -5),
            movieImageView.widthAnchor.constraint(equalToConstant: 50),
            movieImageView.heightAnchor.constraint(equalToConstant: 50),
            
//          movieNameLabel.leadingAnchor.constraint(equalTo: marginGuide.trailingAnchor, constant: 5),
            movieNameLabel.leadingAnchor.constraint(equalTo: movieImageView.trailingAnchor, constant: 5),
            movieNameLabel.trailingAnchor.constraint(equalTo: marginGuide.trailingAnchor, constant: -5),
            movieNameLabel.topAnchor.constraint(equalTo: marginGuide.topAnchor, constant: 5),
            movieNameLabel.bottomAnchor.constraint(equalTo: marginGuide.bottomAnchor, constant: -5)
        ])

        // during dev, so we can easily see the frames
        movieImageView.backgroundColor = .systemBlue
        movieNameLabel.backgroundColor = .cyan
    }
}