How can I set the UITableView border with a grouped style

Does anyone know if it is possible to replace the grey border on grouped table view cells

The opposite to this post: Chang开发者_如何学Cing border color in iPhone UITableView cells (non-grouped)

It isn't easy unfortunately, but you don't have to resort to images. Here is a class I modified - it came from How to customize the background/border colors of a grouped table view cell?, but I added the ability to switch between a solid fill color or a gradient, as well as a property to use the blue selection mode so you can use this as the cell selectedBackgroundView if you support selection.

Modes: 1.useBlackGradient or useWhiteGradient to use built-in gradients 2.gradientStartColor/gradientEndColor properties to setup your own 3.useBlueSelectionGradient = YES to put it into selection mode using the blue highlight (same as apple uses)

Here is how you'd use it:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    UITableViewCell *cell = [super tableView:tableView cellForRowAtIndexPath:indexPath];

    cell.imageView.layer.masksToBounds = YES;
    cell.imageView.layer.cornerRadius = 9.0;

    cell.textLabel.backgroundColor = [UIColor clearColor];
    cell.textLabel.opaque = NO;
    cell.textLabel.textColor = [UIColor blackColor];


    if(!cell.backgroundView || ![cell.backgroundView isKindOfClass:[CustomCellBackgroundView class]])
    {
        cell.backgroundView = [[CustomCellBackgroundView alloc] initWithFrame:CGRectZero];
    }
    CustomCellBackgroundView *bgView = (CustomCellBackgroundView *)cell.backgroundView;
    NSInteger numRows = [self tableView:self.tableView numberOfRowsInSection:indexPath.section];
    if(indexPath.row == 0 && indexPath.row == numRows - 1)
    {
        bgView.position = CustomCellBackgroundViewPositionSingle;
    }
    else if (indexPath.row == 0) 
    {
        bgView.position = CustomCellBackgroundViewPositionTop;
    } 
    else if (indexPath.row != numRows - 1) 
    {
        bgView.position = CustomCellBackgroundViewPositionMiddle;
    } 
    else 
    {
        bgView.position = CustomCellBackgroundViewPositionBottom;
    }

    [bgView useWhiteGradient];
    bgView.borderColor = [UIColor clearColor];
    //bgView.fillColor = [UIColor greenColor];

    return cell;
}

Here is the header and implementation:

//CustomCellBackgroundView.h
#import <UIKit/UIKit.h>

typedef enum  {
    CustomCellBackgroundViewPositionTop, 
    CustomCellBackgroundViewPositionMiddle, 
    CustomCellBackgroundViewPositionBottom,
    CustomCellBackgroundViewPositionSingle
} CustomCellBackgroundViewPosition;

@interface CustomCellBackgroundView : UIView {
    UIColor *borderColor;
    UIColor *fillColor;
    CustomCellBackgroundViewPosition position;

    UIColor *gradientStartColor;
    UIColor *gradientEndColor;

    BOOL useBlueSelectionGradient;
    CGGradientRef gradient;
    CGGradientRef selectGradient;
}

@property(nonatomic, retain) UIColor *borderColor, *fillColor;
@property(nonatomic, retain) UIColor *gradientStartColor, *gradientEndColor;
@property(nonatomic, assign) BOOL useBlueSelectionGradient;
@property(nonatomic) CustomCellBackgroundViewPosition position;


-(void)useBlackGradient;
-(void)useWhiteGradient;

@end



//CustomCellBackgroundView.m
#import "CustomCellBackgroundView.h"

#define ROUND_SIZE 10

static void addRoundedRectToPath(CGContextRef context, CGRect rect,
                                 float ovalWidth,float ovalHeight);

@implementation CustomCellBackgroundView
@synthesize borderColor, fillColor, position, useBlueSelectionGradient;
@synthesize gradientStartColor, gradientEndColor;

- (BOOL) isOpaque {
    return NO;
}

- (id)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) {
        // Initialization code
        selectGradient = NULL;
        gradient = NULL;
    }
    return self;
}


