表单元格自动布局的问题没有按照我想要的方式间隔

Question

我正在尝试将设计好的表格单元放到表格视图中，该表格单元应该显示艺术家的歌曲，专辑图片以及播放按钮，但是我无法以正确的方式获得布局我想要。

当前应用程序布局的屏幕截图：

我希望所有播放按钮都平移到表格视图的右侧，但似乎无视我在表格视图中施加的约束，并且超出了范围。我还希望标签具有多余的空间（如下图所示），以便在整个单元格中都具有一定的空间，以便播放按钮可以位于表格视图单元格的右侧。

当前表视图单元格：

这里是我的视图控制器布局的图片以及我对它们施加的约束。让我知道我有什么可以做和改变的。谢谢。

查看控制器布局：

Answer 1

[尝试以编程方式完成，在UITableViewCell类中设置对象：

let containerViw: UIView = {
    let myView = UIView()
    myView.translatesAutoresizingMaskIntoConstraints = false
    myView.heightAnchor.constraint(equalToConstant: 100).isActive = true
    myView.widthAnchor.constraint(equalToConstant: 100).isActive = true
    myView.translatesAutoresizingMaskIntoConstraints = false
    return myView
}()

lazy var buttonPlay: UIButton = {
    let button = UIButton(type: .system)
    let image = UIImage(systemName: "play.circle")
    button.setBackgroundImage(image, for: .normal)
    button.addTarget(self, action: #selector(handlePlay), for: .touchUpInside)
    button.translatesAutoresizingMaskIntoConstraints = false

    return button
}()

let dummyLabel: UILabel = {
    let label = UILabel()
    label.text = "Dummy Label"
    label.font = .systemFont(ofSize: 16, weight: .regular)
    label.textColor = .black

    return label
}()

let finestraBackground: UIImageView = {

    let imageView = UIImageView()
    imageView.backgroundColor = .red
    imageView.image = UIImage(named: "yourImage")?.withRenderingMode(.alwaysOriginal)
    imageView.translatesAutoresizingMaskIntoConstraints  = false
    imageView.heightAnchor.constraint(equalToConstant: 100).isActive = true
    imageView.widthAnchor.constraint(equalToConstant: 100).isActive = true
    imageView.layer.cornerRadius = 50
    imageView.layer.masksToBounds = true

    return imageView
}()

现在在UITableViewCell.CellStyle中设置stackView并添加约束：

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

    backgroundColor = .white

    containerViw.addSubview(buttonPlay)
    buttonPlay.heightAnchor.constraint(equalToConstant: 50).isActive = true
    buttonPlay.widthAnchor.constraint(equalToConstant: 50).isActive = true
    buttonPlay.centerYAnchor.constraint(equalTo: containerViw.centerYAnchor).isActive = true
    buttonPlay.centerXAnchor.constraint(equalTo: containerViw.centerXAnchor).isActive = true

    let stackView = UIStackView(arrangedSubviews: [finestraBackground, dummyLabel, containerViw])
    stackView.distribution = .fillProportionally
    stackView.spacing = 10
    stackView.translatesAutoresizingMaskIntoConstraints = false

    addSubview(stackView)
    stackView.topAnchor.constraint(equalTo: topAnchor, constant: 10).isActive = true
    stackView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 10).isActive = true
    stackView.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -10).isActive = true
    stackView.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -10).isActive = true
}

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

最后一步设置播放功能：

@objc fileprivate func handlePlay() {
    print("Play...")
}

不要忘记将tableView heightForRowAt设置为自动尺寸：

override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
    return UITableView.automaticDimension
}

这是结果：

完整代码：

class TableViewCellCustom: UITableViewCell {

let containerViw: UIView = {
    let myView = UIView()
    myView.translatesAutoresizingMaskIntoConstraints = false
    myView.heightAnchor.constraint(equalToConstant: 100).isActive = true
    myView.widthAnchor.constraint(equalToConstant: 100).isActive = true
    myView.translatesAutoresizingMaskIntoConstraints = false
    return myView
}()

lazy var buttonPlay: UIButton = {
    let button = UIButton(type: .system)
    let image = UIImage(systemName: "play.circle")
    button.setBackgroundImage(image, for: .normal)
    button.addTarget(self, action: #selector(handlePlay), for: .touchUpInside)
    button.translatesAutoresizingMaskIntoConstraints = false

    return button
}()

let dummyLabel: UILabel = {
    let label = UILabel()
    label.text = "Dummy Label"
    label.font = .systemFont(ofSize: 16, weight: .regular)
    label.textColor = .black

    return label
}()

let finestraBackground: UIImageView = {

    let imageView = UIImageView()
    imageView.backgroundColor = .red
    imageView.image = UIImage(named: "me")?.withRenderingMode(.alwaysOriginal)
    imageView.translatesAutoresizingMaskIntoConstraints  = false
    imageView.heightAnchor.constraint(equalToConstant: 100).isActive = true
    imageView.widthAnchor.constraint(equalToConstant: 100).isActive = true
    imageView.layer.cornerRadius = 50
    imageView.layer.masksToBounds = true

    return imageView
}()

@objc fileprivate func handlePlay() {
    print("Play...")
}

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

    backgroundColor = .white

    containerViw.addSubview(buttonPlay)
    buttonPlay.heightAnchor.constraint(equalToConstant: 50).isActive = true
    buttonPlay.widthAnchor.constraint(equalToConstant: 50).isActive = true
    buttonPlay.centerYAnchor.constraint(equalTo: containerViw.centerYAnchor).isActive = true
    buttonPlay.centerXAnchor.constraint(equalTo: containerViw.centerXAnchor).isActive = true

    let stackView = UIStackView(arrangedSubviews: [finestraBackground, dummyLabel, containerViw])
    stackView.distribution = .fillProportionally
    stackView.spacing = 10
    stackView.translatesAutoresizingMaskIntoConstraints = false

    addSubview(stackView)
    stackView.topAnchor.constraint(equalTo: topAnchor, constant: 10).isActive = true
    stackView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 10).isActive = true
    stackView.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -10).isActive = true
    stackView.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -10).isActive = true
}

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