在表视图中调整行大小的最佳方法是什么? [英] What is the best approach to resize rows in a table view?

问题描述

在表格视图中尽可能平滑地调整行大小的最佳方法是什么，以便单元格中包含的图像在占据整个单元格的同时保持其纵横比?注意:这些图像是在 cellForRowAt 方法中下载的，因此它们的大小在应用程序运行时之前是未知的.

What is the best approach to resize rows in a table view as smoothly as possible so that the image contained in the cell preserves its aspect ratio while taking up the whole cell? Note: These images are being downloaded in cellForRowAt method so their sizes are not known until this point during the application runtime.

更新:这是配置 TableViewCell 的代码

UPDATE: This is the code which configures the TableViewCell

import UIKit

class TableViewCell: UITableViewCell {

@IBOutlet weak var cellImageView: UIImageView!

var aspectConstraint: NSLayoutConstraint?

override func prepareForReuse() {
    super.prepareForReuse()
    aspectConstraint = nil
}

func setCellImage(image:UIImage){
    let aspect = image.size.width / image.size.height
    aspectConstraint = cellImageView.heightAnchor.constraint(equalTo: cellImageView.widthAnchor, multiplier: aspect)
    cellImageView.image = image
}
}

这是tableViewController的代码

This is the code for the tableViewController

import UIKit
import Firebase
import FirebaseStorageUI

class TableViewController: UITableViewController {
var imageURLS:[String] = [String]()
var listener:ListenerRegistration?

override func viewDidLoad() {
    super.viewDidLoad()

    listener = Firestore.firestore().collection("Posts").addSnapshotListener{
        querySnapshot, error in
        guard let snapshot = querySnapshot else {
            print("Error fetching snapshots: \(error!)")
            return
        }
        snapshot.documentChanges.forEach { diff in
            if (diff.type == .added) {
                print("New data: \(diff.document.data())")
            }
            if (diff.type == .modified) {
                print("Modified data: \(diff.document.data())")
            }
            if (diff.type == .removed) {
                print("Removed data: \(diff.document.data())")
            }

            guard let newImageURL = diff.document.data()["imageDownloadURL"] as? String else{
                print("Failed to get image download URL")
                return
            }

            print("downloadURL: \(newImageURL)")
            self.imageURLS.insert(newImageURL, at: 0)
            let indexPath = IndexPath(row: 0, section: 0)
            self.tableView.insertRows(at: [indexPath], with: .top)


        }

    }
    tableView.estimatedRowHeight = 100.0
    tableView.rowHeight = UITableViewAutomaticDimension
}


override func numberOfSections(in tableView: UITableView) -> Int {
    return 1
}

override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return imageURLS.count
}


override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "Reuse", for: indexPath) as! TableViewCell

    let downloadURL = URL(string: self.imageURLS[indexPath.row])


    if cell.cellImageView.image == nil{
        URLSession.shared.dataTask(with: downloadURL!) { (data, _, _) in
            if let data = data {
                let image = UIImage(data: data)
                DispatchQueue.main.async {
                    cell.setCellImage(image:image!)
                    tableView.reloadRows(at: [indexPath], with: .top)
                }
            }
            }.resume()
    }

    return cell
}

}

推荐答案

您应该按照以下步骤操作:

You should follow these steps:

1. 为 tableview 设置 UITableViewAutomaticDimension

2. 将图像视图的自动布局约束设置为单元格的顶部和底部，以便单元格将其高度自动调整为图像视图的高度.

1. Set UITableViewAutomaticDimension for the tableview

2. Set auto layout constraints for the image view to the top and bottom of the cell so that the cell will automatically adjust its height to the height of the image view.

由于您已下载图像，因此您应该在图像下载完成后重新加载重新加载单元(如果您可以分享用于下载图像的代码，我将能够对此进行更多解释).

Since you are images are downloaded you should reload reload cell on the completion of the image download (I will be able to explain more on this if you can share the code you use to download the images).

这篇关于在表视图中调整行大小的最佳方法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！