如何自定义分组表格视图单元格的背景/边框颜色？

我想自定义分组样式的UITableView的背景和边框颜色。

我能够通过使用以下自定义背景颜色：

tableView.contentView.backgroundColor = [UIColor greenColor]; 

但边框颜色仍然是我不知道如何改变的东西。

如何自定义分组式表视图的这两个方面？

Answer 1

更新：在iPhone OS 3.0和更高版本UITableViewCell现在有一个backgroundColor属性，这使得这真的很容易（特别是与[UIColor colorWithPatternImage:]初始值设定项相结合）。 但是，我会留下2.0版本的答案给任何需要它的人。

---

比实际情况要困难得多。 我不得不这样做的时候是这样做的：

您需要将UITableViewCell的backgroundView属性设置为自定义的UIView，以适当的颜色绘制边框和背景本身。 这个视图需要能够以4种不同的模式绘制边框，在一个部分的第一个单元格的顶部舍入，在一个部分的最后一个单元格的底部舍入，在部分的中间没有圆angular的单元格，并在所有四个angular落圆angular以包含一个单元的部分。

不幸的是我不知道如何自动设置这个模式，所以我不得不在UITableViewDataSource的-cellForRowAtIndexPath方法中设置它。

这是一个真正的PITA，但是我已经向苹果工程师证实了这是目前唯一的方法。

更新这是自定义bg视图的代码。 有一个绘图错误，使得圆angular看起来有点滑稽，但我们转移到另一个devise，并在我有机会解决它之前，废弃了自定义背景。 不过这可能对你很有帮助：

 // // CustomCellBackgroundView.h // // Created by Mike Akers on 11/21/08. // Copyright 2008 __MyCompanyName__. All rights reserved. // #import <UIKit/UIKit.h> typedef enum { CustomCellBackgroundViewPositionTop, CustomCellBackgroundViewPositionMiddle, CustomCellBackgroundViewPositionBottom, CustomCellBackgroundViewPositionSingle } CustomCellBackgroundViewPosition; @interface CustomCellBackgroundView : UIView { UIColor *borderColor; UIColor *fillColor; CustomCellBackgroundViewPosition position; } @property(nonatomic, retain) UIColor *borderColor, *fillColor; @property(nonatomic) CustomCellBackgroundViewPosition position; @end // // CustomCellBackgroundView.m // // Created by Mike Akers on 11/21/08. // Copyright 2008 __MyCompanyName__. All rights reserved. // #import "CustomCellBackgroundView.h" static void addRoundedRectToPath(CGContextRef context, CGRect rect, float ovalWidth,float ovalHeight); @implementation CustomCellBackgroundView @synthesize borderColor, fillColor, position; - (BOOL) isOpaque { return NO; } - (id)initWithFrame:(CGRect)frame { if (self = [super initWithFrame:frame]) { // Initialization code } return self; } - (void)drawRect:(CGRect)rect { // Drawing code CGContextRef c = UIGraphicsGetCurrentContext(); CGContextSetFillColorWithColor(c, [fillColor CGColor]); CGContextSetStrokeColorWithColor(c, [borderColor CGColor]); if (position == CustomCellBackgroundViewPositionTop) { CGContextFillRect(c, CGRectMake(0.0f, rect.size.height - 10.0f, rect.size.width, 10.0f)); CGContextBeginPath(c); CGContextMoveToPoint(c, 0.0f, rect.size.height - 10.0f); CGContextAddLineToPoint(c, 0.0f, rect.size.height); CGContextAddLineToPoint(c, rect.size.width, rect.size.height); CGContextAddLineToPoint(c, rect.size.width, rect.size.height - 10.0f); CGContextStrokePath(c); CGContextClipToRect(c, CGRectMake(0.0f, 0.0f, rect.size.width, rect.size.height - 10.0f)); } else if (position == CustomCellBackgroundViewPositionBottom) { CGContextFillRect(c, CGRectMake(0.0f, 0.0f, rect.size.width, 10.0f)); CGContextBeginPath(c); CGContextMoveToPoint(c, 0.0f, 10.0f); CGContextAddLineToPoint(c, 0.0f, 0.0f); CGContextStrokePath(c); CGContextBeginPath(c); CGContextMoveToPoint(c, rect.size.width, 0.0f); CGContextAddLineToPoint(c, rect.size.width, 10.0f); CGContextStrokePath(c); CGContextClipToRect(c, CGRectMake(0.0f, 10.0f, rect.size.width, rect.size.height)); } else if (position == CustomCellBackgroundViewPositionMiddle) { CGContextFillRect(c, rect); CGContextBeginPath(c); CGContextMoveToPoint(c, 0.0f, 0.0f); CGContextAddLineToPoint(c, 0.0f, rect.size.height); CGContextAddLineToPoint(c, rect.size.width, rect.size.height); CGContextAddLineToPoint(c, rect.size.width, 0.0f); CGContextStrokePath(c); return; // no need to bother drawing rounded corners, so we return } // At this point the clip rect is set to only draw the appropriate // corners, so we fill and stroke a rounded rect taking the entire rect CGContextBeginPath(c); addRoundedRectToPath(c, rect, 10.0f, 10.0f); CGContextFillPath(c); CGContextSetLineWidth(c, 1); CGContextBeginPath(c); addRoundedRectToPath(c, rect, 10.0f, 10.0f); CGContextStrokePath(c); } - (void)dealloc { [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 } 

