0

I would like to make a grouped UITableView where the cells are not 100% width, this is because I want to show the background, and each cell will have rounded corners.

Sort of like this;

UITableView with less than 100% width

However, I'm not sure how to do this using Storyboard; or is it only something you can do in code?

Ideally, I'd like the whole area scrollable; but make the cells appear less than 100% width

zardon
  • 1,425
  • 2
  • 17
  • 40

3 Answers3

1

One possibility: you could use a container view. That is, in the view controller where you want this table view to appear, add a Container View in interface builder and set the size however you like. Then add a UITableviewController to your storyboard. Embed the UITableviewController in the Container View by control dragging from the Container View to the UITableviewController and selecting embed.

Casey Fleser
  • 5,517
  • 29
  • 43
  • I will try this now. When I started the project with a UITableViewController and tried the solution at http://stackoverflow.com/questions/2539021/how-to-set-the-width-of-a-cell-in-a-uitableview-in-grouped-style I found that the left and right regions were black and did not scroll the table – zardon Sep 15 '14 at 18:33
  • I still get the same issue; the sides are not scrollable. Maybe if I try reducing content width on the cell – zardon Sep 15 '14 at 18:43
  • Ah, okay I didn't realize that the background needed to be in the same scroll view as the rest of the content. – Casey Fleser Sep 15 '14 at 18:45
  • Okay, I am much further now. I created a standard UITableView in Storyboard and added a UITableViewCell which is a Custom UITableViewCell; I make it a subclass and ensure that `- (void)setFrame:(CGRect)frame { frame.origin.x += kInset; frame.size.width -= 2 * kInset; [super setFrame:frame]; } -(void) drawRect:(CGRect)rect { [self.layer setCornerRadius:kCornerRadius]; [self.layer setMasksToBounds:YES]; }` -- This gives me a reasonable padding – zardon Sep 15 '14 at 19:04
  • Until I find a better solution; I will just accept your answer – zardon Sep 15 '14 at 19:13
  • Ah cool. I also thought about setting contentInset on the table view (UIScrollView) but it only seems to respect the top and bottom edges. There may be a way to persuade it to use the left and right as well. Check that. It does use them. Kind of.But they don't work as expected. – Casey Fleser Sep 15 '14 at 19:18
1

i think you can use customized cells, set special backgrounds (with rounded corners etc.) and replacing views to have a padding to the borders. but not sure if it really works well. in the example you would have 3 different cells in one section.

enter image description here

donmarkusi
  • 346
  • 2
  • 13
0

Not sure if this is the best solution; the one I have so far is...

In storyboard

  1. Create UITableView as normal as child of a UIView, set up delegates, data source as required
  2. Add a UITableViewCell to this
  3. Create my own custom subclass of UITableViewCell;
- (void)setFrame:(CGRect)frame {
    frame.origin.x += kInset;
    frame.size.width -= 2 * kInset;
    [super setFrame:frame];
}

-(void) drawRect:(CGRect)rect {
    [self.layer setCornerRadius:kCornerRadius];
    [self.layer setMasksToBounds:YES];
}

The constants are just any number for now, say 10

Next I ensure my UITableViewCell is pointing to this subclass.

Now my cells appear with a margin and the uitableview itself is 100% width.

I will have to keep playing around with it; maybe there is a better solution

zardon
  • 1,425
  • 2
  • 17
  • 40
  • I think this is pretty close. There's no need to use drawRect though. You can do something like self.layer.cornerRadius = 4; in the cell's init method. Also, set the cell's background color to clear, the layer's background color to white, and the table view's background color to gray, and that will give the look the OP shows in his image. – rdelmar Sep 15 '14 at 20:02