tableview dynamic height rows according to content height

Question

My tableview rows are not stretching to fit the imageviews and the imageviews are overlapping.

I set the tableview in automatic dimension and constrain the bottom of the imageview to the cell

There must be something missing, but I could not figure out what.

tableviewcell

- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{   
    self.photoImageView = [[UIImageView alloc]init];
    if (!(self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]))
        return nil;

    [self.contentView addSubview:self.photoImageView];

    [self setConstraints];

    return self;
}

-(void) layoutSubviews {
    [super layoutSubviews];

    self.nameLabel.preferredMaxLayoutWidth = self.nameLabel.frame.size.width;

    [self setConstraints];

}

- (void) setConstraints {

    UILayoutGuide *margins = self.contentView.layoutMarginsGuide;

    self.photoImageView.translatesAutoresizingMaskIntoConstraints = false;
    [self.photoImageView.topAnchor constraintEqualToAnchor:self.contentView.topAnchor constant:7].active = YES;
    [self.photoImageView.bottomAnchor constraintGreaterThanOrEqualToAnchor:self.contentView.bottomAnchor constant:12].active = YES;
    [self.photoImageView.leadingAnchor constraintEqualToAnchor:self.contentView.leadingAnchor constant:8].active = YES;
    [self.photoImageView.heightAnchor constraintEqualToConstant:65].active = YES;
    [self.photoImageView.widthAnchor constraintEqualToConstant:65].active = YES;
    self.photoImageView.contentMode = UIViewContentModeScaleAspectFit;
    self.photoImageView.layer.cornerRadius = self.photoImageView.frame.size.height / 3;
    self.photoImageView.layer.masksToBounds = YES;

}

tableviewcontroller

- (void)viewDidLoad {
    [super viewDidLoad];


    //tableview
    NSString *cellIdentifier = @"cell";
    [self.businessesTableView registerClass:[YPBusinessTableViewCell class] forCellReuseIdentifier:cellIdentifier];
    self.businessesTableView.delegate = self;
    self.businessesTableView.dataSource = self;
    self.refreshControl = [[UIRefreshControl alloc]init];
    [self.businessesTableView addSubview:self.refreshControl];
    [self.refreshControl addTarget:self action:@selector(refreshTable) forControlEvents:UIControlEventValueChanged];

    UIEdgeInsets insets = self.businessesTableView.contentInset;
    insets.bottom += YPInfiniteScrollActivityView.defaultHeight;
    self.businessesTableView.contentInset = insets;

    self.businessesTableView.estimatedRowHeight = 120;
    self.businessesTableView.rowHeight = UITableViewAutomaticDimension;

    UIBarButtonItem *negativeSpacer = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFixedSpace target:nil action:nil];

    UIBarButtonItem *filter = [[UIBarButtonItem alloc] initWithTitle:@"Filter" style:UIBarButtonItemStylePlain target:self action:@selector(presentFilterView)];
    negativeSpacer.width = -14;

    [self.navigationItem setLeftBarButtonItems:@[negativeSpacer, filter] animated:NO];


    [self setConstraints];
    [self doSearch:@"test"];

    [self setupInfiniteScrollView];
    [self addSearchBar];
    [self hideErrorView:self.errorView];


}

EDIT:

I figured out my problem was changing this line

[self.contentView.bottomAnchor  constraintGreaterThanOrEqualToAnchor:self.photoImageView.bottomAnchor constant:0].active = YES;

I needed to constrain the bottom anchor of the contentView to the imageView and not the other way around.

Only issue now is my tableview loads initially with very small cells then when i refresh the images become bigger

Why you don't simply create a reusable cell in storyBoard and set all your constraints there? — Reinier Melian, Dec 26 '16 at 21:54
Possible duplicate of [Change UITableView height dynamically](http://stackoverflow.com/questions/14223931/change-uitableview-height-dynamically) — , Dec 27 '16 at 08:00

score 1 · Answer 1 · answered Dec 27 '16 at 03:48

Just set tableview properties in viewdidload() method

**

tableView.estimatedRowHeight = 2000;  // example
tableView.rowHeight = UITableViewAutomaticDimension;

**

set tableview delegate as

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:
(NSIndexPath *)indexPath{
return UITableViewAutomaticDimension;
}

Also set the elements in UITableView cell with constraints attached from top to bottom

Please refer to this link for more info - https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/AutolayoutPG/WorkingwithSelf-SizingTableViewCells.html

Oh I have not implemented heightforRow. Also did not know you can return UITableviewAutomaticDimension there. Going to try that — mparrish91, Dec 27 '16 at 03:51

score 0 · Answer 2 · answered Dec 26 '16 at 23:49

In you're tableview delegate (tableviewcontroller), you can implement a function called heightForrowAtIndexPath

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath

Assuming you have an Array with all the images, return the corresponding height of the image in at that index.

score 0 · Answer 3 · answered Dec 27 '16 at 00:02

This line in setConstraints looks suspicious to me:

    [self.photoImageView.heightAnchor constraintEqualToConstant:65].active = YES;

If you are using self-sizing table view cells, you probably don't want a constant height.

This is a pretty good tutorial on self-sizing table view cells, which may be helpful: https://www.raywenderlich.com/129059/self-sizing-table-view-cells

score 0 · Answer 4 · answered Dec 28 '16 at 15:47

My problems were completely related to autolayout.

I first needed to constrain the bottom of the cell to the imageviews bottom and not the other way around.

[self.contentView.bottomAnchor  constraintGreaterThanOrEqualToAnchor:self.photoImageView.bottomAnchor constant:0].active = YES;

After that I was having issues with the startup size of the imageview and the size after reloading the table.

I then set fixed width and height on the imageview and that solved all other sizing/reloading issues.

[self.photoImageView.heightAnchor constraintEqualToConstant:65].active = YES;
[self.photoImageView.widthAnchor constraintEqualToConstant:65].active = YES;

tableview dynamic height rows according to content height

4 Answers4