Answer 2

我知道答案是关于更改分组表格单元格，但如果有人想要也改变tableview的背景颜色：

你不仅需要设置：

 tableview.backgroundColor = color; 

您还需要更改或摆脱背景视图：

 tableview.backgroundView = nil; 

Answer 3

首先感谢这个代码。 我已经在这个函数中做了一些绘图改变来消除绘图的边angular问题。

 -(void)drawRect:(CGRect)rect { // Drawing code CGContextRef c = UIGraphicsGetCurrentContext(); CGContextSetFillColorWithColor(c, [fillColor CGColor]); CGContextSetStrokeColorWithColor(c, [borderColor CGColor]); CGContextSetLineWidth(c, 2); if (position == CustomCellBackgroundViewPositionTop) { CGFloat minx = CGRectGetMinX(rect) , midx = CGRectGetMidX(rect), maxx = CGRectGetMaxX(rect) ; CGFloat miny = CGRectGetMinY(rect) , maxy = CGRectGetMaxY(rect) ; 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); // Close the path CGContextClosePath(c); // Fill & stroke the path CGContextDrawPath(c, kCGPathFillStroke); return; } else if (position == CustomCellBackgroundViewPositionBottom) { CGFloat minx = CGRectGetMinX(rect) , midx = CGRectGetMidX(rect), maxx = CGRectGetMaxX(rect) ; CGFloat miny = CGRectGetMinY(rect) , maxy = CGRectGetMaxY(rect) ; 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); // Close the path CGContextClosePath(c); // Fill & stroke the path CGContextDrawPath(c, kCGPathFillStroke); return; } else if (position == CustomCellBackgroundViewPositionMiddle) { CGFloat minx = CGRectGetMinX(rect) , maxx = CGRectGetMaxX(rect) ; CGFloat miny = CGRectGetMinY(rect) , maxy = CGRectGetMaxY(rect) ; 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); CGContextClosePath(c); // Fill & stroke the path CGContextDrawPath(c, kCGPathFillStroke); return; } } 

Answer 4

感谢你的代码，这正是我正在寻找的。 我还将以下代码添加到Vimal的代码中，以实现CustomCellBackgroundViewPositionSingle单元格的情况。 （所有四个angular都是圆angular的。）

 else if (position == CustomCellBackgroundViewPositionSingle) { CGFloat minx = CGRectGetMinX(rect) , midx = CGRectGetMidX(rect), maxx = CGRectGetMaxX(rect) ; CGFloat miny = CGRectGetMinY(rect) , midy = CGRectGetMidY(rect) , maxy = CGRectGetMaxY(rect) ; 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); // Close the path CGContextClosePath(c); // Fill & stroke the path CGContextDrawPath(c, kCGPathFillStroke); return; } 

Answer 5

有一件事我碰到了Mike Akers的上述CustomCellBackgroundView代码，可能对其他人有用：

当单元格被重用时， cell.backgroundView不会自动重画，并且改变backgroundView的位置var不会影响重用的单元格。 这意味着cell.backgroundViews将错误地绘制cell.backgroundViews给定的位置。

要解决这个问题，而不必每次显示一行时都创build一个新的backgroundView，可以在你的-[UITableViewController tableView:cellForRowAtIndexPath:]的末尾调用[cell.backgroundView setNeedsDisplay] -[UITableViewController tableView:cellForRowAtIndexPath:] 。 或者对于更可重用的解决scheme，重写CustomCellBackgroundView的位置设置器以包含[self setNeedsDisplay] 。

Answer 6

感谢这个超级有用的职位。 如果有人（像我！）想要有一个完全空的单元格背景，而不是通过IB中的图像/文本/其他内容来定制它，并不能弄清楚地狱摆脱愚蠢的边界/填充/背景，即使你把它设置为在IB清除…这是我用的代码做的伎俩！

 - (UITableViewCell *) tableView: (UITableView *) tableView cellForRowAtIndexPath: (NSIndexPath *) indexPath { static NSString *cellId = @"cellId"; UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier: cellId]; if (cell == nil) { [[NSBundle mainBundle] loadNibNamed:@"EditTableViewCell" owner:self options:nil]; cell = cellIBOutlet; self.cellIBOutlet = nil; } cell.backgroundView = [[[UIView alloc] initWithFrame: CGRectZero] autorelease]; [cell.backgroundView setNeedsDisplay]; ... any other cell customizations ... return cell; } 

