ios - PFQueryTableViewController 中带有图像的动态单元格高度

Question

简单:我想要用屏幕的宽度和高度计算图片的大小以保持宽高比，类似于9gag应用程序。

如何在PFQueryTableViewController中制作单元格的动态高度，在我的单元格中，我在自定义单元格中有一个标签和PFImageView，并且加载工作正常，但图片是不改变单元格的高度，并且所有单元格具有相同的高度。我已经第三天陷入这个问题了，它看起来像是来自 parse.com 框架的错误。当我使用 UITableViewController 时，我能够更改单元格高度，但解析框架会忽略它。

我正在使用 Storyboard ，并尝试使用自动布局约束和不使用自动布局约束。TableViewController.swift

import UIKit
import Parse
import ParseUI
import Bolts
class TableViewController: PFQueryTableViewController {

// Initialise the PFQueryTable tableview
override init(style: UITableViewStyle, className: String!) {
    super.init(style: style, className: className)        
}

required init(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)

    // Configure the PFQueryTableView
    self.pullToRefreshEnabled = true
    self.paginationEnabled = false

}

// Define the query that will provide the data for the table view
override func queryForTable() -> PFQuery {

    // Start the query object
    var query = PFQuery(className: "Image")
    query.whereKey("deleted", equalTo: 0)
    query.orderByDescending("createdAt")
    return query
}

//override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell
override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath, object: PFObject?) -> PFTableViewCell? {
    var cell = tableView.dequeueReusableCellWithIdentifier("CustomCell") as! CustomTableViewCell!
    if cell == nil {
        cell = CustomTableViewCell(style: UITableViewCellStyle.Default, reuseIdentifier: "CustomCell")
    }

    // Extract values from the PFObject to display in the table cell
    if let name = object?["caption"] as? String{
        cell.postHeadlineLabel.text = name
    }

    // display initial image
    var initialThumbnail = UIImage(named: "question")
    cell.postImageView.image = initialThumbnail
    // extract image
    if let thumbnail = object?["image"] as? PFFile {
        cell.postImageView.file = thumbnail
        cell.postImageView.loadInBackground()
    }
    cell.postImageView.contentMode = UIViewContentMode.ScaleAspectFit
    cell.postImageView.clipsToBounds = true

    cell.actualWidth = cell.postImageView.image!.size.width
    cell.actualHeight = cell.postImageView.image!.size.height

    return cell
}


    override func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
        var cell = tableView.dequeueReusableCellWithIdentifier("CustomCell") as! CustomTableViewCell!
        let aspect = cell.actualWidth / cell.actualHeight
        var height: CGFloat = cell.postImageView!.frame.size.width * aspect
        return height
    }
}

CustomTableViewCell.swift

import UIKit
import Parse
import ParseUI
class CustomTableViewCell: PFTableViewCell {
 var actualHeight: CGFloat = 10
 var actualWidth: CGFloat = 10
 @IBOutlet weak var postHeadlineLabel: UILabel!
 @IBOutlet weak var postImageView: PFImageView!
}

我在网上找到了一些建议，但它不起作用，似乎是 iOS8 解析框架的错误我试过了

cell.postImageView.contentMode = UIViewContentMode.ScaleAspectFit
cell.postImageView.clipsToBounds = true
cell.sendSubviewToBack(cell.postImageView)

或

override func awakeFromNib() {
    self.setTranslatesAutoresizingMaskIntoConstraints(false)
}

更新 - 解析数据库: https://www.anony.ws/image/D6tp

Answer 1

PFQueryTableViewController继承自UITableViewController，这意味着它符合UITableViewDelegate协议(protocol)。这里有一个你可以重写的方法:

override func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat

在这里，您应该返回一个特定的CGFloat(例如50.0f代表50px或其他)，具体取决于给出的特定单元格的大小索引路径。

<小时/>

更新 1:

OP 提供了更多代码来详细说明该问题

<小时/>

由于您在 tableView:heightForRowAtIndexPath 中调用 tableView.dequeueReusableCellWithIdentifier ，那么这意味着一旦您准备好一个带有图像的单元格，那么它就会不断地使用这个纵横比。 tableView.dequeueReusableCellWithIdentifier 中没有任何逻辑与所提供的 indexPath 处的唯一对象绑定(bind)。

解决这个问题的一种方法是调用 objectAtIndexPath(indexPath)，这是来自 PFQueryTableViewController 的方法。这将使您能够访问指定单元格中的 PFObject 和 PFFile。这样做的缺点是您必须再次下载图像，从而占用大量带宽。它还会减慢您的应用程序的速度，因为您必须等待它下载。

您还可以使用 tableView.cellForRowAtIndexPath(indexPath) 来获取该单元格的唯一内容，但不幸的是 tableView:heightForRowAtIndexPath 在 tableView: PFQueryTableViewController 中的 cellForRowAtIndexPath 这将导致应用崩溃。

<小时/>

我最好的建议是在 Image 类的数据库中添加另一个字段，用于存储图像的宽高比。

如果由于您已经拥有大型数据库或其他一些充分的原因而无法做到这一点，那么我建议您创建一个可以计算宽高比的云函数。

<小时/>

更新2

更新了答案的解决方案

<小时/>

经过一段时间的尝试后，我设法为您的问题找到了解决方案。不幸的是它并不漂亮，我仍然建议您将纵横比存储在数据库模式中作为最佳解决方案。

override func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
    return calculateHeightForRowAtIndexPath(indexPath);
}

func calculateHeightForRowAtIndexPath(indexPath: NSIndexPath) -> CGFloat {
    if let file = objectAtIndexPath(indexPath)?["image"] as? PFFile {
        let image = UIImage(data: file.getData()!)
        let imageToScreenRatio = tableView.bounds.size.width / (image?.size.width)!
        return imageToScreenRatio * (image?.size.height)!
    }
    else {
        return 50.0
    }
}

这确实很糟糕的原因是因为图像是在主 UI 线程中使用 file.getData() 下载的。相反，应该使用 file.getDataInBackgroundWithBlock(block)，但这会导致问题，因为 calculateHeightForRowAtIndexPath 将在下载图像之前返回。

<小时/>

更新3

OP 提供了有关数据库架构的更多信息

<小时/>

由于您已经将比率存储在数据库中，因此您可以通过以下方式计算像元高度:

func calculateHeightForRowAtIndexPath(indexPath: NSIndexPath) -> CGFloat {
    if let ratio = objectAtIndexPath(indexPath)?["aspect"] as? Float {
        return tableView.bounds.size.width / CGFloat(ratio)
    }
    else {
        return 50.0
    }
}