Populating dynamic images in UITableViewCell

Question

I am trying to make an app with an anonymous feed exactly like Instagram. I have used AFNetworking to download the JSON data and SDWebImage to add and cache the images.

As I am loading variable size images I want the table view cell to automatically adjust its height.

Now the problem is when the app loads up, image is not displayed properly but after I scroll down and scroll back to the same cell, image adjusts itself exactly the way I want but there is always a space above and below the image.

Before scrolling

---

After Scrolling Back

---

Following are the UIImage view's constraints :

1. Trailing space to superview : 0
2. Leading space to superview : 0
3. Top space: 8
4. bottom space :8
5. Intrinsic size is set to placeholder and content mode to Aspect Fit.

Here's my code of ViewDidLoad method:

 override func viewDidLoad() {
    super.viewDidLoad()

    self.navigationController?.navigationBar.barTintColor = UIColor.yellowColor()

    feedList = NSMutableArray() 

    self.feedTable.rowHeight = UITableViewAutomaticDimension
    self.feedTable.estimatedRowHeight = 200.0

    var connection :  CommunicationManager! = CommunicationManager()

    //initiate a connection and load feed data
    connection.getFeedData( { (response, error) -> Void in

        if(response != nil){
            dispatch_async(dispatch_get_main_queue(), {

                self.feedList = response
                self.feedTable.hidden = false
                self.feedTable.reloadData()
            })

        }

}

TableView's CellForRowAtIndex:

  func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {

    let cell = tableView.dequeueReusableCellWithIdentifier("Cell", forIndexPath: indexPath) as! FeedTableViewCell


    let feedData : NSDictionary! = feedList[indexPath.row] as! NSDictionary

    let imgURL : NSURL! = NSURL(string: feedData.valueForKey("image_name") as! String)
    cell.feedImage.sd_setImageWithURL(imgURL, placeholderImage: UIImage(named: "LoadingImage"))

    return cell
}

I tried all my best to solve this problem but was unable to make it work. Can anyone please tell me how can I solve this issue using storyboard. Thanks in advance.

Answer 1

You need to call layoutIfneeded method : Use following code :-

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
CustomTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cellId"];

[cell.nImageView sd_setImageWithURL:[NSURL URLWithString:[imageUrlArray objectAtIndex:indexPath.row]] completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, NSURL *imageURL) {
    cell.widthConst.constant = image.size.width;
    [cell layoutIfNeeded];
    [cell layoutSubviews];

}];

return cell;

}

If you want dynamic width then you need to add fixed width constraint and update it in block.

refer screenshots