在UIImageView中使用UIStackView时，我看到一些奇怪的行为，我怀疑有一些明显的东西我正在忽略-尽管我已经尝试了很多事情。
我想做的事情非常简单：从网上下载图片，将UIImageView设置在UIStackView内。 UIStackView还包含一个UILabel（我的实际项目中包含很多UILabels，因此是UIStackView的原因）。下图显示了彩色背景，以说明问题出在哪里，并且我还包括了完整的Playground代码，以便轻松复制/粘贴。
正在下载的图像大于屏幕的宽度/高度，并且我设置了contentMode = .scaleAspectFit。 UITableView使用tableView.rowHeight = UITableViewAutomaticDimension和.estimatedRowHeight。我设置了约束，并且还尝试将UIImageView的拥抱优先级设置为无效。我不知道确切的单元格高度会提前多少，并且单元格的高度都会有所不同。
实际上发生的是，尽管UIImageView上有前导/尾部约束，单元格上的UIStackView，.rowHeight和.scaleAspectFit上的UIImageView约束，但图像的尺寸调整得非常小。您甚至可以看到（红色）标签的一小部分，因此我知道UIStackView被固定到contentView的UITableViewCell。
颜色键
橙色：UITableViewCell背景
红色：UILabel背景
绿色：UIImageView背景
import UIKit
import PlaygroundSupport
class CustomView: UIView, UITableViewDataSource {
var tableView = UITableView()
var tableData = [String]()
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
override init(frame: CGRect) {
super.init(frame: frame)
backgroundColor = UIColor.gray
tableView.dataSource = self
tableView.rowHeight = UITableViewAutomaticDimension
tableView.estimatedRowHeight = 300
tableView.tableFooterView = UIView()
tableView.translatesAutoresizingMaskIntoConstraints = false
addSubview(tableView)
tableView.leadingAnchor.constraint(equalTo: self.leadingAnchor).isActive = true
tableView.trailingAnchor.constraint(equalTo: self.trailingAnchor).isActive = true
tableView.topAnchor.constraint(equalTo: self.topAnchor).isActive = true
tableView.bottomAnchor.constraint(equalTo: self.bottomAnchor).isActive = true
tableData = [String](repeating: "https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/video/wibbitz/wbz-breakfast-most-important-meal.jpg", count: 2)
tableView.register(CustomCell.self, forCellReuseIdentifier: "cell")
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return tableData.count
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! CustomCell
let imageURL = tableData[indexPath.row]
if let url = URL.init(string: imageURL) {
cell.cellImageView?.downloadImage(with: url,
completion: {
// ...
})
}
return cell
}
}
class CustomCell: UITableViewCell {
var cellImageView: UIImageView?
required init?(coder aDecoder: NSCoder) {
fatalError() // since we're not using
}
override init(style: UITableViewCellStyle, reuseIdentifier: String?) {
super.init(style: style, reuseIdentifier: reuseIdentifier)
setupCell()
}
func setupCell() {
backgroundColor = UIColor.orange
clipsToBounds = true
let tempLabel = UILabel()
tempLabel.translatesAutoresizingMaskIntoConstraints = false
tempLabel.backgroundColor = UIColor.red
tempLabel.text = "this is some text"
tempLabel.numberOfLines = 0
tempLabel.font = UIFont.systemFont(ofSize: 20, weight: .bold)
cellImageView = UIImageView()
cellImageView?.clipsToBounds = true
cellImageView?.contentMode = .scaleAspectFit
cellImageView?.autoresizingMask = [.flexibleWidth, .flexibleHeight]
cellImageView?.backgroundColor = UIColor.green
cellImageView?.translatesAutoresizingMaskIntoConstraints = false
let stackView = UIStackView(arrangedSubviews: [tempLabel, cellImageView!])
contentView.addSubview(stackView)
stackView.translatesAutoresizingMaskIntoConstraints = false
stackView.axis = .vertical
stackView.distribution = .fillProportionally
stackView.alignment = .leading
stackView.spacing = 10
stackView.topAnchor.constraint(equalTo: contentView.topAnchor).isActive = true
stackView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor).isActive = true
stackView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor).isActive = true
stackView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor).isActive = true
cellImageView?.leadingAnchor.constraint(equalTo: stackView.leadingAnchor).isActive = true
cellImageView?.trailingAnchor.constraint(equalTo: stackView.trailingAnchor).isActive = true
}
}
extension UIImageView {
func downloadImage(with url: URL, completion: @escaping () -> Void) {
let task = URLSession.shared.dataTask(with: url) { [weak weakSelf = self] data, response, error in
guard error == nil else {
print("UIImageView: error downloading image: \(String(describing: error))")
return
}
guard let data = data, let downloadedImage = UIImage.init(data: data) else {
print("UIImageView: issue with data from downloaded image.")
return
}
DispatchQueue.main.async {
weakSelf?.image = downloadedImage
completion()
}
}
task.resume()
}
}
let containerView = CustomView(frame: CGRect(x: 0, y: 0, width: 400, height: 600))
containerView.backgroundColor = UIColor.blue
PlaygroundPage.current.liveView = containerView
PlaygroundPage.current.needsIndefiniteExecution = true
最佳答案
您似乎认为堆栈视图内的图像视图将以某种方式从内向外调整单元格的高度。不会的如果要使用自动像元高度，请不要使用堆栈视图（或添加约束以显式调整堆栈视图的大小，但我怀疑这样做是否会为您带来所需的结果）。
无论如何，代码中堆栈视图的目的是什么？堆栈视图的全部作用就是在困难情况下为您提供约束。但这不是一个困难的情况。标签和图像视图可以轻松地手动配置。
关于ios - 使用UIStackView时将UIImageView压缩在UITableViewCell内，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49881283/