CODEWITHSUNDEEP
iphoneobjective-cuitableviewcelltableview
Jonathan Chiu
Jonathan Chiu

Reputation: 1677

Square instead of rounded corners in UITableViewCell grouped style

I want to have square corners for my grouped tableview cells instead of the default rounded corners, and I don't just want to use an image to give that effect. Is it possible?

Upvotes: 4

Views: 7670

Answers (4)

YogiAR
YogiAR

Reputation: 2237

First set your cell's background view as desired and then set the cell's selected background view (to the same bounds as of cell's background)

you can specify the cornerRadius property , so that you can set rounding of corners as desired , i have omitted this property in my case

Here is the code to both :

        UIView *bg = [[UIView alloc] initWithFrame:cell.bounds];
        bg.backgroundColor = [UIColor colorWithRed:0.980 green:0.988 blue:0.984 alpha:1];
        bg.layer.borderColor = [UIColor colorWithRed:0.827 green:0.827 blue:0.835 alpha:1].CGColor;
        bg.layer.borderWidth = kCellBorderWidth;
//        bg.layer.cornerRadius= kCellBorderRadius;
        cell.backgroundView = bg;

        // to make cell selection square and not round (which is by default)
        UIView *bg_selected = [[UIView alloc] initWithFrame:cell.bounds];
        bg_selected.backgroundColor = [UIColor lightGrayColor];
        bg_selected.layer.borderColor = [UIColor colorWithRed:0.827 green:0.827 blue:0.835 alpha:1].CGColor;
        bg_selected.layer.borderWidth = kCellBorderWidth;
        cell.selectedBackgroundView = bg_selected;

Upvotes: 0

Graham Perks
Graham Perks

Reputation: 23400

The accepted answers works well, but unfortunately removes the separator lines between cells. If you have a 3x3 pixel TableCellBackground.png, with the top two rows of pixels white and the lowest third row grey (to match the separator color), you can do: 

    // To square the corners, we replace the background view of the top and bottom cells.
    // In addition, the top cell needs a separator, which we get from TableCellBackground.png.
    UIImage *stretchableImage = [UIImage imageNamed:@"TableCellBackground.png"];
    UIImage *cellImage = [stretchableImage resizableImageWithCapInsets:UIEdgeInsetsMake(1, 1, 1, 1)];
    UIImageView *imageView = [[UIImageView alloc] initWithFrame:cell.bounds];
    imageView.image = cellImage;
    cell.backgroundView = imageView;

Upvotes: 1

Michael Behan
Michael Behan

Reputation: 3443

Most simply, in your tableView:cellForRowAtIndexPath: use

cell.backgroundView = [[[UIView alloc] initWithFrame:cell.bounds] autorelease];

Upvotes: 13

ms83
ms83

Reputation: 1814

You can set the UITableViewCell's backgroundView and selectedBackgroundView to a custom UIView you create yourself. That should give you a square cell.

Upvotes: 1

Related Questions