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

2024-06-02 • 问答

我正在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
}

请注意，这个问题有2个答案。后者绝对是正确的，但第一个也许可以帮助其他人。

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

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

我将图片放在包含视图的中心。

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

红色背景：

背景清晰：

更新：以上答案有效，但我实际上已发现问题：

即使我已设置：

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

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

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

这当然不会实现自动尺寸标注。

删除该代码后，可以使用以下代码获得相同的结果，但无需设置预定义的高度：

   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 // the vertical center is now set nicely at bottom edge of my top view. 
   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

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

ZX284575324 回答：快速自动布局-未应用高度锚点

大家都在问