帶有UIImage的Swift5表格視圖單元格顯得非常高并且影像非常縮放

我正在開發一個聊天應用程式，所以行的高度會有所不同。我正在使用單獨的單元格作為純 txt 味精和帶有影像（可能還有文本）的味精。我允許用戶從手機中選擇影像。我在一個單獨的 VC 中顯示該影像，如果他選擇并發送它，他可以在其中輸入文本。我有一個 msg 模型，這意味著我在 base64 和影像格式之間進行轉換。我試圖將我的單元類簡化到最大以理解以下問題：影像視圖中的影像看起來縮放超出了正常手機縮放所允許的范圍；牢房的高度是巨大的。在我需要使用的單元類上，我有更多的專案和約束，但這里感興趣的基本邏輯如下：

    fileprivate func configureMsgsTable() {
    tableView.contentInsetAdjustmentBehavior = .automatic
    tableView.backgroundColor = .clear
    tableView.keyboardDismissMode = .interactive
    tableView.separatorStyle = .none
    tableView.showsVerticalScrollIndicator = false
    tableView.rowHeight = UITableView.automaticDimension
    tableView.estimatedRowHeight = 100
    tableView.sectionFooterHeight = 0.0
}

這些是我用于編碼/解碼的函式：

fileprivate func convertImageToBase64String (img: UIImage) -> String {
    let imageData:NSData = img.jpegData(compressionQuality: 0.50)! as NSData
    let imgString = imageData.base64EncodedString(options: Data.Base64EncodingOptions.lineLength64Characters)
    return imgString
}
fileprivate func convertBase64StringToImage (imageBase64String:String) -> UIImage {
    let imageData = Data.init(base64Encoded: imageBase64String, options: Data.Base64DecodingOptions.ignoreUnknownCharacters)
    let image = UIImage(data: imageData!)
    return image!
}

這是細胞類。

class MsgWithImg: UITableViewCell {
//MARK: - Observer.
internal var valuesToDisplay: NewProjectGrpMsgModel! {
    didSet {
        imgView.image = convertBase64StringToImage(imageBase64String: valuesToDisplay.msgAttachment)
    }
}
//MARK: - Properties.
fileprivate let imgView: UIImageView = {
    let imgView = UIImageView(frame: .zero)
    imgView.clipsToBounds = true
    imgView.translatesAutoresizingMaskIntoConstraints = false
    imgView.contentMode = .scaleAspectFill
    imgView.layer.cornerRadius = 0
    return imgView
}()
//MARK: - Init.
override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
    super.init(style: style, reuseIdentifier: reuseIdentifier)
    backgroundColor = .clear
    clipsToBounds = true
    selectionStyle = .none
    setupViews()
}
required init?(coder: NSCoder) {fatalError("init(coder:) has not been implemented")}
fileprivate func setupViews() {
    contentView.addSubview(imgView)
    let imgViewConstraints = [
        imgView.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 3),
        imgView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -3),
        imgView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
        imgView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -45)
    ]
    NSLayoutConstraint.activate(imgViewConstraints)
}

我花了一些時間認為這是一個自動布局問題；或者表格行高是自動的。這就是為什么我只用影像視圖構建這個測驗單元類的原因。但我認為這個問題具有不同的性質。我確實閱讀了很多關于我可以在該網站上找到相關內容的答案，但我無法確定問題所在，并且控制臺沒有列印出任何內容。

uj5u.com熱心網友回復：

問題是，如果你不同時給出UIImageView寬度和高度，它intrinsicContentSize就會變成分配給它的影像的大小。

使用您的代碼原樣，您通過約束其前導和尾隨錨點為影像視圖提供了一個寬度，但您沒有給它一個高度- 無論是本身還是單元格的高度（因為您想要自動調整大小細胞）。

所以，如果我們使用這四個影像：

生成的表視圖如下所示：

And here's what's happening on an iPhone 13 (note: all sizes are rounded)...

For the 100x200 image:

• your Leading/Trailing constraints make the image view frame 345-pts wide
• no height set, so auto-layout uses the image size (200-pts), setting the image view frame 200-pts tall
• image view is set to .scaleAspectFill, so the scaled size is 345 x 690

For the 100x300 image:

• your Leading/Trailing constraints make the image view frame 345-pts wide
• no height set, so auto-layout uses the image size (300-pts), setting the image view frame 300-pts tall
• image view is set to .scaleAspectFill, so the scaled size is 345 x 1035

For the 600x200 image:

• your Leading/Trailing constraints make the image view frame 345-pts wide
• no height set, so auto-layout uses the image size (200-pts), setting the image view frame 200-pts tall
• image view is set to .scaleAspectFill, so the scaled size is 600 x 200

For the 800x600 image:

• your Leading/Trailing constraints make the image view frame 345-pts wide
• no height set, so auto-layout uses the image size (600-pts), setting the image view frame 600-pts tall
• image view is set to .scaleAspectFill, so the scaled size is 800 x 600

It may be clearer if we set the image view to .scaleAspectFit (with a red background so we can see the frame):

作為一般規則，通常給影像視圖一個固定大小（或比例大小），并用于.scaleAspectFit顯示完整的影像。或者，也常見的是使用前處理器為表格視圖單元格生成“縮略圖”大小的影像。

標籤：

上一篇：根據iOS版本更改tableViewheightForFooterInSection

下一篇：UICollectionViewCompositionalLayout的可重用標頭