希望这会帮助别人！ 似乎像一个魅力工作。

Answer 7

非常感谢所有发布代码的人。 这非常有用。

我导出了一个类似的解决scheme来改变分组表格视图单元格的高亮颜色。 基本上UITableViewCell的selectedBackgroundView（不是backgroundView）。 即使在iPhone OS 3.0上，仍然需要这个PITA解决scheme，据我所知…

下面的代码具有使用渐变而不是一个纯色渲染高光的变化。 此外，边框呈现被删除。 请享用。

 // // CSCustomCellBackgroundView.h // #import <UIKit/UIKit.h> typedef enum { CustomCellBackgroundViewPositionTop, CustomCellBackgroundViewPositionMiddle, CustomCellBackgroundViewPositionBottom, CustomCellBackgroundViewPositionSingle, CustomCellBackgroundViewPositionPlain } CustomCellBackgroundViewPosition; @interface CSCustomCellBackgroundView : UIView { CustomCellBackgroundViewPosition position; CGGradientRef gradient; } @property(nonatomic) CustomCellBackgroundViewPosition position; @end // // CSCustomCellBackgroundView.m // #import "CSCustomCellBackgroundView.h" #define ROUND_SIZE 10 static void addRoundedRectToPath(CGContextRef context, CGRect rect, float ovalWidth,float ovalHeight); @implementation CSCustomCellBackgroundView @synthesize position; - (BOOL) isOpaque { return NO; } - (id)initWithFrame:(CGRect)frame { if (self = [super initWithFrame:frame]) { // Initialization code const float* topCol = CGColorGetComponents([[UIColor redColor] CGColor]); const float* bottomCol = CGColorGetComponents([[UIColor blueColor] CGColor]); 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, };*/ CGFloat colors[]= { topCol[0], topCol[1], topCol[2], topCol[3], bottomCol[0], bottomCol[1], bottomCol[2], bottomCol[3] }; gradient = CGGradientCreateWithColorComponents(rgb, colors, NULL, sizeof(colors)/(sizeof(colors[0])*4)); CGColorSpaceRelease(rgb); } return self; } -(void)drawRect:(CGRect)rect { // Drawing code CGContextRef c = UIGraphicsGetCurrentContext(); if (position == CustomCellBackgroundViewPositionTop) { CGFloat minx = CGRectGetMinX(rect) , midx = CGRectGetMidX(rect), maxx = CGRectGetMaxX(rect) ; CGFloat miny = CGRectGetMinY(rect) , maxy = CGRectGetMaxY(rect) ; 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); // Close the path CGContextClosePath(c); CGContextSaveGState(c); CGContextClip(c); CGContextDrawLinearGradient(c, gradient, CGPointMake(minx,miny), CGPointMake(minx,maxy), kCGGradientDrawsBeforeStartLocation | kCGGradientDrawsAfterEndLocation); CGContextRestoreGState(c); return; } else if (position == CustomCellBackgroundViewPositionBottom) { CGFloat minx = CGRectGetMinX(rect) , midx = CGRectGetMidX(rect), maxx = CGRectGetMaxX(rect) ; CGFloat miny = CGRectGetMinY(rect) , maxy = CGRectGetMaxY(rect) ; minx = minx + 1; miny = miny + 1; 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); // Close the path CGContextClosePath(c); CGContextSaveGState(c); CGContextClip(c); CGContextDrawLinearGradient(c, gradient, CGPointMake(minx,miny), CGPointMake(minx,maxy), kCGGradientDrawsBeforeStartLocation | kCGGradientDrawsAfterEndLocation); CGContextRestoreGState(c); return; } else if (position == CustomCellBackgroundViewPositionMiddle) { CGFloat minx = CGRectGetMinX(rect) , maxx = CGRectGetMaxX(rect) ; CGFloat miny = CGRectGetMinY(rect) , maxy = CGRectGetMaxY(rect) ; minx = minx + 1; miny = miny + 1; maxx = maxx - 1; maxy = maxy ; CGContextMoveToPoint(c, minx, miny); CGContextAddLineToPoint(c, maxx, miny); CGContextAddLineToPoint(c, maxx, maxy); CGContextAddLineToPoint(c, minx, maxy); // Close the path CGContextClosePath(c); CGContextSaveGState(c); CGContextClip(c); CGContextDrawLinearGradient(c, gradient, CGPointMake(minx,miny), CGPointMake(minx,maxy), kCGGradientDrawsBeforeStartLocation | kCGGradientDrawsAfterEndLocation); CGContextRestoreGState(c); return; } else if (position == CustomCellBackgroundViewPositionSingle) { CGFloat minx = CGRectGetMinX(rect) , midx = CGRectGetMidX(rect), maxx = CGRectGetMaxX(rect) ; CGFloat miny = CGRectGetMinY(rect) , midy = CGRectGetMidY(rect) , maxy = CGRectGetMaxY(rect) ; 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); // Close the path CGContextClosePath(c); CGContextSaveGState(c); CGContextClip(c); CGContextDrawLinearGradient(c, gradient, CGPointMake(minx,miny), CGPointMake(minx,maxy), kCGGradientDrawsBeforeStartLocation | kCGGradientDrawsAfterEndLocation); CGContextRestoreGState(c); return; } else if (position == CustomCellBackgroundViewPositionPlain) { CGFloat minx = CGRectGetMinX(rect); CGFloat miny = CGRectGetMinY(rect), maxy = CGRectGetMaxY(rect) ; CGContextDrawLinearGradient(c, gradient, CGPointMake(minx,miny), CGPointMake(minx,maxy), kCGGradientDrawsBeforeStartLocation | kCGGradientDrawsAfterEndLocation); return; } } - (void)dealloc { CGGradientRelease(gradient); [super dealloc]; } - (void) setPosition:(CustomCellBackgroundViewPosition)inPosition { if(position != inPosition) { position = inPosition; [self setNeedsDisplay]; } } @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 } 