- (void)createGradient
{
    if (gradient != NULL)
    {
        CGGradientRelease(gradient);
        gradient = NULL;
    }

    if(self.gradientStartColor && self.gradientEndColor)
    {
        const float* topColor = CGColorGetComponents([self.gradientStartColor CGColor]);
        const float* bottomColor = CGColorGetComponents([self.gradientEndColor CGColor]);

        CGColorSpaceRef rgb = CGColorSpaceCreateDeviceRGB();
        CGFloat colors[]=
        {
            topColor[0],    topColor[1],    topColor[2],    topColor[3],
            bottomColor[0], bottomColor[1], bottomColor[2], bottomColor[3]
        };
        size_t numColors = sizeof(colors)/(sizeof(colors[0])*4);
        gradient = CGGradientCreateWithColorComponents(rgb, colors, NULL, numColors);
        CGColorSpaceRelease(rgb);
    }
}

- (void)setUseBlueSelectionGradient:(BOOL)newValue
{
    useBlueSelectionGradient = newValue;
    if(useBlueSelectionGradient && selectGradient == NULL)
    {
        CGColorSpaceRef rgb = CGColorSpaceCreateDeviceRGB();
        CGFloat colors[] =
        {
            5.0 / 255.0, 140.0 / 255.0, 245.0 / 255.0, 1.00,
            1.0 / 255.0,  93.0 / 255.0, 230.0 / 255.0, 1.00,
        };
        size_t numColors = sizeof(colors)/(sizeof(colors[0])*4);
        selectGradient = CGGradientCreateWithColorComponents(rgb, colors, NULL, numColors);
        CGColorSpaceRelease(rgb);
        [self setNeedsDisplay];
    }
    else if (!useBlueSelectionGradient && selectGradient != NULL)
    {
        CGGradientRelease(selectGradient);
        selectGradient = NULL;
        [self setNeedsDisplay];
    }
}

- (void)setGradientStartColor:(UIColor *)inColor
{
    if(inColor != gradientStartColor)
    {
        [gradientStartColor release];
        gradientStartColor = inColor;
        [gradientStartColor retain];
        [self createGradient];
    }
}

- (void)setGradientEndColor:(UIColor *)inColor
{
    if(inColor != gradientEndColor)
    {
        [gradientEndColor release];
        gradientEndColor = inColor;
        [gradientEndColor retain];
        [self createGradient];
    }
}

- (void) setPosition:(CustomCellBackgroundViewPosition)inPosition
{
    if(position != inPosition)
    {
        position = inPosition;
        [self setNeedsDisplay];
    }
}

-(void)useBlackGradient
{
    self.gradientStartColor = [UIColor colorWithRed:0.154 green:0.154 blue:0.154 alpha:1.0];
    self.gradientEndColor = [UIColor colorWithRed:0.307 green:0.307 blue:0.307 alpha:1.0];
}

-(void)useWhiteGradient
{
    self.gradientStartColor = [UIColor colorWithRed:0.864 green:0.864 blue:0.864 alpha:1.0];
    self.gradientEndColor = [UIColor colorWithRed:0.956 green:0.956 blue:0.956 alpha:1.0];
}

