修改

Question

我正在尝试在drawRect方法中绘制我的分组表格单元格。我得到以下结果，但我有一个问题。我希望外边框更暗，但我似乎无法做到这一点，我确信这是我绘图的问题。

我喜欢细胞中间线的颜色，而不是细胞的外边界。

编辑：

-(void)drawRect:(CGRect)rect
{
    const float kLineWidth = 3.0;

    UIColor *topLineColor = [UIColor whiteColor];
    UIColor *bottomLineColor = [UIColor colorWithRed:225.0f/255.0f green:225.0f/255.0f blue:225.0f/255.0f alpha:1.0f];
    UIColor *backgroundColor = [UIColor colorWithRed:242.0f/255.0f green:242.0f/255.0f blue:242.0f/255.0f alpha:1.0f];

    CGColorRef bottomSeparatorColorRef = [bottomLineColor CGColor];
    CGColorRef topSeparatorColorRef = [topLineColor CGColor];

    CGContextRef context = UIGraphicsGetCurrentContext();


    UIRectCorner corners = 0;

    switch(self.position) {

        case OTCellBackgroundViewPositionTop:
            corners = UIRectCornerTopLeft | UIRectCornerTopRight;
            break;

        case OTCellBackgroundViewPositionMiddle:
            break;

        case OTCellBackgroundViewPositionBottom:
            corners = UIRectCornerBottomLeft | UIRectCornerBottomRight;
            break;

        default:
            break;
    }

    [backgroundColor setFill];
    [topLineColor setStroke];

    UIBezierPath *bezierPath =   [UIBezierPath bezierPathWithRoundedRect:rect byRoundingCorners:corners cornerRadii:CGSizeMake(10.0f, 10.0f)];

    [bezierPath fill];
    [bezierPath stroke];
    [bezierPath setLineWidth:3.0f];

    if (self.position == OTCellBackgroundViewPositionTop) {
        // Draw the Bottom Line
        CGContextSetStrokeColorWithColor(context, bottomSeparatorColorRef);
        CGContextSetLineWidth(context, kLineWidth);
        CGContextSetLineCap(context, kCGLineCapSquare);
        CGContextMoveToPoint(context, 0.0, rect.size.height);
        CGContextAddLineToPoint(context, rect.size.width, rect.size.height);
        CGContextStrokePath(context);   
    }

    if (self.position == OTCellBackgroundViewPositionBottom) {
        // Draw the Top Line
        CGContextSetStrokeColorWithColor(context, topSeparatorColorRef);
        CGContextSetLineWidth(context, kLineWidth);
        CGContextSetLineCap(context, kCGLineCapSquare);
        CGContextMoveToPoint(context, 0.0, 0.0);
        CGContextAddLineToPoint(context, rect.size.width, 0);
        CGContextStrokePath(context);
    }
}

Answer 1

您正在将顶部分隔符设置为白色。

UIColor *topLineColor = [UIColor whiteColor];
CGColorRef topSeparatorColorRef = [topLineColor CGColor];
// Top Line
CGContextSetStrokeColorWithColor(context, topSeparatorColorRef);

只需将其设置为较暗的颜色即可。

Answer 2

让我们看一下顶部位置单元格的代码。首先，创建一个表示整个单元格轮廓的路径。接下来，你填写背景 - 好。然后你划过两边和顶部 - 好。然后你抚摸细胞的底部 - 好。然后在执行其他部分之前添加并描绘您创建的完整轮廓路径 - 不好。

摆脱你创造的路径，不要抚摸那条路。您只需要背景，顶线和底线的代码即可。

您最后一次使用的笔划是重新绘制您使用的最后一种颜色的完整单元格轮廓。这涵盖了你的顶线。

在旁注中，您应该使用if-else设置：

if (_position == OTCellBackgroundViewPositionTop) {
    // draw top cell
} else if (_position == OTCellBackgroundViewPositionMiddle) {
    // draw middle cell
} else if (_position == OTCellBackgroundViewPositionBottom) {
    // draw bottom cell
)

当您只需要一个可能的路径来执行时，应始终使用这种结构。当可能或希望执行多个路径时，您所拥有的结构是合适的。

Answer 3

我认为这样的事情可能更易于管理。你必须调整bezierPath大小等以获得正确的结果。

UIRectCorner corners = 0;

switch(position) {
  case OTCellBackgroundViewPositionTop:
    corners = UIRectCornerTopLeft | UIRectCornerTopRight;
    break;

  case OTCellBackgroundViewPositionMiddle:
    break;

  case OTCellBackgroundViewPositionBottom:
    corners = UIRectCornerBottomLeft | UIRectCornerBottomRight;
    break;
}

[backgroundColor setFill];
[topLineColor setStroke];

UIBezierPath *bezierPath =   [UIBezierPath bezierPathWithRoundedRect:rect
                                                   byRoundingCorners:corners 
                                                         cornerRadii:CGSizeMake(3.f, 3.f)];

[bezierPath fill];
[bezierPath stroke];

// Now stroke over the lines in a different colour.

修改

查看您发布的代码。

您已将顶线颜色设置为白色 - 因此它是白色的，也许您打算将其设置为所需的灰色。
正在绘制正在绘制的轮廓。要解决此问题，您可以将矩形插入您绘制的线条宽度的一半。
```
rect = CGRectInsetRect(rect, 0.5f * kLineWidth, 0.5f * kLineWidth);
```
您需要在划线之前设置笔触宽度，否则它将使用默认
```
[bezierPath setLineWidth:kLineWidth];
[bezierPath stroke];
```

自定义分组表格单元格

3 个答案:

修改