Swift - 基于图像宽高比的动态UITableViewCell大小 [英] Swift - Dynamic UITableViewCell size based on image aspect ratio

问题描述

我正在尝试创建动态大小的UITableViewCells，根据从服务器下载的图像的宽高比来更改高度。

I'm trying to create dynamically sized UITableViewCells, changing the height based on the aspect ratio of an image downloaded from a server.

例如，如果是图像的高度是它宽度的两倍，我希望UITableViewCell的高度是屏幕宽度的两倍，这样图像就可以占据屏幕的整个宽度并保持宽高比。

For example, if an image's height is double its width, I want the UITableViewCell's height to be double the screen width so that the image can take up the full width of the screen and maintain the aspect ratio.

我试图做的是向单元格添加约束并使用UITableViewAutomaticDimension来计算高度，但我面临的问题是在下载之前我无法知道图像的纵横比，因此单元格开始关闭小，然后一旦tableView手动刷新，单元格就会显示正确的大小。

What I've tried to do is add constraints to the cell and use UITableViewAutomaticDimension to calculate the height, but the problem I'm facing is that I cannot know the aspect ratio of the image until it is downloaded, and therefore the cells start off small and then once the tableView is refreshed manually the cell appears with the right size.

我不想在下载图像时重新加载每个单独的单元格是做事的好方法。

I don't feel like reloading each individual cell when it's image is downloaded is a great way to do things either.

这种方法是最好的方法吗？我不能为我的生活考虑如何做到这一点，因为我在初始化时无法知道细胞内部的纵横比。

Is this approach the best way to do it? I can't for the life of me think how else to do this, as I can't know the aspect ratio from within the cell itself when it's being initialized.

推荐答案

为了达到这个目的，我首先使用字典 [Int：CGFloat] 来保持计算出的单元格高度然后在<$ c $中c> heightForRowAtIndexpath 方法使用字典中保存的值，在 cellForRowAtIndexpath 方法中，您应该下载图像，计算宽高比，乘以您的单元格宽度或图像宽度按宽高比计算，并将相应的IndexPath编号中的高度计算在字典中

For achieve this I use first a dictionary [Int:CGFloat] to keep the calculated heigths of cells then in the heightForRowAtIndexpath method use the values keeped in your dictionary, in your cellForRowAtIndexpath method you should download your image, calculate the aspect ratio, multiply your cell width or your image width by your aspect ratio and put the height calculated in correspondent IndexPath number in your dictionary

在类似的代码中，这是使用alamofire的代码示例加载图像

In code something like this, this is an example of code using alamofire to load the images

    var rowHeights:[Int:CGFloat] = [:] //declaration of Dictionary


    //My heightForRowAtIndexPath method
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        if let height = self.rowHeights[indexPath.row]{
            return height
        }else{
            return defaultHeight
        }
    }

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

if let cell = tableView.dequeueReusableCell(withIdentifier: "ImageCell") as? ImageCell
        {
        let urlImage = Foundation.URL(string: "http://imageurl")
        cell.articleImage.af_setImage(withURL: urlImage, placeholderImage: self.placeholderImage, filter: nil, imageTransition: .crossDissolve(0.3), completion: { (response) in

            if let image = response.result.value{
                DispatchQueue.main.async {

                    let aspectRatio = (image! as UIImage).size.height/(image! as UIImage).size.width
                    cell.articleImage.image = image
                    let imageHeight = self.view.frame.width*aspectRatio
                    tableView.beginUpdates()
                    self.rowHeights[indexPath.row] = imageHeight
                    tableView.endUpdates()

                }
            }
        })
        }

我希望这有帮助

这篇关于Swift - 基于图像宽高比的动态UITableViewCell大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！