Grouped UITableView and horizontal margins

Question

I have a grouped UITableView that was really designed to look nice in portrait mode for iPhone. Its cell subviews have autosizing set up so that they stretch in landscape mode, but this makes it a lot less aesthetically pleasing -- the cells just look too wide for their content.

I'm now making it a universal app but on iPad the autosizing causes even more stretching and it looks just unacceptable.

It would be ideal if I could make the UITableView's groups of cells have a fixed width (or a max width), or if I could somehow control the horizontal margins.

Having not found support for this in UITableView, I have done a few quick attempts at subclassing it to constrain its size at layout time and, as an alternative, at introducing a container view in order to make the UITableView autoresize vertically only. Both approaches work but create new problems: Scrolling doesn't work when swiping in the margins, and I am now forced to make the UITableView's background transparent (which goes against Apple's recommendations) as there is now a discontinuity of background between the UITableView's frame and the margins.

Has anyone found a trick to solve my problem (i.e. constrain the width of the groups in a UITableView, causing margins to expand to fill the width of the view), or an open source solution to it?

Rather than a view container, you can use a simple UIViewController and the table doesn't have to take up the full screen. To solve the visual and scrolling problems, I would create a contrasting background so that you don't need your tableview to have a transparent background and it is clear where they need to swipe in order to scroll. — lnafziger, Jul 09 '12 at 16:42
I don't wish to change the visual appearance by introducing a contrasting background, though. I really want it to look as it does in portrait mode on iPhone, with just added empty space around it in landscape and on iPad. — Clafou, Jul 09 '12 at 17:00
My only other suggestion would be to leave the table full width and supply background images for the cell's which look like the existing cells, but with transparent sides. If you take this approach, you will need 3 images. One with rounded corners on the top, one with them on the bottom, and one with both (for when there is only a single row in a section) and then supply the appropriate one as needed. — lnafziger, Jul 09 '12 at 17:53
Here is a good example of how to do that: http://cocoawithlove.com/2009/04/easy-custom-uitableview-drawing.html — lnafziger, Jul 09 '12 at 18:15
Great article! My app is the kind that does well with the standard iOS look so it's a pity to have to do art at all, but it seems the easiest. I guess I can always closely mimic the standard look. If you make this an answer I'll accept it, thank you! — Clafou, Jul 09 '12 at 19:48
Found a purely programmatic solution after all, see my answer. — Clafou, Jul 19 '12 at 15:49

score 5 · Accepted Answer · edited May 23 '17 at 11:51

5

Good news! I finally found a way to achieve this satisfactorily with only tiny code changes:

Shrink the cells by subclassing UITableViewCell and overriding -setFrame, as per the solution to this post:
How to set the width of a cell in a UITableView in grouped style
And to add vertical padding, using the contentInset property of the UITableView (inherited from UIScrollView) works pretty well.

edited May 23 '17 at 11:51

Community

1
1

answered Jul 19 '12 at 15:49

Clafou

15,250
7
58
89

Note: This is good as long as you don't have section headers, but if you do (through `- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section`) then these section headers ignore the added margin and will look ugly, right against the left edge of the table view. – Clafou Mar 27 '13 at 18:25

score 0 · Answer 2 · answered Jul 09 '12 at 20:57

You can always keep the standard table view and provide custom backgrounds with transparent sides for the table view cell's so that they look smaller than they are.

Cocoa With Love has a great article on how to do that here: Easy custom UITableView drawing.

The basic gist of the article is that you need to make six different versions of the backgrounds, and supply the correct one when tableView:cellForRowAtIndexPath: asks for a cell. You will need one with rounded corners at the top (for the first row of a section), one with rounded corners at the bottom (for the bottom row of a section), and one with all four corners rounded (for when there is only one row in the section). Then you will need the same three, but customized for the "selected" version of each row.

Grouped UITableView and horizontal margins

2 Answers2

Linked