Display iOS7-UItableViewCell as a table in Grouped style

Question

In iOS7, the view cell of a grouped table is displayed over the entire width of the table view, as a simple table style. But in the settings of the simulator application, the grouped style looks different. Can any help in implementing this type of cell?

Answer 1

This default “full width” is iOS7, from the Apple Transition guid:

Each group expands the entire width of the screen.

For the settings, there is no need for all the apple controls to look standard, you need to do some tuning yourself, perhaps put a background for the table cells.

A little tip: do not ruin the table and cell design, and continue to use the standard until people get used to it.

Answer 2

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

Create your own UITableView cell class and override the UITableViewCell. In setFrame, you can adjust the desired cell size. Both setFrame and setAlpha are called after tableView: willDisplayCell: forRowAtIndexPath: therefore any kinds of accessories and images are displayed.

link: 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 the Prototype cell class to CustomTableViewCell and it will be the identifier "CustomTableViewCell"

Answer 3

You can pull out table view cells from the edge of the table view using your own class of table cells and overriding setFrame :. Sample code below.

This answer is based on Aumansoftware's answer (thanks! I would add this as a comment, but not enough rep). The problem with this answer is that it relies on a calling code that sets the frame from scratch and without making relative changes. This is often true, but not if the caller repeatedly modifies an existing frame. This has a side effect of squeezing the frame horizontally on every call. Turns out this is exactly what happens when using drag and drop across rows of a table! So this version just pulls around the edges from the parent view.

 @interface MyTableViewCell : UITableViewCell /** * Pixel inset off left and right sides. */ @property (nonatomic, assign) CGFloat sideInset; @end @implementation MyTableViewCell - (void) setFrame:(CGRect)frame { if (self.superview) { CGFloat parentWidth = self.superview.frame.size.width; if (frame.size.width > (parentWidth - 2.0 * self.sideInset)) { frame.origin.x = self.sideInset; frame.size.width = parentWidth - (2.0f * self.sideInset); } } else { frame.origin.x = self.sideInset; frame.size.width = frame.size.width - (2.0f * self.sideInset); } [super setFrame:frame]; } @end