我想自定义分组样式UITableView的背景和边框颜色.
我可以使用以下方法自定义背景颜色:
tableView.contentView.backgroundColor = [UIColor greenColor];
但边框颜色仍然是我不知道如何改变的东西.
如何自定义分组样式表视图的这两个方面?
更新:在iPhone OS 3.0及更高版本中UITableViewCell
现在有一个backgroundColor
属性,使这非常容易(特别是与[UIColor colorWithPatternImage:]
初始化程序结合使用).但我会在这里为需要它的人留下2.0版的答案......
它比实际应该更难.以下是我必须这样做时的方法:
您需要将UITableViewCell的backgroundView属性设置为自定义UIView,以适当的颜色绘制边框和背景本身.此视图需要能够以4种不同的模式绘制边框,在一个部分中的第一个单元格的顶部倒圆,在截面的最后一个单元格的底部倒圆,在截面中间的单元格没有圆角,并在包含一个单元格的部分的所有4个角上舍入.
不幸的是我无法弄清楚如何自动设置这个模式,所以我不得不在UITableViewDataSource的-cellForRowAtIndexPath方法中设置它.
这是一个真正的PITA,但我已经向Apple工程师证实,这是目前唯一的方法.
更新这是自定义bg视图的代码.有一个绘图错误,使圆角看起来有点滑稽,但我有机会修复它之前我们转移到不同的设计并废弃自定义背景.这仍然可能对你非常有帮助:
// // CustomCellBackgroundView.h // // Created by Mike Akers on 11/21/08. // Copyright 2008 __MyCompanyName__. All rights reserved. // #importtypedef 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 }
我知道答案与更改分组表格单元格有关,但是如果有人想要更改tableview的背景颜色:
您不仅需要设置:
tableview.backgroundColor = color;
您还需要更改或删除背景视图:
tableview.backgroundView = nil;
首先要感谢这段代码.我在此功能中进行了一些绘图更改,以消除绘图的角落问题.
-(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; } }
谢谢您的代码,这正是我所寻找的.我还将以下代码添加到Vimal的代码中,以实现CustomCellBackgroundViewPositionSingle单元格的情况.(所有四个角都是圆形的.)
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; }
我使用Mike Akers的上述CustomCellBackgroundView代码遇到的一件事可能对其他人有用:
cell.backgroundView
重复使用单元格时不会自动重绘,并且对backgroundView位置var的更改不会影响重用的单元格.这意味着长桌将cell.backgroundViews
根据其位置错误地绘制.
要在每次显示行时不必创建新的backgroundView来解决此问题,请[cell.backgroundView setNeedsDisplay]
在您的结束时调用-[UITableViewController tableView:cellForRowAtIndexPath:]
.或者对于更可重用的解决方案,覆盖CustomCellBackgroundView的位置设置器以包含a [self setNeedsDisplay]
.
感谢这个超级有用的帖子.如果有人在那里(像我一样!)想要一个完全空的单元格背景来代替通过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; }
希望这能帮助别人!似乎像魅力一样工作.
非常感谢发布代码的所有人.这非常有用.
我派生了一个类似的解决方案来改变分组表视图单元格的高亮颜色.基本上是UITableViewCell的selectedBackgroundView(不是backgroundView).据我所知,甚至在iPhone OS 3.0上仍然需要这个PITA解决方案......
下面的代码包含使用渐变而不是一种纯色渲染高光的更改.边框渲染也被删除.请享用.
// // CSCustomCellBackgroundView.h // #importtypedef 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 }