如何使用 UIImageView 和单元格中的多个标签正确地进行约束？
Posted
技术标签:
【中文标题】如何使用 UIImageView 和单元格中的多个标签正确地进行约束？【英文标题】：How do I make my constraints properly with a UIImageView and multiple labels in a cell? 【发布时间】：2019-07-08 02:29:34 【问题描述】：我目前正在尝试实现动态单元格功能。我实际上已经实现了它，但只使用了 dateLabel、nameLabel 和 detailLabel。我想在左侧包含一个图像（authorProfileImg）。我已经为我的 4 个元素尝试了多次迭代和约束组合，但我还没有成功。
class BookTableViewCell: UITableViewCell
let nameLabel = UILabel(frame: .zero)
let detailLabel = UILabel(frame: .zero)
let dateLabel = UILabel(frame: .zero)
let authorProfileImg = UIImageView(frame: .zero)
// MARK: Initalizers
override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?)
super.init(style: style, reuseIdentifier: reuseIdentifier)
let marginGuide = contentView.layoutMarginsGuide
// configure titleLabel //the upper element
contentView.addSubview(nameLabel)
nameLabel.translatesAutoresizingMaskIntoConstraints = false
nameLabel.leadingAnchor.constraint(equalTo: marginGuide.leadingAnchor, constant: 60).isActive = true
nameLabel.topAnchor.constraint(equalTo: marginGuide.topAnchor).isActive = true
nameLabel.trailingAnchor.constraint(equalTo: marginGuide.trailingAnchor).isActive = true
nameLabel.numberOfLines = 0
nameLabel.font = UIFont(name: "Arial", size: 16)
// configure authorLabel //the lower element
contentView.addSubview(detailLabel)
detailLabel.translatesAutoresizingMaskIntoConstraints = false
detailLabel.leadingAnchor.constraint(equalTo: marginGuide.leadingAnchor, constant: 60).isActive = true
// detailLabel.bottomAnchor.constraint(equalTo: marginGuide.bottomAnchor).isActive = true
detailLabel.trailingAnchor.constraint(equalTo: marginGuide.trailingAnchor, constant: -20).isActive = true
detailLabel.topAnchor.constraint(equalTo: nameLabel.bottomAnchor, constant: 5).isActive = true
detailLabel.numberOfLines = 0
detailLabel.font = UIFont(name: "Arial", size: 13)
detailLabel.textColor = UIColor.lightGray
// configure dateLabel
contentView.addSubview(dateLabel)
dateLabel.translatesAutoresizingMaskIntoConstraints = false
dateLabel.leadingAnchor.constraint(equalTo: marginGuide.leadingAnchor, constant: 60).isActive = true
dateLabel.bottomAnchor.constraint(equalTo: marginGuide.bottomAnchor).isActive = true
dateLabel.trailingAnchor.constraint(equalTo: marginGuide.trailingAnchor).isActive = true
dateLabel.topAnchor.constraint(equalTo: detailLabel.bottomAnchor, constant: 5).isActive = true
dateLabel.numberOfLines = 0
dateLabel.font = UIFont(name: "Arial", size: 12)
dateLabel.textColor = UIColor.red
dateLabel.text = "Jun 5"
// configure author image
contentView.addSubview(authorProfileImg)
authorProfileImg.translatesAutoresizingMaskIntoConstraints = false
authorProfileImg.widthAnchor.constraint(equalToConstant: 50).isActive = true
authorProfileImg.heightAnchor.constraint(equalToConstant: 50).isActive = true
authorProfileImg.layer.cornerRadius = 50
authorProfileImg.leadingAnchor.constraint(equalTo: marginGuide.leadingAnchor).isActive = true
authorProfileImg.topAnchor.constraint(equalTo: marginGuide.bottomAnchor).isActive = true
authorProfileImg.bottomAnchor.constraint(equalTo: marginGuide.bottomAnchor).isActive = true
// authorProfileImg.trailingAnchor.constraint(equalTo: detailLabel.leadingAnchor).isActive = true
required init?(coder aDecoder: NSCoder)
fatalError("init(coder:) has not been implemented")
我在这里做错了什么？
【问题讨论】：
为什么要在代码中设置约束？故事板更容易处理，尽管今年晚些时候 SwiftUI 发布时这种情况会有所改变。 @Adrian 我的应用程序中的某些内容要求我使用程序化版本（+ 出于可扩展性原因...） @Adrian 我最终用情节提要做到了...：/ 酷。就个人而言，我宁愿把我的啄木鸟关在门上，也不愿用 UIKit 布局视图，但对每个人来说都是他自己的。 【参考方案1】：你离得不远了。
我发现将相关的代码行分组非常有帮助——尤其是在定义约束时。对我来说，跟踪正在发生的事情要容易得多。
所以，在下面的代码中，我进行了分组：
添加子视图 设置元素属性 定义约束您会在 cmets 中看到，我有一个用于将 authorProfileImg 垂直居中的约束，以及另一个用于使其顶部对齐的约束。
class BookTableViewCell: UITableViewCell
let nameLabel = UILabel(frame: .zero)
let detailLabel = UILabel(frame: .zero)
let dateLabel = UILabel(frame: .zero)
let authorProfileImg = UIImageView(frame: .zero)
// MARK: Initalizers
override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?)
super.init(style: style, reuseIdentifier: reuseIdentifier)
let marginGuide = contentView.layoutMarginsGuide
// add the subviews
contentView.addSubview(nameLabel)
contentView.addSubview(detailLabel)
contentView.addSubview(dateLabel)
contentView.addSubview(authorProfileImg)
// we will use auto-layout constraints
nameLabel.translatesAutoresizingMaskIntoConstraints = false
detailLabel.translatesAutoresizingMaskIntoConstraints = false
dateLabel.translatesAutoresizingMaskIntoConstraints = false
authorProfileImg.translatesAutoresizingMaskIntoConstraints = false
// configure labels and image view properties
nameLabel.numberOfLines = 0
nameLabel.font = UIFont(name: "Arial", size: 16)
detailLabel.numberOfLines = 0
detailLabel.font = UIFont(name: "Arial", size: 13)
detailLabel.textColor = UIColor.lightGray
dateLabel.numberOfLines = 0
dateLabel.font = UIFont(name: "Arial", size: 12)
dateLabel.textColor = UIColor.red
dateLabel.text = "Jun 5"
authorProfileImg.layer.cornerRadius = 25
authorProfileImg.backgroundColor = .blue
// set the constraints
NSLayoutConstraint.activate([
// image view leading is marginGuide leading
authorProfileImg.leadingAnchor.constraint(equalTo: marginGuide.leadingAnchor, constant: 0.0),
// image view centered vertically in cell
authorProfileImg.centerYAnchor.constraint(equalTo: marginGuide.centerYAnchor, constant: 0.0),
// if we want image view constrained to top of marginGuide (aligned to top of cell),
// comment the above line (the centerYAnchor line) and un-comment this next line
//authorProfileImg.topAnchor.constraint(equalTo: marginGuide.topAnchor, constant: 0.0),
// image view is 50x50
authorProfileImg.widthAnchor.constraint(equalToConstant: 50.0),
authorProfileImg.heightAnchor.constraint(equalTo: authorProfileImg.widthAnchor),
// name label constrained to top
// leading is 10-pts from image view trailing
// trailing is marginGuide trailing
nameLabel.topAnchor.constraint(equalTo: marginGuide.topAnchor, constant: 0.0),
nameLabel.leadingAnchor.constraint(equalTo: authorProfileImg.trailingAnchor, constant: 10.0),
nameLabel.trailingAnchor.constraint(equalTo: marginGuide.trailingAnchor, constant: 0.0),
// detail label top constrained 5-pts from bottom of name label
// leading is equal to name label leading
// trailing is marginGuide trailing -20 pts
detailLabel.topAnchor.constraint(equalTo: nameLabel.bottomAnchor, constant: 5.0),
detailLabel.leadingAnchor.constraint(equalTo: nameLabel.leadingAnchor, constant: 0.0),
detailLabel.trailingAnchor.constraint(equalTo: marginGuide.trailingAnchor, constant: -20.0),
// date label top constrained 5-pts from bottom of detail label
// leading is equal to name label leading
// trailing is marginGuide trailing
dateLabel.topAnchor.constraint(equalTo: detailLabel.bottomAnchor, constant: 5.0),
dateLabel.leadingAnchor.constraint(equalTo: nameLabel.leadingAnchor, constant: 0.0),
dateLabel.trailingAnchor.constraint(equalTo: marginGuide.trailingAnchor, constant: 0.0),
// date label bottom constrained to marginGuide bottom
dateLabel.bottomAnchor.constraint(equalTo: marginGuide.bottomAnchor, constant: 0.0),
])
required init?(coder aDecoder: NSCoder)
fatalError("init(coder:) has not been implemented")
class BookTableViewController: UITableViewController
override func viewDidLoad()
super.viewDidLoad()
tableView.register(BookTableViewCell.self, forCellReuseIdentifier: "BookCell")
// use a larger value if we expect rows to usually have multiple lines of text
tableView.estimatedRowHeight = 60
override func numberOfSections(in tableView: UITableView) -> Int
return 1
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int
return 10
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell
let cell = tableView.dequeueReusableCell(withIdentifier: "BookCell", for: indexPath) as! BookTableViewCell
if indexPath.row % 2 == 0
cell.nameLabel.text = "Row: \(indexPath.row) Name"
cell.detailLabel.text = "Row: \(indexPath.row) Detail"
cell.dateLabel.text = "Row: \(indexPath.row) Date"
else
cell.nameLabel.text = "Row: \(indexPath.row) Name with\nembedded new-line character."
cell.detailLabel.text = "Row: \(indexPath.row) Detail label with enough text that it will need to word-wrap. Height of label will expand as needed."
cell.dateLabel.text = "Row: \(indexPath.row) Date"
return cell
结果是（垂直居中的imageView）：
顶部对齐的图像视图：
【讨论】：
【参考方案2】：这应该适合你：
let marginGuide = contentView.layoutMarginsGuide
// configure author image
contentView.addSubview(authorProfileImg)
authorProfileImg.translatesAutoresizingMaskIntoConstraints = false
authorProfileImg.widthAnchor.constraint(equalToConstant: 50).isActive = true
authorProfileImg.heightAnchor.constraint(equalToConstant: 50).isActive = true
authorProfileImg.leadingAnchor.constraint(equalTo: marginGuide.leadingAnchor).isActive = true
authorProfileImg.topAnchor.constraint(equalTo: marginGuide.topAnchor).isActive = true
// configure titleLabel //the upper element
contentView.addSubview(nameLabel)
nameLabel.translatesAutoresizingMaskIntoConstraints = false
nameLabel.leadingAnchor.constraint(equalTo: authorProfileImg.trailingAnchor, constant: 10).isActive = true
nameLabel.topAnchor.constraint(equalTo: marginGuide.topAnchor).isActive = true
nameLabel.numberOfLines = 1
nameLabel.font = UIFont(name: "Arial", size: 16)
nameLabel.text = "name here"
nameLabel.sizeToFit()
// configure authorLabel //the lower element
contentView.addSubview(detailLabel)
detailLabel.translatesAutoresizingMaskIntoConstraints = false
detailLabel.leadingAnchor.constraint(equalTo: nameLabel.leadingAnchor).isActive = true
detailLabel.topAnchor.constraint(equalTo: nameLabel.bottomAnchor, constant: 5).isActive = true
detailLabel.sizeToFit()
detailLabel.numberOfLines = 1
detailLabel.font = UIFont(name: "Arial", size: 13)
detailLabel.textColor = UIColor.lightGray
detailLabel.text = "detail here"
// configure dateLabel
contentView.addSubview(dateLabel)
dateLabel.translatesAutoresizingMaskIntoConstraints = false
dateLabel.leadingAnchor.constraint(equalTo: detailLabel.leadingAnchor).isActive = true
dateLabel.topAnchor.constraint(equalTo: detailLabel.bottomAnchor, constant: 5).isActive = true
dateLabel.sizeToFit()
dateLabel.numberOfLines = 1
dateLabel.font = UIFont(name: "Arial", size: 12)
dateLabel.textColor = UIColor.red
dateLabel.text = "Jun 5"
self.sizeToFit()
【讨论】：
有错误吗？还是什么也没显示？还是它们显示但不是您想要的方式？ 好吧，我实现得很完美，但是，我运行它并且约束不能正常工作，因此，单元格不是动态调整大小 您是否将tableView.rowHeight = UITableView.automaticDimension; tableView.estimatedRowHeight = 600 添加到您的tableview 中？
是的，我这样做是为了我的表格视图。以上是关于如何使用 UIImageView 和单元格中的多个标签正确地进行约束？的主要内容，如果未能解决你的问题，请参考以下文章
如何加快 UITableViewCell 中的 UIImageView/UIButton？
如何在 UITableView 的单元格中为 UIImageView 获取 touchesMoved？
如何以编程方式在 TableView 单元中添加多个 UIImageView