如何在分组的 UITableView 上设置选定的背景颜色

Question

我尝试了各种方法都没有成功。 其分组的 UITableView。想要更改所选单元格的背景颜色。

我尝试创建一个视图，设置背景颜色并将其设置为 cell.selectedBackgroundView。它可以更改颜色，但会丢失部分的圆角。

Answer 1

您可以创建 4 个不同的图像，1 个用于顶部，1 个用于底部，1 个用于中间，1 个用于顶部/底部（所有 4 个角均圆润）。然后根据表格中的位置将背景视图设置为您的自定义图像。或者，如果您想使用视图，这里有一个仅圆角的自定义视图：

.h

#import <UIKit/UIKit.h>

enum {
    RoundedCornerNone        = 0,
    RoundedCornerUpperRight  = 1 << 0,
    RoundedCornerLowerRight  = 1 << 1,
    RoundedCornerLowerLeft   = 1 << 2,
    RoundedCornerUpperLeft   = 1 << 3
};
typedef NSUInteger RoundedCornerOptions;

@interface PartiallyRoundedView : UIView

@property (nonatomic, assign) RoundedCornerOptions roundedCorners;

@end

.m

#import "PartiallyRoundedView.h"


@implementation PartiallyRoundedView

@synthesize roundedCorners;

- (id)initWithFrame:(CGRect)frame
{
    if ((self = [super initWithFrame:frame])) {
    }
    return self;
}

- (void)drawRect:(CGRect)rect
{
    float radius = 10;

    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetLineWidth(context, 1.0);
    CGContextBeginPath(context);
    CGContextSetRGBStrokeColor(context, .6, .6, .6, 1);
    CGContextSetRGBFillColor(context, .968, .968, .968, 1);

    CGContextMoveToPoint(context, rect.origin.x + rect.size.width - radius, rect.origin.y);
    CGContextAddLineToPoint(context, rect.origin.x + radius, rect.origin.y); //Draw top line

    if (self.roundedCorners >=8) { //Round upper-left corner
        CGContextAddArc(context, rect.origin.x + radius, rect.origin.y + radius, radius, 
                        -M_PI / 2, M_PI, 1);

        self.roundedCorners-=8;
    }
    else {
        CGContextAddLineToPoint(context, rect.origin.x, rect.origin.y);
        CGContextAddLineToPoint(context, rect.origin.x, rect.origin.y + radius);
    }

    CGContextAddLineToPoint(context, rect.origin.x, rect.origin.y + rect.size.height - radius); //Draw left line

    if (self.roundedCorners >=4) { //Round lower-left corner
        CGContextAddArc(context, rect.origin.x + radius , rect.origin.y + rect.size.height - radius, 
                        radius, M_PI, M_PI / 2, 1);

        self.roundedCorners-=4;
    }
    else {
        CGContextAddLineToPoint(context, rect.origin.x, rect.origin.y + rect.size.height);
        CGContextAddLineToPoint(context, rect.origin.x + radius, rect.origin.y + rect.size.height);
    }

    CGContextAddLineToPoint(context, rect.origin.x + rect.size.width - radius, rect.origin.y + rect.size.height); //Draw bottom line

    if (self.roundedCorners >=2) { //Round lower-right corner
        CGContextAddArc(context, rect.origin.x + rect.size.width - radius , 
                        rect.origin.y + rect.size.height - radius, radius, M_PI / 2, 0.0f, 1);

        self.roundedCorners-=2;
    }
    else {
        CGContextAddLineToPoint(context, rect.origin.x + rect.size.width, rect.origin.y + rect.size.height);
        CGContextAddLineToPoint(context, rect.origin.x + rect.size.width, rect.origin.y + rect.size.height - radius);
    }

    CGContextAddLineToPoint(context, rect.origin.x + rect.size.width, rect.origin.y + radius); //Draw right line

    if (self.roundedCorners ==1) { //Round upper-right corner
        CGContextAddArc(context, rect.origin.x + rect.size.width - radius, rect.origin.y + radius, 
                        radius, 0.0f, -M_PI / 2, 1);
    }
    else {
        CGContextAddLineToPoint(context, rect.origin.x + rect.size.width, rect.origin.y);
        CGContextAddLineToPoint(context, rect.origin.x + rect.size.width - radius, rect.origin.y );
    }


    CGContextClosePath(context);
    CGContextDrawPath(context, kCGPathFillStroke);
    }


    - (void)dealloc {
        [super dealloc];
    }


    @end

您可以创建此视图的一个实例（您需要添加一点以使用您想要的任何颜色填充中间）。只需根据您是第一个、最后一个、中间还是第一个和最后一个单元格传入正确的圆角。

Answer 2

如果您只想更改选择颜色，请查看此建议： UITableView Cell selected Color? 将此贴在 CellForRowAtIndexPath-Method 中：

UIView *bgColorView = [[UIView alloc] init];
[bgColorView setBackgroundColor:[UIColor redColor]];
bgColorView.layer.cornerRadius = 10; 
[cell setSelectedBackgroundView:bgColorView];
[bgColorView release];  

别忘了导入 QuartzCore。为我工作（iOS 5）

Answer 3

如果您想使用 Core Graphics 实现此功能（不使用图像），请尝试一下。我的方法采用与您选择的答案相同的概念，但使用简单的if/else（或switch:case，具体取决于您的数据源大小）为分组的 UITableViewCell 绘制正确的背景视图。以下代码只需要包含在您的实现文件中：

.m

UIView *bgColorView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width-24, 69)];
    bgColorView.backgroundColor = [UIColor magentaColor];
    UIBezierPath *maskPath;
    CAShapeLayer *maskLayer = [CAShapeLayer layer];
    maskLayer.frame = bgColorView.bounds;

    if (row == 0) {
      maskPath = [UIBezierPath bezierPathWithRoundedRect:bgColorView.bounds
                                       byRoundingCorners:(UIRectCornerTopLeft | UIRectCornerTopRight)
                                             cornerRadii:CGSizeMake(8.0, 8.0)];
      maskLayer.frame = CGRectOffset(bgColorView.bounds, 1, 0);
      if ([self.tableView numberOfRowsInSection:1] == 1) {
        maskPath = [UIBezierPath bezierPathWithRoundedRect:bgColorView.bounds
                                         byRoundingCorners:(UIRectCornerAllCorners)
                                               cornerRadii:CGSizeMake(8.0, 8.0)];
      }
    } else if (row >= [self.tableView numberOfRowsInSection:1]-1) {
      maskPath = [UIBezierPath bezierPathWithRoundedRect:bgColorView.bounds
                                       byRoundingCorners:(UIRectCornerBottomLeft | UIRectCornerBottomRight)
                                             cornerRadii:CGSizeMake(8.0, 8.0)];
      maskLayer.frame = CGRectOffset(bgColorView.bounds, 1, 0);
    } else {
      maskPath = [UIBezierPath bezierPathWithRoundedRect:bgColorView.bounds
                                       byRoundingCorners:nil
                                             cornerRadii:CGSizeMake(0.0, 0.0)];
    }

    maskLayer.path = maskPath.CGPath;

    bgColorView.layer.mask = maskLayer;
    cell.selectedBackgroundView = bgColorView;

如果您使用了可重复使用的单元格，则每种类型的绘图应该只出现一次。

希望这对偶然发现此线程的人有所帮助... 干杯！