自定义分组表格单元格

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. 

编辑

看着你已经发布的代码。

1. 您已设置了顶线颜色为白色 - 因此，它是白色的，也许你的意思将其设置为您所需要的灰色。

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

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

3. 您需要设置描边宽度，然后行程线路，否则将使用默认

   [bezierPath setLineWidth:kLineWidth]; 
   [bezierPath stroke];