Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

iOS UITableView Cell Indentation

I am setting up a UITableView programmatically. I would like the content of the cell to span the entire width of the screen. I have successfully set the cell to span the width of the screen, but the content and separators are still inset significantly (iPad screenshot below).

Here is the tableview layout setup in my view controller implementation:

- (void) viewDidLoad {
    [super viewDidLoad];

    // table layout
    self.tableView.rowHeight = 192;
    UILayoutGuide *margins = [self.view layoutMarginsGuide];
    [self.tableView.leadingAnchor constraintEqualToAnchor:margins.leadingAnchor] ;
    [self.tableView.trailingAnchor constraintEqualToAnchor:margins.trailingAnchor];
    self.tableView.contentInset = UIEdgeInsetsMake(0, 0, 0, 0);

    CGRect tableRect = self.view.frame;
    self.tableView.frame = tableRect;

    // table colors
    self.tableView.backgroundColor = [UIColor grayColor];
    self.tableView.separatorColor = [UIColor grayColor];
    UIView *backView = [[UIView alloc] init];
    [backView setBackgroundColor:[UIColor grayColor]];
    [self.tableView setBackgroundView:backView];
}

Then I set the cell's content:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    UITableViewCell* cell = [super tableView:tableView cellForRowAtIndexPath:indexPath];
    cell.backgroundColor = [UIColor blueColor];
    cell.indentationWidth = 0;
    cell.indentationLevel = 0;
    cell.layoutMargins = UIEdgeInsetsMake(0, 0, 0, 0);
    cell.contentView.backgroundColor = [UIColor purpleColor];
    return cell;
}

The cell background is blue, and it spans the width of the screen. The purple area in my screenshot is the contentView, and as you can see, it doesn't stretch to the right edge of the screen, and the cell text is inset at the left. The separator is also inset at left and right.

table screenshot

like image 240
turnerjess Avatar asked Jan 29 '16 17:01

turnerjess


2 Answers

I discovered the issue thanks to the comment on my question by @technerd. Thank you!

I was testing my app on iOS 9.2, and I neglected to account for the new iOS9+ cell property cellLayoutMarginsFollowReadableWidth, which adjusts the cell layout by default.

To turn the auto-resizing off, you'll need to check the iOS version and then disable the property, as @technerd demonstrates:

Objective C

- (void)viewDidLoad {
    [super viewDidLoad];

    //For iOS 9 and Above 

    if ([[[UIDevice currentDevice]systemVersion]floatValue] >= 9.0) {
        self.tableView.cellLayoutMarginsFollowReadableWidth = NO;
    }
}

Swift

override func viewDidLoad() {
    super.viewDidLoad()

    //For iOS 9 and Above 
    if #available(iOS 9, *) {
        tableView.cellLayoutMarginsFollowReadableWidth = false
    }
}

Hope this helps others.

like image 172
turnerjess Avatar answered Sep 28 '22 04:09

turnerjess


The above solution doesn't really work perfectly anymore. Although, all you need to do now is:

tableView.separatorInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)

This will make your separator run throughout the width of the table view.

like image 42
danialzahid94 Avatar answered Sep 28 '22 02:09

danialzahid94