Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make UITableViewCell adjust height to fit its content?

I'm trying to make a UITableViewCell like below, which will adjust its height according to its content view. The image in the center should be as wide as the cell frame, and adjust its height proportionally.

enter image description here

As you can see, the image in the cell doesn't display like the way I want. I tried to set the height of the UIImageView to 320.0 in override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell, but doesn't help at all.

Question: how can I make the cell to respect the height of image?

FYI:

  1. I'm not overriding func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat
  2. I don't set a height constraint to the UIImageView or anything, I'm using paddings only to arrange views.
  3. The image is display using aspect-fit mode.

Edit:

I moved further to add a height constraint to picture:

class MyTableViewPostCell: UITableViewCell {
    @IBOutlet weak var contentLabel: UILabel!
    @IBOutlet weak var pictureImageView: UIImageView!
    @IBOutlet weak var pictureImageViewHeightConstraint: NSLayoutConstraint!
}

class MyTableViewController: UITableViewController {
    override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 1
    }

    override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCellWithIdentifier("MyTableViewPostCell") as MyTableViewPostCell
        cell.contentLabel.text = "This is a very very very very very very very long content."
        cell.pictureImageViewHeightConstraint.constant = 320
        cell.pictureImageView.sd_setImageWithURL(NSURL(string: "http://somedomain.com/pic"))
        return cell
    }
}

And I got a constraint conflict error when running. See below:

(
    "<NSLayoutConstraint:0x7ff7b5026c30 V:[UIImageView:0x7ff7b50289e0(40)]>",
    "<NSLayoutConstraint:0x7ff7b5029a90 V:[UIImageView:0x7ff7b5029990(320)]>",
    "<NSLayoutConstraint:0x7ff7b502a630 UIImageView:0x7ff7b50289e0.top == UITableViewCellContentView:0x7ff7b5028910.topMargin + 6>",
    "<NSLayoutConstraint:0x7ff7b502a770 V:[UIImageView:0x7ff7b50289e0]-(12)-[UILabel:0x7ff7b5029390'This is a very very very ...']>",
    "<NSLayoutConstraint:0x7ff7b502a950 V:[UILabel:0x7ff7b5029390'This is a very very very ...']-(10)-[UIImageView:0x7ff7b5029990]>",
    "<NSLayoutConstraint:0x7ff7b502aa40 UITableViewCellContentView:0x7ff7b5028910.bottomMargin == UILabel:0x7ff7b5029c20'Label'.bottom + 10>",
    "<NSLayoutConstraint:0x7ff7b502aa90 V:[UIImageView:0x7ff7b5029990]-(17)-[UILabel:0x7ff7b5029c20'Label']>",
    "<NSLayoutConstraint:0x7ff7b2cae430 'UIView-Encapsulated-Layout-Height' V:[UITableViewCellContentView:0x7ff7b5028910(283.5)]>"
)

Will attempt to recover by breaking constraint 
<NSLayoutConstraint:0x7ff7b5029a90 V:[UIImageView:0x7ff7b5029990(320)]>

I don't know where UIView-Encapsulated-Layout-Height comes from, but seems like it is causing the conflict. Any way to fix this? Thanks!

like image 521
fengye87 Avatar asked Dec 31 '14 03:12

fengye87


1 Answers

For iOS 7 and below

Use AutoLayout and add constraints properly, then use the UITableViewCellHeightForRow method for dynamic height.

For iOS 8 and above

tableView.estimatedRowHeight = 44.0
tableView.rowHeight = UITableViewAutomaticDimension
like image 51
coreDeviOS Avatar answered Oct 02 '22 22:10

coreDeviOS