iOS - Custom table cell not full width of UITableView

Question

I may be going about this wrong. So I have created a UITableView that essentially has a auto-layout trailing space set to the main view. I am creating a custom cell for this table so I drug on a prototype cell, customized it, and created my class for it. That is all working just fine.

What I can't seem to solve is the custom cell isn't going the full width of the actual table cell so a white background just shows up. If I don't use the custom cell the entire width table cell gets utilized.

I set the constraints for the cell content so that the background image should fill the cell.

What am I doing wrong? Let me know what you need to help solve this.

ProfileCustomCell.h

#import <UIKit/UIKit.h>

@interface ProfileCustomCell : UITableViewCell {

}

@property (nonatomic, strong) IBOutlet UILabel *nameLabel;
@property (nonatomic, strong) IBOutlet UIImageView *profileImageView;

@end

ProfileCustomCell.m

#import "ProfileCustomCell.h"

@implementation ProfileCustomCell

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {

    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];

    if (self) {
        self.nameLabel.text = nil;
    }

    return self;

}

- (void)setSelected:(BOOL)selected animated:(BOOL)animated {
    [super setSelected:selected animated:animated];
}

@end

UITableView

[tableView registerNib:[UINib nibWithNibName:@"ProfileCustomCell" bundle:[NSBundle mainBundle]] forCellReuseIdentifier:@"Cell"];

[tableView setSeparatorStyle:UITableViewCellSeparatorStyleNone];

ProfileCustomCell *cell = [tableView dequeueReusableCellWithIdentifier:cellIdentifier];

cell.nameLabel.text = [NSString stringWithFormat:@"%@", [child objectForKey:@"first_name"]];
[cell setSelectionStyle:UITableViewCellSelectionStyleNone];

Bale

Check the size of background image of cell. I guess it is a problem of auto layout. – High

It's something to so with the cell its self. If it was just a background image issue the label would not be where it is. It would be all the way to the right. – Bale

give cell color &identify what's the cell size – Gerundive

set a background color on cell's contentView. check whether the imageView has a trailing set to the table's content view ? – Requiescat

@JoshYork can you share your code. – Hoon

@Ashok Londhe I updated it with my code. Currently very basic. – Bale

Answer 1

Can you post the code please .

Did you enable the Use Auto layout and Use Size Classes as below do that first in both table view and table view cell .and tell me your problem

1)After that select both image and label and do as below

2) Select the image and do below

3) select the label an do the following

Can you check the link below:

Table cell content(title) moving left after selecting cell

Singletary

This worked perfectly. I originally had a xib file or the cell, but tried doing it in the storyboard, but just didn't work the way I wanted. Going back to the xib file and setting Use Auto layout and Use Size Classes was what I was missing. Thanks! – Bale

You are welcome. if u have got problem with auto layout and u have posted it on stack overflow feel free to inform me .. i m fond of solving Autolayout issues – Singletary

Answer 2

Instead of "filling", auto layout constraints to leading and trailing space to constant 0 and make sure they're not relative to margins.

Foreigner

Answer 3

select your table view cell's connection inspector and check if you haven't connected editingAccessoryView by mistake

Prefigure

Answer 4

For those that are still having a similar issue and the above fixes are not working, make sure to set Estimated Size of the cell to None. This can be done in the Storyboard Size Inspector. Was stuck for much to long on this one!

Sino

Answer 5

It may help googlers in the future, another typical problem with cell layout is ... in brief .. when laying out your cell

override func layoutSubviews() {
    super.layoutSubviews()
    ...

Incorrect, essentially it won't "fill the cell":

    aLabel.frame = bounds.inset(by: ...)
    aLabel.font = .systemFont(ofSize: pointSize)
    aLabel.text = .. your data
    

Incorrect, still it won't "fill the cell":

    aLabel.frame = bounds.inset(by: ...)
    aLabel.font = .systemFont(ofSize: pointSize)
    aLabel.text = .. your data
    aLabel.sizeToFit()

How to:

    aLabel.font = .systemFont(ofSize: pointSize)
    aLabel.text = .. your data
    aLabel.sizeToFit()
    aLabel.frame = bounds.inset(by: ...)

An alternate solution with pros and cons is use constraints instead, which avoids that issue

Homans