Add NSLayoutConstraint between UIImageView and UITableViewCell

2
votes

I'm trying to add constraints between two elements inside a UITableViewController and so far, I haven't been able to. The UIImage View in inside the UITableViewController, but outside the UITableView Cell.

I can neither use StoryBoard, nor add constraints programatically because Xcode tells me that I can't add a constraint on an object that is going to be reused.

The reason I'm trying to add a constraint is because the UIImageView is dynamically resized by the size of the image that is downloaded. When the image can't be downloaded for whatever reason, it uses a default image and the whole layout falls apart.

Here's what my tableView looks like:

enter image description here

2
iosuitableviewuiimageviewstoryboardnslayoutconstraint
Have you considered adding your UIImageView into UITableViewCell and place it as the first cell in tableView and change the height of cell whenever you get the image from server? – haik.ampardjian
@noir_eagle, no I haven't, but that's a good idea. I will give it a shot. Thank you. – SJCypher
@noir_eagle you should post your comment as an answer. I will accept it as the best answer because it works best for me. – SJCypher
done. check the answer, please, and if it's unclear, let me know. – haik.ampardjian

2 Answers

1
votes

You may consider to wrap your UIImageView into UITableViewCell and put it as the first cell in the UITableView. Moreover, you can break down the hierarchy of your cells in the table view into 2 sections, so it would ease the tracking of your cells. So the first section would contain only the UIImageView cell and the second section would contain your main cells.

Whenever you'll get the response from network request which indicates that the image is fetched, you can call tableView.reloadSections(IndexSet(integer: 0), with: .none) and in the delegate method return the correct height

func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) {
  if indexPath.section == 0 {
    return imageHeight
  }
}
1
votes

The problem is that constraints set a relation between two objects. As your tableViewCell will be reused you can't set the constraints to object that outside the cell.

Actually, you can get the size of the image on the cell and set the constraint to outside ImageView programatically according to cellImageView size.

For example, if the downloaded image width is imageCellWidth, and your outsize imageView should be 2 times bigger.

NSLayoutConstraint *imageViewWidth = [NSLayoutConstraint
                                     constraintWithItem:imageView
                                     attribute:NSLayoutAttributeWidth
                                     relatedBy:NSLayoutRelationEqual
                                     toItem:nil
                                     attribute:NSLayoutAttributeNonAnAttribure
                                     multiplier:1.0f
                             constant:imageCellWidth*2];
[imageView addConstraint: imageViewWidth];

If you need to change this constraint dynamically, just change the constant value

imageViewWidth.constant = newWidth;