iOS7-UItableViewCell display in a table view with style Grouped

Question

In iOS7 the grouped table view's cell is displayed to full width of the table view more like a plain table view style. But in the settings app of the simulator the grouped style looks different. Could any help with implementing this type of cell?

Answer 1

This solution will work for iOS7, as well as previous versions of iOS.

Create a custom UITableView cell class and override UITableViewCell. In setFrame you can adjust desired cell size. Both setFrame and setAlpha are called after tableView:willDisplayCell:forRowAtIndexPath: so any accessory views and image views display correctly.

reference : https://developer.apple.com/library/ios/documentation/uikit/reference/UITableViewDelegate_Protocol/#//apple_ref/occ/intfm/UITableViewDelegate/tableView:willDisplayCell:forRowAtIndexPath:

@interface CustomTableViewCell : UITableViewCell

@end

@implementation CustomTableViewCell

-(void) setFrame:(CGRect)frame
{
  float inset = 20.0f;
  frame.origin.x += inset;
  frame.size.width -= 2 * inset;
  [super setFrame:frame];
}
@end

In cellForRowAtIndexPath replace UITableViewCell with CustomTableViewCell.

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    CustomTableViewCell *cell =  [tableView dequeueReusableCellWithIdentifier:@"CustomTableViewCell" forIndexPath:indexPath];

...

}

In your storyboard file set your Prototype cell class to CustomTableViewCell and it is identifier to "CustomTableViewCell"

Answer 2

This 'full width' is a default by iOS7, from the Apple's Transition guid:

Each group extends the full width of the screen.

For the settings, it is not necessary that all apples' controls look standard, You need to do some kind of tweak by your self, maybe put background for the table cells.

Little advice: don't mess the the table nor cell design for now and keep using the standard until the people get used to it.