以编程方式动态计算自定义 TableView Cell 的高度?
Dynamically calculate height of custom TableView Cell programmatically?
我有以下代码来定义我的自定义 tableView 单元格 Class:
import UIKit
import ChameleonFramework
class IsectionsCustomTableViewCell: UITableViewCell {
let sectionDesignationLabelTopPadding: CGFloat = 10
let sectionDesignationLabelLeftPadding: CGFloat = 10
let sectionDesignationLabelRightPadding: CGFloat = 10
let depthOfSectionLabelTopPadding: CGFloat = 5
let depthOfSectionLabelLeftPadding: CGFloat = 10
let depthOfSectionLabelRightPadding: CGFloat = 2.50
let webThicknessLabelTopPadding: CGFloat = 5
let webThicknessLabelLeftPadding: CGFloat = 2.50
let webThicknessLabelRightPadding: CGFloat = 10
let widthOfSectionLabelTopPadding: CGFloat = 5
let widthOfSectionLabelLeftPadding: CGFloat = 10
let widthOfSectionLabelRightPadding: CGFloat = 2.50
let sectionFlangeThicknessLabelTopPadding: CGFloat = 5
let sectionFlangeThicknessLabelLeftPadding: CGFloat = 2.5
let sectionFlangeThicknessLabelRightPadding: CGFloat = 10
let sectionMassPerMetreLabelTopPadding: CGFloat = 5
let sectionMassPerMetreLabelLeftPadding: CGFloat = 10
let sectionMassPerMetreLabelRightPadding: CGFloat = 2.5
var tableCellContainer: UIView = {
let container = UIView()
container.translatesAutoresizingMaskIntoConstraints = false
container.backgroundColor = UIColor.flatPink()
return container
}()
var sectionDesignationLabel: UILabel = {
let label = UILabel()
label.numberOfLines = 0
label.lineBreakMode = NSLineBreakMode.byWordWrapping
label.backgroundColor = UIColor.yellow
label.textAlignment = .left
label.translatesAutoresizingMaskIntoConstraints = false
label.textColor = UIColor(hexString: "#F27E63")
return label
}()
var depthOfSectionLabel: UILabel = {
let label = UILabel()
label.backgroundColor = UIColor.blue
label.numberOfLines = 0
label.textAlignment = .left
label.lineBreakMode = NSLineBreakMode.byWordWrapping
label.translatesAutoresizingMaskIntoConstraints = false
label.textColor = UIColor(hexString: "#F27E63")
return label
}()
var widthOfSectionLabel: UILabel = {
let label = UILabel()
label.numberOfLines = 0
label.textAlignment = .left
label.lineBreakMode = NSLineBreakMode.byWordWrapping
label.translatesAutoresizingMaskIntoConstraints = false
label.textColor = UIColor(hexString: "#F27E63")
label.backgroundColor = UIColor.gray
return label
}()
var sectionWebThicknessLabel: UILabel = {
let label = UILabel()
label.translatesAutoresizingMaskIntoConstraints = false
label.textColor = UIColor(hexString: "#F27E63")
label.backgroundColor = UIColor.cyan
label.textAlignment = .left
label.numberOfLines = 0
label.lineBreakMode = NSLineBreakMode.byWordWrapping
return label
}()
var sectionFlangeThicknessLabel: UILabel = {
let label = UILabel()
label.translatesAutoresizingMaskIntoConstraints = false
label.textColor = UIColor(hexString: "#F27E63")
label.lineBreakMode = NSLineBreakMode.byWordWrapping
label.numberOfLines = 0
label.textAlignment = .left
label.backgroundColor = UIColor.green
return label
}()
var sectionMassPerMetreLabel: UILabel = {
let label = UILabel()
label.translatesAutoresizingMaskIntoConstraints = false
label.textColor = UIColor(hexString: "#F27E63")
label.lineBreakMode = NSLineBreakMode.byWordWrapping
label.numberOfLines = 0
label.textAlignment = .left
label.backgroundColor = UIColor.white
return label
}()
override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
super.init(style: style, reuseIdentifier: reuseIdentifier)
addSubview(tableCellContainer)
tableCellContainer.addSubview(sectionDesignationLabel)
tableCellContainer.addSubview(depthOfSectionLabel)
tableCellContainer.addSubview(sectionWebThicknessLabel)
tableCellContainer.addSubview(widthOfSectionLabel)
tableCellContainer.addSubview(sectionFlangeThicknessLabel)
tableCellContainer.addSubview(sectionMassPerMetreLabel)
applyAppropriateSizeAndConstraintsForCellItems()
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
func applyAppropriateSizeAndConstraintsForCellItems() {
NSLayoutConstraint.activate([
tableCellContainer.topAnchor.constraint(equalTo: self.topAnchor),
tableCellContainer.leftAnchor.constraint(equalTo: self.leftAnchor),
tableCellContainer.rightAnchor.constraint(equalTo: self.rightAnchor),
tableCellContainer.bottomAnchor.constraint(equalTo: self.bottomAnchor),
sectionDesignationLabel.topAnchor.constraint(equalTo: tableCellContainer.topAnchor, constant: sectionDesignationLabelTopPadding),
sectionDesignationLabel.leftAnchor.constraint(equalTo: tableCellContainer.leftAnchor, constant: sectionDesignationLabelLeftPadding),
sectionDesignationLabel.rightAnchor.constraint(equalTo: tableCellContainer.rightAnchor, constant: -1*sectionDesignationLabelRightPadding),
depthOfSectionLabel.topAnchor.constraint(equalTo: sectionDesignationLabel.bottomAnchor, constant: depthOfSectionLabelTopPadding),
depthOfSectionLabel.leftAnchor.constraint(equalTo: tableCellContainer.leftAnchor, constant: depthOfSectionLabelLeftPadding),
depthOfSectionLabel.rightAnchor.constraint(equalTo: tableCellContainer.superview!.centerXAnchor, constant: -1*depthOfSectionLabelRightPadding),
sectionWebThicknessLabel.topAnchor.constraint(equalTo: sectionDesignationLabel.bottomAnchor, constant: webThicknessLabelTopPadding),
sectionWebThicknessLabel.leftAnchor.constraint(equalTo: tableCellContainer.superview!.centerXAnchor, constant: webThicknessLabelLeftPadding),
sectionWebThicknessLabel.rightAnchor.constraint(equalTo: tableCellContainer.rightAnchor, constant: -1*webThicknessLabelRightPadding),
widthOfSectionLabel.topAnchor.constraint(equalTo: depthOfSectionLabel.bottomAnchor, constant: widthOfSectionLabelTopPadding),
widthOfSectionLabel.leftAnchor.constraint(equalTo: tableCellContainer.leftAnchor, constant: widthOfSectionLabelLeftPadding),
widthOfSectionLabel.rightAnchor.constraint(equalTo: tableCellContainer.superview!.centerXAnchor, constant: -1*widthOfSectionLabelRightPadding),
sectionFlangeThicknessLabel.topAnchor.constraint(equalTo: sectionWebThicknessLabel.bottomAnchor, constant: sectionFlangeThicknessLabelTopPadding),
sectionFlangeThicknessLabel.leftAnchor.constraint(equalTo: tableCellContainer.superview!.centerXAnchor, constant: sectionFlangeThicknessLabelLeftPadding),
sectionFlangeThicknessLabel.rightAnchor.constraint(equalTo: tableCellContainer.rightAnchor, constant: -1*sectionFlangeThicknessLabelRightPadding),
sectionMassPerMetreLabel.topAnchor.constraint(equalTo: widthOfSectionLabel.bottomAnchor, constant: sectionMassPerMetreLabelTopPadding),
sectionMassPerMetreLabel.leftAnchor.constraint(equalTo: tableCellContainer.leftAnchor, constant: sectionMassPerMetreLabelLeftPadding),
sectionMassPerMetreLabel.rightAnchor.constraint(equalTo: tableCellContainer.superview!.centerXAnchor, constant: -1*sectionMassPerMetreLabelRightPadding)
])
}
}
当我为所有大于 150 的单元格指定高度时,上述方法效果很好(请参阅附图)。
但是,我想要实现的是自定义 TableViewCell Class 中代码中定义的 tableCellContainer UIView 能够根据其中的子视图计算其高度。因此,我基于所附图像,希望能够计算出 sectionDesignationLabelTopPadding + + sectionDesignationLabelHeight + depthOfSectionLabelTopPadding + depthOfSectionLabelHeight + widthOfSectionLabelTopPadding + widthOfSectionLabelHeight + massPerMetreLabelTopPadding + massPerMetreLabelHeight 的高度。然后将总数与 sectionDesignationLabelTopPadding + sectionDesignationLabelHeight + webThicknessLabelTopPadding + webThicknessLabelHeight + flangeThicknessLabelTopPadding + flangeThicknessLabelHeight 的总数进行比较。我想将两者之间的最大总和设置为 tableCellContainer UIView 的高度。
我尝试做的事情如下:
在包含tableView的ViewController里面,具体是在cellForRowAt indexPath函数里面,计算每个label的高度,然后把总和的最大值设置为容器的高度。但是,这没有用,因为它为每个 UILabel 项目的高度返回了错误的值。
有人可以指导我如何实现我正在寻找的最佳位置和方法,非常感谢高级吗?
此致,
沙迪.
首先分享的就是EPIC尺寸代码。您应该始终从更小的代码开始,以测试您想要学习的新事物。
其次,您正在寻找的功能称为Self sizing tableView cell。有很多教程可以帮助您实现这一目标。
但我很快就会向你解释:
首先,所有子视图都应该具有 self-sizing 的能力(如 UILabel
和 UIButton
或您自己的自定义 类)或具有确切的constraint
s.
的身高尺寸
那么它们都应该以某种方式与单元格(或单元格本身)的 contentView
相关。像这样:V: contentViewTop-subview1-subview2-subview3-contentViewBottom
然后如果你将tableView.rowHeight
设置为UITableView.automaticDimension
,它会自动获取所有子视图的固有内容大小并将其应用于单元格高度。
本教程可以帮助您更好地理解更多细节:
我有以下代码来定义我的自定义 tableView 单元格 Class:
import UIKit
import ChameleonFramework
class IsectionsCustomTableViewCell: UITableViewCell {
let sectionDesignationLabelTopPadding: CGFloat = 10
let sectionDesignationLabelLeftPadding: CGFloat = 10
let sectionDesignationLabelRightPadding: CGFloat = 10
let depthOfSectionLabelTopPadding: CGFloat = 5
let depthOfSectionLabelLeftPadding: CGFloat = 10
let depthOfSectionLabelRightPadding: CGFloat = 2.50
let webThicknessLabelTopPadding: CGFloat = 5
let webThicknessLabelLeftPadding: CGFloat = 2.50
let webThicknessLabelRightPadding: CGFloat = 10
let widthOfSectionLabelTopPadding: CGFloat = 5
let widthOfSectionLabelLeftPadding: CGFloat = 10
let widthOfSectionLabelRightPadding: CGFloat = 2.50
let sectionFlangeThicknessLabelTopPadding: CGFloat = 5
let sectionFlangeThicknessLabelLeftPadding: CGFloat = 2.5
let sectionFlangeThicknessLabelRightPadding: CGFloat = 10
let sectionMassPerMetreLabelTopPadding: CGFloat = 5
let sectionMassPerMetreLabelLeftPadding: CGFloat = 10
let sectionMassPerMetreLabelRightPadding: CGFloat = 2.5
var tableCellContainer: UIView = {
let container = UIView()
container.translatesAutoresizingMaskIntoConstraints = false
container.backgroundColor = UIColor.flatPink()
return container
}()
var sectionDesignationLabel: UILabel = {
let label = UILabel()
label.numberOfLines = 0
label.lineBreakMode = NSLineBreakMode.byWordWrapping
label.backgroundColor = UIColor.yellow
label.textAlignment = .left
label.translatesAutoresizingMaskIntoConstraints = false
label.textColor = UIColor(hexString: "#F27E63")
return label
}()
var depthOfSectionLabel: UILabel = {
let label = UILabel()
label.backgroundColor = UIColor.blue
label.numberOfLines = 0
label.textAlignment = .left
label.lineBreakMode = NSLineBreakMode.byWordWrapping
label.translatesAutoresizingMaskIntoConstraints = false
label.textColor = UIColor(hexString: "#F27E63")
return label
}()
var widthOfSectionLabel: UILabel = {
let label = UILabel()
label.numberOfLines = 0
label.textAlignment = .left
label.lineBreakMode = NSLineBreakMode.byWordWrapping
label.translatesAutoresizingMaskIntoConstraints = false
label.textColor = UIColor(hexString: "#F27E63")
label.backgroundColor = UIColor.gray
return label
}()
var sectionWebThicknessLabel: UILabel = {
let label = UILabel()
label.translatesAutoresizingMaskIntoConstraints = false
label.textColor = UIColor(hexString: "#F27E63")
label.backgroundColor = UIColor.cyan
label.textAlignment = .left
label.numberOfLines = 0
label.lineBreakMode = NSLineBreakMode.byWordWrapping
return label
}()
var sectionFlangeThicknessLabel: UILabel = {
let label = UILabel()
label.translatesAutoresizingMaskIntoConstraints = false
label.textColor = UIColor(hexString: "#F27E63")
label.lineBreakMode = NSLineBreakMode.byWordWrapping
label.numberOfLines = 0
label.textAlignment = .left
label.backgroundColor = UIColor.green
return label
}()
var sectionMassPerMetreLabel: UILabel = {
let label = UILabel()
label.translatesAutoresizingMaskIntoConstraints = false
label.textColor = UIColor(hexString: "#F27E63")
label.lineBreakMode = NSLineBreakMode.byWordWrapping
label.numberOfLines = 0
label.textAlignment = .left
label.backgroundColor = UIColor.white
return label
}()
override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
super.init(style: style, reuseIdentifier: reuseIdentifier)
addSubview(tableCellContainer)
tableCellContainer.addSubview(sectionDesignationLabel)
tableCellContainer.addSubview(depthOfSectionLabel)
tableCellContainer.addSubview(sectionWebThicknessLabel)
tableCellContainer.addSubview(widthOfSectionLabel)
tableCellContainer.addSubview(sectionFlangeThicknessLabel)
tableCellContainer.addSubview(sectionMassPerMetreLabel)
applyAppropriateSizeAndConstraintsForCellItems()
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
func applyAppropriateSizeAndConstraintsForCellItems() {
NSLayoutConstraint.activate([
tableCellContainer.topAnchor.constraint(equalTo: self.topAnchor),
tableCellContainer.leftAnchor.constraint(equalTo: self.leftAnchor),
tableCellContainer.rightAnchor.constraint(equalTo: self.rightAnchor),
tableCellContainer.bottomAnchor.constraint(equalTo: self.bottomAnchor),
sectionDesignationLabel.topAnchor.constraint(equalTo: tableCellContainer.topAnchor, constant: sectionDesignationLabelTopPadding),
sectionDesignationLabel.leftAnchor.constraint(equalTo: tableCellContainer.leftAnchor, constant: sectionDesignationLabelLeftPadding),
sectionDesignationLabel.rightAnchor.constraint(equalTo: tableCellContainer.rightAnchor, constant: -1*sectionDesignationLabelRightPadding),
depthOfSectionLabel.topAnchor.constraint(equalTo: sectionDesignationLabel.bottomAnchor, constant: depthOfSectionLabelTopPadding),
depthOfSectionLabel.leftAnchor.constraint(equalTo: tableCellContainer.leftAnchor, constant: depthOfSectionLabelLeftPadding),
depthOfSectionLabel.rightAnchor.constraint(equalTo: tableCellContainer.superview!.centerXAnchor, constant: -1*depthOfSectionLabelRightPadding),
sectionWebThicknessLabel.topAnchor.constraint(equalTo: sectionDesignationLabel.bottomAnchor, constant: webThicknessLabelTopPadding),
sectionWebThicknessLabel.leftAnchor.constraint(equalTo: tableCellContainer.superview!.centerXAnchor, constant: webThicknessLabelLeftPadding),
sectionWebThicknessLabel.rightAnchor.constraint(equalTo: tableCellContainer.rightAnchor, constant: -1*webThicknessLabelRightPadding),
widthOfSectionLabel.topAnchor.constraint(equalTo: depthOfSectionLabel.bottomAnchor, constant: widthOfSectionLabelTopPadding),
widthOfSectionLabel.leftAnchor.constraint(equalTo: tableCellContainer.leftAnchor, constant: widthOfSectionLabelLeftPadding),
widthOfSectionLabel.rightAnchor.constraint(equalTo: tableCellContainer.superview!.centerXAnchor, constant: -1*widthOfSectionLabelRightPadding),
sectionFlangeThicknessLabel.topAnchor.constraint(equalTo: sectionWebThicknessLabel.bottomAnchor, constant: sectionFlangeThicknessLabelTopPadding),
sectionFlangeThicknessLabel.leftAnchor.constraint(equalTo: tableCellContainer.superview!.centerXAnchor, constant: sectionFlangeThicknessLabelLeftPadding),
sectionFlangeThicknessLabel.rightAnchor.constraint(equalTo: tableCellContainer.rightAnchor, constant: -1*sectionFlangeThicknessLabelRightPadding),
sectionMassPerMetreLabel.topAnchor.constraint(equalTo: widthOfSectionLabel.bottomAnchor, constant: sectionMassPerMetreLabelTopPadding),
sectionMassPerMetreLabel.leftAnchor.constraint(equalTo: tableCellContainer.leftAnchor, constant: sectionMassPerMetreLabelLeftPadding),
sectionMassPerMetreLabel.rightAnchor.constraint(equalTo: tableCellContainer.superview!.centerXAnchor, constant: -1*sectionMassPerMetreLabelRightPadding)
])
}
}
当我为所有大于 150 的单元格指定高度时,上述方法效果很好(请参阅附图)。
但是,我想要实现的是自定义 TableViewCell Class 中代码中定义的 tableCellContainer UIView 能够根据其中的子视图计算其高度。因此,我基于所附图像,希望能够计算出 sectionDesignationLabelTopPadding + + sectionDesignationLabelHeight + depthOfSectionLabelTopPadding + depthOfSectionLabelHeight + widthOfSectionLabelTopPadding + widthOfSectionLabelHeight + massPerMetreLabelTopPadding + massPerMetreLabelHeight 的高度。然后将总数与 sectionDesignationLabelTopPadding + sectionDesignationLabelHeight + webThicknessLabelTopPadding + webThicknessLabelHeight + flangeThicknessLabelTopPadding + flangeThicknessLabelHeight 的总数进行比较。我想将两者之间的最大总和设置为 tableCellContainer UIView 的高度。
我尝试做的事情如下:
在包含tableView的ViewController里面,具体是在cellForRowAt indexPath函数里面,计算每个label的高度,然后把总和的最大值设置为容器的高度。但是,这没有用,因为它为每个 UILabel 项目的高度返回了错误的值。
有人可以指导我如何实现我正在寻找的最佳位置和方法,非常感谢高级吗?
此致, 沙迪.
首先分享的就是EPIC尺寸代码。您应该始终从更小的代码开始,以测试您想要学习的新事物。
其次,您正在寻找的功能称为Self sizing tableView cell。有很多教程可以帮助您实现这一目标。
但我很快就会向你解释:
首先,所有子视图都应该具有 self-sizing 的能力(如
UILabel
和UIButton
或您自己的自定义 类)或具有确切的constraint
s. 的身高尺寸
那么它们都应该以某种方式与单元格(或单元格本身)的
contentView
相关。像这样:V: contentViewTop-subview1-subview2-subview3-contentViewBottom
然后如果你将
tableView.rowHeight
设置为UITableView.automaticDimension
,它会自动获取所有子视图的固有内容大小并将其应用于单元格高度。
本教程可以帮助您更好地理解更多细节: