Ob man nun einer App sein eigenes Layout zu verleihen will oder Design-Vorgaben einhalten muss, oft ist notwendig, vom Apple-Standard-Design abzuweichen.
In diesem Fall geht es um UITableViewCells mit runden Ecken. Das kann z.B. so aussehen:

So eine Vorgabe lässt sich mit einer eigenen UITableViewCell Klasse und den Core Graphics einfach lösen.

Wir öffnen unser XCode-Projekt und fügen eine  neue Datei vom Typ UITableViewCell hinzu (*.m und *.h) und nennen sie z.B. “RoundedTableViewCell”.

Damit wir die Core Graphics zu Verfügung haben, müssen wir das QuarzCore Framework in der *.h-Datei importieren:

#import <QuartzCore/QuartzCore/>

Nicht vergessen: Das Framework muss auch den “frameworks” des Projekts hinzugefügt werden:

In der RoundedTableViewCell.h-Datei definieren wir ein CALayer für jede Ecke der Zelle. Diese kleinen Quadrate “überdecken” später die abgerundeten Ecken, wo gewünscht.

CALayer* topleft;
CALayer* topright;
CALayer* bottomleft;
CALayer* bottomright;
CALayer* bglayer;
...
@property (nonatomic, retain) CALayer* topleft;
@property (nonatomic, retain) CALayer* topright;
@property (nonatomic, retain) CALayer* bottomleft;
@property (nonatomic, retain) CALayer* bottomright;
@property (nonatomic, retain) CALayer* bglayer;

Außerdem brauchen wir zwei BOOLsche Variablen..

BOOL roundTop;
BOOL roundBottom;
...
@property (nonatomic) BOOL roundTop;
@property (nonatomic) BOOL roundBottom;

… und zwei Methoden, um bei der einzelnen Zelle runde Ecken oben und/ oder unten anzuzeigen:

-(void) drawRoundTop;
-(void) drawRoundBottom;

Das war’s mit der *.h-Datei. In der RoundedTableViewCell.m Datei werden nun die runden Ecken implementiert. Zunächst legen wir einen Eck-Radius und eine Hintergrundfarbe für die Tabellenzelle fest (zwischen #import und @implemetation):

#define rad 15  // radius
#define normalColor [UIColor colorWithRed:0.39 green:0.15 blue:0.24 alpha:1.0]  // cell background color, dark red

Man beachte: Kein Strichpunkt hinter #define-Angaben!

Im @implementation-Block fehlt noch das @synthesize unserer CALayers and BOOLschen Variablen. Das release können wir uns bei diesen Datentypen netterweise sparen.

@synthesize topleft;
@synthesize topright;
@synthesize bottomleft;
@synthesize bottomright;
@synthesize roundTop;
@synthesize bglayer;
@synthesize roundBottom;

In der initWithStyle-Methode definieren wir ein UILabel mit ein paar Style-Attributen:

// add label
 label = [[UILabel alloc] initWithFrame:self.contentView.frame];
 label.textAlignment = UITextAlignmentLeft;
 label.backgroundColor = [UIColor clearColor];
 label.textColor = [UIColor whiteColor];
 label.font = [UIFont fontWithName:@"Zapfino" size:16];
 [self.contentView addSubview:label];

// initial values
 roundTop = NO;
 roundBottom = NO;
// set layer background color (= cell background color)
 self.layer.backgroundColor = normalColor.CGColor;

In der gleichen Methode setzen wir noch die Standardwerte, und zwar ohne runde Ecken, sowie die Hintergrundfarbe:

roundTop = NO;
roundBottom = NO;
self.layer.backgroundColor = normalColor.CGColor;

Um die runden Ecken zu zeichnen, brauchen wir unsere eigene drawRect Methode. Dort werden auch die CALayer für jede Ecke erzeugt, beides abhängig vom oben definierten Radius:

- (void) drawRect:(CGRect)rect{
	CGRect fr = rect;

	fr.size.width = fr.size.width-2*rad;
	fr.size.height = fr.size.height-1;
	fr.origin.x = rad;

	// draw round corners layer
	bglayer = [CALayer layer];
    bglayer.backgroundColor = normalColor.CGColor;
	bglayer.cornerRadius = rad;
	bglayer.frame = fr;
	bglayer.zPosition = -5;	// important, otherwise delete button does not fire / is covered
	[self.layer addSublayer:bglayer];

	// set label size (adjust to heightForRowAtIndexPath..)
	label.frame = CGRectMake(rad, 5, fr.size.width, fr.size.height);

	// corner layer top left
	topleft = [CALayer layer];
    topleft.backgroundColor = normalColor.CGColor;
	CGRect tl = CGRectMake(rad, 0, rad, rad);
	topleft.frame = tl;
	topleft.zPosition = -4;
	if(roundTop){
		topleft.hidden = YES;
	}else {
		topleft.hidden = NO;
	}
    [self.layer addSublayer:topleft];

	// corner layer top right
	topright = [CALayer layer];
    topright.backgroundColor = normalColor.CGColor;
	topright.frame = CGRectMake(fr.size.width, 0, rad, rad);
	topright.zPosition = -3;
	if(roundTop){
		topright.hidden = YES;
	}
	else {
		topright.hidden = NO;
	}
    [self.layer addSublayer:topright];

	// corner layer bottom left
	bottomleft = [CALayer layer];
    bottomleft.backgroundColor = normalColor.CGColor;
	bottomleft.frame = CGRectMake(rad, fr.size.height-rad, rad, rad);
	bottomleft.zPosition = -2;
	if(roundBottom){
		bottomleft.hidden = YES;
	}else {
		bottomleft.hidden = NO;
	}
    [self.layer addSublayer:bottomleft];

	// corner layer bottom right
	bottomright = [CALayer layer];
	bottomright.backgroundColor = normalColor.CGColor;
	bottomright.frame = CGRectMake(fr.size.width, fr.size.height-rad, rad, rad);
	bottomright.zPosition = -1;
	if(roundBottom){
		bottomright.hidden = YES;
	}else {
		bottomright.hidden = NO;
	}
    [self.layer addSublayer:bottomright];

	[super drawRect:rect];

}

Jetzt fehlen nur noch die beiden Methoden, um die Tabellenzelle oben oder unten mit runden Ecken darzustellen:

-(void) drawRoundTop{
roundTop = YES;
topleft.hidden = YES;
topright.hidden = YES;
}

Für die Unterseite:

-(void) drawRoundBottom{
roundBottom = YES;
bottomleft.hidden = YES;
bottomright.hidden = YES;
}

So, unsere UITableViewCell Klasse ist jetzt gebrauchsfertig. Also öffnen wir unsere UITableViewController.m-Datei (oder legen eine neue an). In der viewDidLoad Methode muss zumindest die erste  Zeile des folgenden Codes implementiert werden, sonst überdeckt der standardmäßige Tabellenhintergrund unsere neuen Zellen:

// important! without this line it does not work!
[self.tableView setBackgroundView:[[[UIView alloc] init] autorelease]];
// set plain background color
 [self.tableView setBackgroundColor:[UIColor colorWithRed:0.69 green:0.81 blue:0.79 alpha:1.0]];
// remove seperator color
 self.tableView.separatorStyle = UITableViewCellSeparatorStyleSingleLine;
 [self.tableView setSeparatorColor:[UIColor clearColor]];

Hier im Beispiel wurden zwei Sections definiert, eine mit “normalen” und eine mit runden Tabellenzellen, die wie ein seperater Block erscheinen sollen. Der Zellentyp und die jeweiligen Zellenattribute werden in der cellForRowAtIndexPath Methode festgelegt:

if (indexPath.section == SECTION_NORMAL) {

 static NSString *CellIdentifier = @"Cell";

 NormalTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
 if (cell == nil) {
 cell = [[[NormalTableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
 }
 cell.label.text = @"normal cell";
 return cell;

 } else if (indexPath.section == SECTION_ROUNDED) {
// define round cell
 static NSString *CellRoundedIdentifier = @"RoundedTableViewCell";
 RoundedTableViewCell *cell = (RoundedTableViewCell *)[tableView dequeueReusableCellWithIdentifier:CellRoundedIdentifier];
 if (cell == nil) {
 cell = [[[RoundedTableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellRoundedIdentifier] autorelease];
 }

 // Configure the cell.
 [cell.label setText:[NSString stringWithFormat:@"my round cell No.%d",(indexPath.row+1)]];
 cell.selectionStyle = UITableViewCellSelectionStyleNone;
 // draw round top corners in first row
 if(indexPath.row == 0){
 [cell drawRoundTop];
 }
// draw round corners in last row
if (indexPath.row == [self.tableView  numberOfRowsInSection:indexPath.section]-1) {
 [cell drawRoundBottom];
 }

 return cell;
 }

Um einen Abstand zwischen den einzelnen Tabellenzellen zu erzuegen, verwenden wir die heightForHeaderInSection und die viewForHeaderInSection Methoden:

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {

 UIView* header = nil;
 if(section == SECTION_ROUNDED){
 CGRect rect = CGRectMake(0, 0, self.tableView.frame.size.width, [self tableView:(tableView) heightForHeaderInSection:section]);
 header = [[UIView alloc] initWithFrame:rect];

 }
 return header;
}

- (CGFloat) tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section {
 CGFloat h = 0;
 if(section == SECTION_ROUNDED){
 h = 15;
 }
 return h;
}

Das XCode-Beispielprojekt kann als zip-Archiv von github heruntergeladen werden.