快速自动布局-未应用高度锚点

Question

我正在TableViewCell内部的“配置文件视图控制器”上工作，并将表格单元格尺寸设置为UITableView.automaticDimension：

问题是，我想根据单元格宽度和16：9的比例将背景图像视图（蓝色）设置为可变高度。由于某些原因，即使设置了常量，我也无法更改视图高度。

这里是代码：

let topView : UIView = {
   let view = UIView()
    view.translatesAutoresizingMaskIntoConstraints = false
    view.layer.cornerRadius = 20
    view.backgroundColor = .yoofitDarkBlue
    view.layer.masksToBounds = true
    view.layer.shadowColor = UIColor.lightGray.cgColor
    view.layer.borderWidth = 0.5
    view.layer.borderColor = UIColor.yoofitDarkBlue.cgColor
    view.layer.shadowOffset = CGSize(width: 0.0, height: 0.0)
    view.layer.shadowRadius = 12.0
    view.layer.shadowOpacity = 0.7
    return view
}()

let userImage : UIImageView = {
   let i = UIImageView()
    i.translatesAutoresizingMaskIntoConstraints = false
    i.image = UIImage(named: "user2")
    i.layer.masksToBounds = true
    i.layer.cornerRadius = 75
    i.layer.borderWidth = 1
    i.layer.borderColor = UIColor.white.cgColor
    return i
}()

var userNameLabel:UILabel = {
    let l = UILabel()
    l.translatesAutoresizingMaskIntoConstraints = false
    l.font = UIFont(name: "AvenirNext-DemiBold", size: 20)
    l.textAlignment = .center
    l.textColor = .yoofitBlack
    return l
}()

func setupViews() {
    self.backgroundColor = .clear
    self.selectionStyle = .none
    addSubview(topView)
    let width = self.frame.width
    print(width) // print 320
    topView.topAnchor.constraint(equalTo: topAnchor, constant: 10).isActive = true
    topView.leftAnchor.constraint(equalTo: leftAnchor, constant: 8).isActive = true
    topView.rightAnchor.constraint(equalTo: rightAnchor, constant:  -8).isActive = true
    topView.heightAnchor.constraint(equalToConstant: width/16*9).isActive = true // this doesn't work even if I set another number like 600
    topView.layoutIfNeeded()
    addSubview(userImage)
    userImage.centerYAnchor.constraint(equalTo: topView.bottomAnchor).isActive = true
    userImage.centerXAnchor.constraint(equalTo: topView.centerXAnchor).isActive = true
    userImage.widthAnchor.constraint(equalToConstant: 150).isActive = true
    userImage.heightAnchor.constraint(equalToConstant: 150).isActive = true
    addSubview(userNameLabel)
    userNameLabel.topAnchor.constraint(equalTo: userImage.bottomAnchor, constant: 10).isActive = true
    userNameLabel.centerXAnchor.constraint(equalTo: userImage.centerXAnchor).isActive = true
    userNameLabel.widthAnchor.constraint(equalToConstant: 200).isActive = true
    userNameLabel.heightAnchor.constraint(equalToConstant: 20).isActive = true
    userNameLabel.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant: -20).isActive = true
}

Answer 1

所以这就是我解决的方法，但我希望得到更好的答案。这个答案帮助我走了正确的道路(iOS: How to Align The Center of a View With The Bottom of Another View With AutoLayout)

1. 我添加了一个包含视图，该视图的大小是顶视图所需大小的两倍（蓝色）。

