自定義分組表格單元格

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];