Question

我的自定义UITableViewCell布局遇到了麻烦。我基本上是在尝试使这些单元格看起来像Twitter，只是它们根据noteTextLabel的长度动态更改高度（如下图所示）。

我遇到的问题是：

我需要单元格的高度至少为72px，以便图像适合。这会导致我的顶部和底部约束“冲突”，并将文本放在单元格的中间，而不是像我想要的那样放在usernameLabel的正下方。
用户名标签到处都是。它应该在图像顶部的下方，但是有些卡在单元格的顶部，有些在正确的位置。
noteLabel应该在usernameLabel下方几像素（类似于问题1），但是前两个单元格具有适当的间距，然后单元格3的间距太小。最后4个单元格的间距是由于问题1而引起的。

带有问题的当前表视图布局（上面的问题）

自定义单元格的代码

class NoteCell: UITableViewCell {

    let profileImageView: UIImageView = {
        let imageView = UIImageView()
        imageView.translatesAutoresizingMaskIntoConstraints = false
        imageView.layer.cornerRadius = 24
        imageView.layer.masksToBounds = true
        imageView.contentMode = .scaleAspectFill
        return imageView
    }()

    let usernameTextLabel: UILabel = {
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        label.text = "USERNAME"
        label.font = UIFont.systemFont(ofSize: 16)
        label.backgroundColor = UIColor.clear
        label.textColor = UIColor.black
        label.numberOfLines = 0
        label.lineBreakMode = .byWordWrapping
        return label
    }()

    let noteTextLabel: UILabel = {
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        label.text = "loading..."
        label.font = UIFont.systemFont(ofSize: 14)
        label.backgroundColor = UIColor.clear
        label.textColor = UIColor.black
        label.numberOfLines = 0
        label.lineBreakMode = .byWordWrapping
        return label
    }()

    var marginGuide: UILayoutGuide!

    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: .subtitle, reuseIdentifier: reuseIdentifier)

        marginGuide = self.layoutMarginsGuide

        self.heightAnchor.constraint(greaterThanOrEqualToConstant: 72).isActive = true

        addSubview(profileImageView)
        profileImageView.leftAnchor.constraint(equalTo: self.leftAnchor, constant: 8).isActive = true
        profileImageView.topAnchor.constraint(equalTo: self.topAnchor, constant: 12).isActive = true
        profileImageView.widthAnchor.constraint(equalToConstant: 48).isActive = true
        profileImageView.heightAnchor.constraint(equalToConstant: 48).isActive = true

        addSubview(usernameTextLabel)
        usernameTextLabel.leftAnchor.constraint(equalTo: profileImageView.rightAnchor, constant: 8).isActive = true
        usernameTextLabel.topAnchor.constraint(equalTo: marginGuide.topAnchor, constant: -8).isActive = true

        addSubview(noteTextLabel)
        noteTextLabel.leadingAnchor.constraint(equalTo: usernameTextLabel.leadingAnchor, constant: 4).isActive = true
        noteTextLabel.bottomAnchor.constraint(equalTo: marginGuide.bottomAnchor).isActive = true
        noteTextLabel.topAnchor.constraint(equalTo: usernameTextLabel.bottomAnchor, constant: 4).isActive = true
        noteTextLabel.trailingAnchor.constraint(equalTo: marginGuide.trailingAnchor).isActive = true
    }

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

}

Swift自定义UITableViewCell布局约束问题

0 个答案: