Я хотел бы настроить как фон, так и цвет рамки в UITableView сгруппированным стилем.
Мне удалось настроить цвет фона, используя следующее:
tableView.contentView.backgroundColor = [UIColor greenColor];
Но цвет рамки по-прежнему я не знаю, как изменить.
Как настроить эти два аспекта табличного вида сгруппированного стиля?
ОБНОВЛЕНИЕ: В iPhone OS 3.0 и более поздних версиях UITableViewCell теперь есть свойство backgroundColor, которое делает это очень простым (особенно в сочетании с инициализатором [UIColor colorWithPatternImage:]). Но я оставлю 2.0 версию ответа здесь для тех, кому это нужно...
Это тяжелее, чем нужно. Вот как я это сделал, когда мне пришлось это сделать:
Вам нужно установить свойство backgroundView UITableViewCell в пользовательский UIView, который рисует границу и фон в соответствующих цветах. Это представление должно иметь возможность рисовать границы в 4 разных режимах, округленных сверху для первой ячейки в секции, закругленной снизу для последней ячейки в секции, без округлых углов для ячеек в середине секции, и округлены по всем 4 углам для разделов, содержащих одну ячейку.
К сожалению, я не мог понять, как установить этот режим автоматически, поэтому мне пришлось установить его в методе UITableViewDataSource -cellForRowAtIndexPath.
Это настоящая PITA, но я подтвердил инженерам Apple, что это единственный способ.
Обновить Здесь код для этого настраиваемого вида bg. Там ошибка чертежа, которая делает закругленные углы немного забавными, но мы перешли к другому дизайну и отказались от пользовательских фонов, прежде чем у меня была возможность исправить это. Тем не менее это, вероятно, будет очень полезно для вас:
//
// 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
}
Я знаю, что ответы связаны с изменением сгруппированных ячеек таблицы, но если кто-то хочет изменить цвет фона таблицы, выполните следующие действия.
Вам не только нужно установить:
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;
}
Одна вещь, с которой я столкнулся с вышеуказанным кодом CustomCellBackgroundView от Майка Акерса, который может быть полезен другим:
cell.backgroundView автоматически не перерисовывается, когда ячейки повторно используются, а изменения в позиции backgroundView var не влияют на повторно используемые ячейки. Это означает, что длинные таблицы неправильно рисуют cell.backgroundViews с учетом их позиций.
Чтобы исправить это, не создавая новый backgroundView каждый раз, когда отображается строка, вызовите [cell.backgroundView setNeedsDisplay] в конце вашего -[UITableViewController tableView:cellForRowAtIndexPath:]. Или для более многоразового решения, переопределите SetControlSetBackgroundView, чтобы включить [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 выбралBackgroundView (а не backgroundView). Насколько мне известно, даже на iPhone OS 3.0 все еще нуждается в этом решении PITA...
В приведенном ниже коде есть изменения для выделения выделения с градиентом вместо одного сплошного цвета. Также удаляется рендеринг. Наслаждайтесь.
//
// 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
}
Вы можете настроить цвет рамки, установив
tableView.separatorColor
Чтобы изменить цвет рамки таблицы:
in.h:
#import <QuartzCore/QuartzCore.h>
В .m:
tableView.layer.masksToBounds=YES;
tableView.layer.borderWidth = 1.0f;
tableView.layer.borderColor = [UIColor whiteColor].CGColor;
Эта задача может быть легко выполнена с помощью PrettyKit, добавив около 5 строк кода. Если вы используете файлы 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;
}
У меня возникли проблемы с этим и я попробовал множество комбинаций вещей, поскольку я заметил, что для некоторых ячеек он работал нормально, но не для других.
Странно я узнал, что можно установить cell.backgroundColor в lightGrayColor, и все работает отлично - но blueColor вызвал у меня проблемы с обновлением внешних ребер.
Если действительно важно использовать зеленый цвет - возможно, вы захотите попробовать это. Возможно, это функция, позволяющая людям использовать только серые цвета, если указано, что ячейка выбрана.