使用堆栈视图将图像添加到 table 视图单元格问题
Adding images to table view cell problem using stack views
在我的原型单元格中,我有一个水平堆栈视图,我将它连接到我的 UITableViewCell,我在我的 UITableViewCell 中定义了一个更新函数,它将多个图像添加到堆栈视图中,我在 TableViewController cellForRowAt 中调用了该函数,但什么都没有发生了。
//inside UITableViewCell
@IBOutlet weak var lineStack: UIStackView!
func update(_ imageName: String){
let numberOfCopies = Int(deviceWidth/50)
let startX = (Int(deviceWidth) - (numberOfCopies*50))/2
xValue = xValue + startX
let image = UIImage(named: imageName)
for _ in 1...Int(numberOfCopies) {
xValue = xValue + heightValue
let imageView = UIImageView(image: image)
imageView.frame = CGRect(x: xValue , y: 0, width: widthValue, height: heightValue)
lineStack.addSubview(imageView)
}
}
//inside TableViewController
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "Line", for: indexPath) as! LineTableViewCell
let imageName = imagesName[indexPath.row]
cell.update(imageName)
return cell
}
对于行:
lineStack.addSubview(imageView)
您需要使用 addArrangedSubview()
而不是 addSubview()
。前者是向视图添加子视图的常规方式,而后者专门用于 UIStackView
并告诉视图正确插入它。
你的 post 表明你希望你的图像是 50 x 50
点...使用自动布局约束 .addArrangedSubview()
:
class TestCell: UITableViewCell {
@IBOutlet var lineStack: UIStackView!
func update(_ imageName: String) {
let numberOfCopies = Int(deviceWidth/50)
let image = UIImage(named: imageName)
for _ in 1...Int(numberOfCopies) {
let imageView = UIImageView(image: image)
imageView.translatesAutoresizingMaskIntoConstraints = false
imageView.widthAnchor.constraint(equalToConstant: 50).isActive = true
imageView.heightAnchor.constraint(equalTo: imageView.widthAnchor).isActive = true
lineStack.addArrangedSubview(imageView)
}
}
}
编辑 示例结果,堆栈视图水平居中:
堆栈视图设置为:
Axis: Horizontal
Alignment: Fill
Distribution: Fill
Spacing: 0
这是有约束的布局:
请注意,stack view 的 Width 约束为 10
,但其 Priority 为 250
... 这允许 stack view 水平拉伸,同时保持 IB 满足约束。
在我的原型单元格中,我有一个水平堆栈视图,我将它连接到我的 UITableViewCell,我在我的 UITableViewCell 中定义了一个更新函数,它将多个图像添加到堆栈视图中,我在 TableViewController cellForRowAt 中调用了该函数,但什么都没有发生了。
//inside UITableViewCell
@IBOutlet weak var lineStack: UIStackView!
func update(_ imageName: String){
let numberOfCopies = Int(deviceWidth/50)
let startX = (Int(deviceWidth) - (numberOfCopies*50))/2
xValue = xValue + startX
let image = UIImage(named: imageName)
for _ in 1...Int(numberOfCopies) {
xValue = xValue + heightValue
let imageView = UIImageView(image: image)
imageView.frame = CGRect(x: xValue , y: 0, width: widthValue, height: heightValue)
lineStack.addSubview(imageView)
}
}
//inside TableViewController
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "Line", for: indexPath) as! LineTableViewCell
let imageName = imagesName[indexPath.row]
cell.update(imageName)
return cell
}
对于行:
lineStack.addSubview(imageView)
您需要使用 addArrangedSubview()
而不是 addSubview()
。前者是向视图添加子视图的常规方式,而后者专门用于 UIStackView
并告诉视图正确插入它。
你的 post 表明你希望你的图像是 50 x 50
点...使用自动布局约束 .addArrangedSubview()
:
class TestCell: UITableViewCell {
@IBOutlet var lineStack: UIStackView!
func update(_ imageName: String) {
let numberOfCopies = Int(deviceWidth/50)
let image = UIImage(named: imageName)
for _ in 1...Int(numberOfCopies) {
let imageView = UIImageView(image: image)
imageView.translatesAutoresizingMaskIntoConstraints = false
imageView.widthAnchor.constraint(equalToConstant: 50).isActive = true
imageView.heightAnchor.constraint(equalTo: imageView.widthAnchor).isActive = true
lineStack.addArrangedSubview(imageView)
}
}
}
编辑 示例结果,堆栈视图水平居中:
堆栈视图设置为:
Axis: Horizontal
Alignment: Fill
Distribution: Fill
Spacing: 0
这是有约束的布局:
请注意,stack view 的 Width 约束为 10
,但其 Priority 为 250
... 这允许 stack view 水平拉伸,同时保持 IB 满足约束。