Answer 8

您可以通过设置自定义边框颜色

 tableView.separatorColor 

Answer 9

要更改表格视图的边框颜色：

in.h中：

 #import <QuartzCore/QuartzCore.h> 

在.m中：

 tableView.layer.masksToBounds=YES; tableView.layer.borderWidth = 1.0f; tableView.layer.borderColor = [UIColor whiteColor].CGColor; 

Answer 10

通过添加大约5行代码，使用PrettyKit可以轻松完成此任务。 如果您使用nib文件或storyboard ，也不要忘记应用这个小黑客 。 当你使用这种方法时，你应该从PrettyTableViewCell你的单元格：

 #import <PrettyKit/PrettyKit.h> @class RRSearchHistoryItem; @interface RRSearchHistoryCell : PrettyTableViewCell 

这是我的cellForRowAtIndexPath例子：

 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { static NSString *cellIdentifier = @"RRSearchHistoryCell"; RRSearchHistoryCell *cell = (RRSearchHistoryCell *)[tableView dequeueReusableCellWithIdentifier:cellIdentifier]; if ( cell == nil ) { NSArray *topLevelObjects = [[NSBundle mainBundle] loadNibNamed:@"RRSearchHistoryCell" owner:self options:nil]; cell = topLevelObjects[0]; cell.gradientStartColor = RGB(0xffffff); cell.gradientEndColor = RGB(0xf3f3f3); } RRSearchHistoryItem *item = _historyTableData[indexPath.row]; [cell setHistoryItem:item]; [cell prepareForTableView:tableView indexPath:indexPath]; return cell; } 

Answer 11

我一直有这个问题，并尝试了很多事情的组合，因为我注意到，对于一些单元格，它工作正常，但不为别人。

奇怪的是，我发现可以将cell.backgroundColor设置为lightGrayColor，并且所有工作都很完美 – 但是blueColor导致我不更新外部边的问题。

除非使用绿色真的很重要 – 也许你可能想尝试一下。 这可能是因为这是一个让人们在select单元格时只使用灰色的function。