CODEWITHSUNDEEP
iosobjective-cuitableviewautolayout
Josh
Josh

Reputation: 743

ios dynamic cell height determined by photos and text

I am trying to make a feed very similar to Instagram, everything works however I have ran into a problem I cannot figure out how to solve. This feed will include photos that are of different sizes, e.g squares, portrait photos and landscape photos.

The problem is I want to resize the UIImageView in the UITableViewCell to match the size of the photo, and also have the UILabel resize depending on how much text there is. The UIImageView's width will always equal the width of the screen, like Instagram, and only its height will change to make sure the photos are of correct ratio.

Here is a photo of my current cell:

enter image description here

I have tried using autolayout, however I couldn't understand how to get it to work with a UIImageView that will change ratio, from being landscape orientation to portrait orientation etc.

I have also tried in this method here : 

- (UITableViewCell *)tableView:(UITableView *)tableView     cellForRowAtIndexPath:(NSIndexPath *)indexPath object:(PFObject *)object

Manually trying to calculate the size: 

//An example of trying to calculate the size of a view in my cell
    cell.cellView.frame = CGRectMake(0, 0, self.view.frame.size.width,    400);

However, it has gotten extremely complicated that way because I don't know how to resize the actual UITableViewCell height to be unique for every cell.

I have also looked at the following resources:

Link 1

Link 2

Link 3

Link 4

Link 5

All of these are tutorials on dynamic cell height, however they do not seem to explain what to do with my situation.

It would be great if anyone could please suggest what I can do to achieve the Instagram style feed with unique cell heights and unique content size within the cells.

Upvotes: 0

Views: 296

Answers (1)

jsd
jsd

Reputation: 7703

As far as I can tell from looking at the app, each item in the feed is actually a whole section in the tableview. The giveaway is the way the username/location/time header 'snaps' into place at the top and everything else scrolls under it. That's a viewForHeaderInSection. Each section then has 2 or more rows: the photo, the toolbar, the hearts/likes info, and then one row per comment.

So instead of making one giant cell and trying to lay everything out inside it, use multiple cells. You can prototype each cell in the storyboard with a unique reuse identifier, then just figure out what kind of cell you're looking at and dequeue the appropriate one from the storyboard.

Upvotes: 1

Related Questions