-(void)drawRect:(CGRect)rect 
{
    // Drawing code

    CGContextRef c = UIGraphicsGetCurrentContext();
    CGContextSetFillColorWithColor(c, [fillColor CGColor]);
    CGContextSetStrokeColorWithColor(c, [borderColor CGColor]);
    CGContextSetLineWidth(c, 2);


    CGFloat minx = CGRectGetMinX(rect) , midx = CGRectGetMidX(rect), maxx = CGRectGetMaxX(rect) ;
    CGFloat miny = CGRectGetMinY(rect) , midy = CGRectGetMidY(rect) , maxy = CGRectGetMaxY(rect) ;
    if (position == CustomCellBackgroundViewPositionTop) 
    {
        minx = minx + 1;
        miny = miny + 1;

        maxx = maxx - 1;
        maxy = maxy ;

        CGContextMoveToPoint(c, minx, maxy);
        CGContextAddArcToPoint(c, minx, miny, midx, miny, ROUND_SIZE);
        CGContextAddArcToPoint(c, maxx, miny, maxx, maxy, ROUND_SIZE);
        CGContextAddLineToPoint(c, maxx, maxy);
    } 
    else if (position == CustomCellBackgroundViewPositionBottom) 
    {
        minx = minx + 1;
        miny = miny ;

        maxx = maxx - 1;
        maxy = maxy - 1;

        CGContextMoveToPoint(c, minx, miny);
        CGContextAddArcToPoint(c, minx, maxy, midx, maxy, ROUND_SIZE);
        CGContextAddArcToPoint(c, maxx, maxy, maxx, miny, ROUND_SIZE);
        CGContextAddLineToPoint(c, maxx, miny);
    } 
    else if (position == CustomCellBackgroundViewPositionMiddle) 
    {
        minx = minx + 1;
        miny = miny ;

        maxx = maxx - 1;
        maxy = maxy ;

        CGContextMoveToPoint(c, minx, miny);
        CGContextAddLineToPoint(c, maxx, miny);
        CGContextAddLineToPoint(c, maxx, maxy);
        CGContextAddLineToPoint(c, minx, maxy);
    }
    else if (position == CustomCellBackgroundViewPositionSingle)
    {
        minx = minx + 1;
        miny = miny + 1;

        maxx = maxx - 1;
        maxy = maxy - 1;

        CGContextMoveToPoint(c, minx, midy);
        CGContextAddArcToPoint(c, minx, miny, midx, miny, ROUND_SIZE);
        CGContextAddArcToPoint(c, maxx, miny, maxx, midy, ROUND_SIZE);
        CGContextAddArcToPoint(c, maxx, maxy, midx, maxy, ROUND_SIZE);
        CGContextAddArcToPoint(c, minx, maxy, minx, midy, ROUND_SIZE);
    }
    else 
    {
        return;
    }


    // Close the path
    CGContextClosePath(c);  

    if(selectGradient != NULL || gradient != NULL)
    {
        CGContextSaveGState(c);
        CGContextClip(c);
        CGContextDrawLinearGradient(c, 
                                    selectGradient != NULL ? selectGradient : gradient, 
                                    CGPointMake(minx,miny), 
                                    CGPointMake(minx,maxy), 
                                    kCGGradientDrawsBeforeStartLocation | kCGGradientDrawsAfterEndLocation);
        CGContextRestoreGState(c);
    }
    else 
    {
        CGContextDrawPath(c, kCGPathFillStroke);
    }
}

- (void)dealloc 
{
    if (selectGradient != NULL)
    {
        CGGradientRelease(selectGradient);
        selectGradient = NULL;
    }
    if (gradient != NULL)
    {
        CGGradientRelease(gradient);
        gradient = NULL;
    }

    [gradientStartColor release];
    [gradientEndColor release];
    [borderColor release];
    [fillColor release];

    [super dealloc];
}


@end

static void addRoundedRectToPath(CGContextRef context, CGRect rect,
                                 float ovalWidth,float ovalHeight)

{
    float fw, fh;

    if (ovalWidth == 0 || ovalHeight == 0) {// 1
        CGContextAddRect(context, rect);
        return;
    }

    CGContextSaveGState(context);// 2

    CGContextTranslateCTM (context, CGRectGetMinX(rect),// 3
                           CGRectGetMinY(rect));
    CGContextScaleCTM (context, ovalWidth, ovalHeight);// 4
    fw = CGRectGetWidth (rect) / ovalWidth;// 5
    fh = CGRectGetHeight (rect) / ovalHeight;// 6

    CGContextMoveToPoint(context, fw, fh/2); // 7
    CGContextAddArcToPoint(context, fw, fh, fw/2, fh, 1);// 8
    CGContextAddArcToPoint(context, 0, fh, 0, fh/2, 1);// 9
    CGContextAddArcToPoint(context, 0, 0, fw/2, 0, 1);// 10
    CGContextAddArcToPoint(context, fw, 0, fw, fh/2, 1); // 11
    CGContextClosePath(context);// 12

    CGContextRestoreGState(context);// 13
}

You'll need to create an entire tableviewcell with the border you want. that means you'll have to create the pictures of top, bottom and middle cell. There's a little tutorial on this page : http://cocoawithlove.com/2009/04/easy-custom-uitableview-drawing.html