2

I am trying to draw my grouped table cells in the drawRect method. I get the following results, but I have one problem with. I want the outer border to be a darker, but I can not seem to accomplish this, which I am sure is a problem with my drawing.

I like the color of the line in the middle between the cells, just not the outer border of the cells.

Edit:

-(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);
    }
}
4

3 回答 3

0

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

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

只需将其设置为较深的颜色。

于 2012-11-04T00:38:04.633 回答
0

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

摆脱您创建的路径，不要抚摸该路径。背景、顶线和底线的代码就是您所需要的。

您最后做的额外笔划是用您使用的最后一种颜色（用于底线）重新绘制完整的单元格轮廓。这涵盖了您的顶线笔划。

附带说明一下，您应该使用以下if-else设置：

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

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

于 2012-11-04T00:39:17.540 回答
0

我在想这样的事情可能更易于管理。您必须调整 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.

编辑

查看您发布的代码。

  1. 您已将顶线颜色设置为白色 - 因此它是白色的，也许您打算将其设置为您需要的灰色。

  2. 正在绘制的轮廓被剪裁。为了解决这个问题，您可以将矩形插入您正在绘制的线条宽度的一半。

    rect = CGRectInsetRect(rect, 0.5f * kLineWidth, 0.5f * kLineWidth);

  3. 您需要在描边之前设置描边宽度，否则它将使用默认值

    [bezierPath setLineWidth:kLineWidth];
[bezierPath stroke];
于 2012-11-04T00:47:14.107 回答