Interface Builder "locking" object to screen edges

Question

I've read some tutorials on using AutoLayout but I just can't seem to figure out how to achieve something that I feel should be incredibly simple. I'm designing an application for both 3.5 and 4 inch iPhone/iPod Touch screens. It's a simple tab bar application with a UITableView filling up the entirety of each tab, like so:

I would like for the UITableView to lock to the edges of the screen, regardless of whether the screen is 3.5 or 4 inches. What I currently have works fine on 4-inch screens, but on 3.5 the UITableView extends beyond the width of the screen.

I've tried reading some AutoLayout tutorials as well as fiddling with Interface Builder constraints, but without success. I would appreciate any help you can provide.

Answer 1

You need to attach the UITableView to all edges of the parent UIView, and then the UITableView will expand or shrink to fill the UIView on the device. This will make it appear to be the proper size on all iDevices, including iPad. As pictured in the screenshot below, you can just tap all the dashed red guides, making sure the margins are set to 0 (touch the sides):

You could also Ctrl + drag left, drag right, drag up, and drag down on the UITableView choosing "Leading Space to Container", "Trailing Space to Container," "Top Space to Top Layout Guide", and "Bottom Space to Bottom Layout" respectively.

Alternatively, you could use the Visual Format Language (VFL) (code for a UIViewController below assumes your UITableView is an auto-@synthesized @property named tableView):

/* Turn off springs/structs */
self.tableView.translatesAutoresizingMaskIntoConstraints = NO;

/* Leading and trailing constraints */
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[_tableView]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(_tableView)]];
/* Top and bottom constraints */
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[_tableView]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(_tableView)]];

...or if you really like to be explicit (and like typing):

/* Leading constaint (could use NSLayoutAttributeLeft here as well) */
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:self.tableView attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeading multiplier:1 constant:0]];
/* Trailing constraint (could use NSLayoutAttributeRight here as well) */
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:self.tableView attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTrailing multiplier:1 constant:0]];
/* Top constraint */
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:self.tableView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1 constant:0]];
/* Bottom constraint */
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:self.tableView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1 constant:0]];

The important thing with all of this is that the UITableView is a child of the view of the UIViewController (it most likely is). view will fill the screen as expected by default, and with all of the methods above, you're asking the layout to hold tight against the edges of that maximized view.

Answer 2

NSLayoutConstraints is ridiculous overkill for this IMHO. Just turn it off and do this

self.tableview.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;