Dynamic cell height in PFQueryTableViewController with images

Question

Simple: I want the size of the picture with width of the screen and the height calculated to keep the aspect ratio, similar to 9gag app.

How can I make dynamic height of cell in PFQueryTableViewController, in my cell I have one label and PFImageView in a Custom cell and loading works fine, but the pictures are not changing the height of the cell and all of the cells have the same height. I am stuck on this problem for third day and it looks like error from the parse.com framework. I was able to change the cell height when I was working with UITableViewController but the parse framework ignores it.

I am using storyboard and tried that with autolayout constraint and without it. 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!
}

I found some advices online but it doesnt work and seems like error of the parse framework with iOS8 I tried

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

or

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

Update - parse DB: https://www.anony.ws/image/D6tp

Answer 1

PFQueryTableViewController inherits from UITableViewController, which means it conforms to the UITableViewDelegate protocol. Inside here there is a method that you can override called:

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

In here you should return a specific CGFloat (for example 50.0f for 50px or something else) depending on the size of that specific cell given by the indexPath.

---

UPDATE 1:

OP provided more code to elaborate the issue

---

Since you are calling tableView.dequeueReusableCellWithIdentifier in the tableView:heightForRowAtIndexPath, then it means that once you've got one cell with an image ready, then it'll keep using this aspect ratio over and over. There is no logic in your tableView.dequeueReusableCellWithIdentifier which is tied to the unique object at the provided indexPath.

One way to overcome this could be by calling objectAtIndexPath(indexPath), which is a method from PFQueryTableViewController. This will give you access to the PFObject and PFFile at the specified cell. The downside to this is that you'll have to download the image again, thus using a lot of band-width. It will also slow down your app since you'll have to wait for it to download.

You could also make use of tableView.cellForRowAtIndexPath(indexPath) to get something unique for that cell, but unfortunately tableView:heightForRowAtIndexPath is called before tableView:cellForRowAtIndexPath in the PFQueryTableViewController which will cause the app to crash.

---

My best suggestion is to add another field to the database for your Image class which stores the aspect ratio of the image.

If this is not possible since you already have a large database or some other good reason, then I would recommend for you to make a cloud function which can compute the aspect ratio.

---

UPDATE 2

Updated solution to answer

---

After sitting and playing around with it for a while, then I managed to come up with a solution for your issue. Unfortunately it is not pretty and I will still suggest you to store the aspect ratio in your DB schema as the most optimal solution.

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
    }
}

The reason why this is really bad is because the image is being downloaded in the main UI thread using file.getData(). Instead file.getDataInBackgroundWithBlock(block) should be used, but this would cause problems since calculateHeightForRowAtIndexPath would then return before having downloaded the image.

---

UPDATE 3

OP provided more info on DB schema

---

Since you already have the ratio stored in the database, then you can calculate the cell height the following way:

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

Answer 2

What you're implementing is a wrong approach. heightForRowAtIndexPath is called before cellForRowAtIndexPath. So, it will return wrong values in your method. Try to use Device width instead. I've made changes below as per my understanding of your requirement. Try it and make some changes accordingly and let me know if it worked..

In your heightForRowAtIndexPath, try changing

#define ASPECT_RATIO 0.5f
var height: CGFloat = UIScreen.mainScreen().bounds.size.width * ASPECT_RATIO

This one would make the height of the cell as the half of width of device. You can change the value of the aspect ratio according to your requirement. If you have label, you can add height of it in the height variable.