2. 我将图片居中包含在视图中。

   self.conteiningView.backgroundColor = .red // I made this red so you can visually see how the views are related to each other
   let width = self.frame.width
   
   self.addSubview(conteiningView)
   conteiningView.topAnchor.constraint(equalTo: topAnchor, constant: 8).isActive = true
   conteiningView.leftAnchor.constraint(equalTo: leftAnchor, constant: 8).isActive = true
   conteiningView.rightAnchor.constraint(equalTo: rightAnchor, constant:  -8).isActive = true
   conteiningView.heightAnchor.constraint(equalToConstant: (width/16*9)*2).isActive = true // twice of the blue view 
   conteiningView.layoutIfNeeded()
   
   self.conteiningView.addSubview(topView)
   topView.topAnchor.constraint(equalTo: conteiningView.topAnchor).isActive = true
   topView.leftAnchor.constraint(equalTo: conteiningView.leftAnchor).isActive = true
   topView.rightAnchor.constraint(equalTo: conteiningView.rightAnchor).isActive = true
   topView.heightAnchor.constraint(equalToConstant: width/16*9).isActive = true // 16:9 ration 
   
   
   conteiningView.addSubview(userImage)
   userImage.centerYAnchor.constraint(equalTo: conteiningView.centerYAnchor).isActive = true
   userImage.centerXAnchor.constraint(equalTo: conteiningView.centerXAnchor).isActive = true
   userImage.widthAnchor.constraint(equalToConstant: width/2).isActive = true
   userImage.heightAnchor.constraint(equalToConstant: width/2).isActive = true
   userImage.layer.cornerRadius = width/4 // to mantain nice proportions 
   
   conteiningView.addSubview(userNameLabel)
   userNameLabel.topAnchor.constraint(equalTo: userImage.bottomAnchor, constant: 10).isActive = true
   userNameLabel.centerXAnchor.constraint(equalTo: userImage.centerXAnchor).isActive = true
   userNameLabel.widthAnchor.constraint(equalToConstant: 200).isActive = true
   userNameLabel.heightAnchor.constraint(equalToConstant: 20).isActive = true
   

[红色背景：

背景清晰：

更新：上面的答案有效，但我实际上已经发现了问题：

1. 即使我已经设定：

   self.tableView.rowHeight = UITableView.automaticDimension
   self.tableView.estimatedRowHeight = 300
   

2. [对于某些人（对不起，我），我还实施了：

   tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat
   

3. 删除允许使用以下代码来实现相同的结果，但未设置预定义的高度：

      self.addSubview(conteiningView)
      conteiningView.topAnchor.constraint(equalTo: topAnchor, constant: 8).isActive = true
      conteiningView.leftAnchor.constraint(equalTo: leftAnchor, constant: 8).isActive = true
      conteiningView.rightAnchor.constraint(equalTo: rightAnchor, constant:  -8).isActive = true
      conteiningView.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true
      conteiningView.layoutIfNeeded()
   
       self.conteiningView.addSubview(topView)
       topView.topAnchor.constraint(equalTo:     conteiningView.topAnchor).isActive = true
       topView.leftAnchor.constraint(equalTo: conteiningView.leftAnchor).isActive = true
       topView.rightAnchor.constraint(equalTo: conteiningView.rightAnchor).isActive = true
       topView.heightAnchor.constraint(equalToConstant: width/16*9).isActive = true
   
       conteiningView.addSubview(userImage)
       userImage.centerYAnchor.constraint(equalTo: topView.bottomAnchor).isActive = true
       userImage.centerXAnchor.constraint(equalTo: topView.centerXAnchor).isActive = true
       userImage.widthAnchor.constraint(equalToConstant: width/2).isActive = true
       userImage.heightAnchor.constraint(equalToConstant: width/2).isActive = true
       userImage.layer.cornerRadius = width/4
   
       conteiningView.addSubview(userNameLabel)
       userNameLabel.topAnchor.constraint(equalTo: userImage.bottomAnchor, constant: 2).isActive = true
       userNameLabel.centerXAnchor.constraint(equalTo: userImage.centerXAnchor).isActive = true
       userNameLabel.widthAnchor.constraint(equalToConstant: 200).isActive = true
       userNameLabel.heightAnchor.constraint(equalToConstant: 35).isActive = true