如何在表格视图的部分上制作边框

Question

我必须在ios中的tableview的一部分上添加阴影。 我试图用这种表单元格方法来做到这一点，但它不起作用。

(void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
{
    NSLog(@"Section:%ld  row:%ld", indexPath.section, (long)indexPath.row);

    if ([cell respondsToSelector:@selector(tintColor)])
    {

        CGFloat cornerRadius = 5.f;

        cell.backgroundColor = UIColor.clearColor;

        CAShapeLayer *layer = [[CAShapeLayer alloc] init];

        CGMutablePathRef pathRef = CGPathCreateMutable();

        CGRect bounds = CGRectInset(cell.bounds, 0, 0);

        BOOL addLine = NO;

        if (indexPath.row == 0 && indexPath.row == [tableView numberOfRowsInSection:indexPath.section]-1)

        {
             CGPathAddRoundedRect(pathRef, nil, bounds, 0.0, 0.0);

        } else if (indexPath.row == 0)
        {

        CGPathMoveToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMaxY(bounds));

        CGPathAddArcToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMinY(bounds), CGRectGetMidX(bounds), CGRectGetMinY(bounds), 0.0);

        CGPathAddArcToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMinY(bounds), CGRectGetMaxX(bounds), CGRectGetMidY(bounds), 0.0);

  CGPathAddLineToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMaxY(bounds));
        addLine = YES;

        } else if (indexPath.row == [tableView numberOfRowsInSection:indexPath.section]-1)

        {

        CGPathMoveToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMinY(bounds));

        CGPathAddArcToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMaxY(bounds), CGRectGetMidX(bounds), CGRectGetMaxY(bounds), 0.0);
        CGPathAddArcToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMaxY(bounds), CGRectGetMaxX(bounds), CGRectGetMidY(bounds), 0.0);
        CGPathAddLineToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMinY(bounds));
        } else {
        CGPathMoveToPoint(pathRef, nil, bounds.origin.x, bounds.origin.y);
        CGPathAddLineToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMaxY(bounds));
        CGPathMoveToPoint(pathRef, nil, CGRectGetMaxX(bounds), bounds.origin.y);
        CGPathAddLineToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMaxY(bounds));

            addLine = YES;
        }
        layer.path = pathRef;
        CFRelease(pathRef);
        //set the border color

        layer.shadowOffset = CGSizeMake(1.0f, 1.0f);
        layer.shadowRadius = 2;
        layer.shadowOpacity = 0.5;
        layer.strokeColor = [UIColor whiteColor].CGColor;
        layer.lineWidth = 1;
        if (addLine == YES)
        {
        CALayer *lineLayer = [[CALayer alloc] init];
        CGFloat lineHeight = (1.f / [UIScreen mainScreen].scale);
        lineLayer.frame = CGRectMake(CGRectGetMinX(bounds), bounds.size.height-lineHeight, bounds.size.width, lineHeight);
        [layer addSublayer:lineLayer];
        }


        UIView *testView = [[UIView alloc] initWithFrame:bounds];
        [testView.layer insertSublayer:layer atIndex:0];
        testView.backgroundColor = [UIColor clearColor];
        cell.backgroundView = testView;

        testView.layer.shadowOffset = CGSizeMake(1, 1);
        testView.layer.shadowRadius = 2;
        testView.layer.shadowOpacity = 0.2;
        testView.layer.shadowColor = [UIColor blackColor].CGColor;
}
        NSLog(@"END row:%ld", (long)indexPath.row);
}

而且我必须给阴影像这样的图像：

Answer 1

1. 您可以使用集合视图并创建自定义集合视图单元格（以便可以在XIB中为每个单元格添加边框）。
2. 您可以创建一个自定义表格视图单元格，在XIB中添加边框并删除表格视图换行符。 但这不会为您提供与所示图片完全相同的视图。 更好地执行我的第一个建议。

您说过要在选择单元格上绘制边框，然后可以在XIB中添加透明颜色，并通过实现didSelectItemAtIndexPath方法在单击到单元格上时将其上色。

Answer 2

如果仅要将边框应用于表格单元格，则可以使用表格单元格内容视图并为其应用边框。

  cell.contentView.layer.borderColor = [UIColor redColor].CGColor;
  cell.contentView.layer.borderWidth = 3.0f;

但是，从您的图像中，我建议您使用带有边框的自定义图像，并使用表格部分，以便在各部分之间具有所需的间距，并且可以使用custom image设置表格部分的background image 。

一种方法是将自定义UIView添加到表单元格contentView ，并为UIView自定义drawRect ：

- (void)drawRect: (CGRect)frame
{
    //// Color Declarations
    UIColor* color = [UIColor colorWithRed: 0.967 green: 0.423 blue: 0.211 alpha: 1];
    UIColor* shadowColor = [UIColor colorWithRed: 0.508 green: 0.508 blue: 0.508 alpha: 0.369];

    //// Rectangle Drawing
    UIBezierPath* rectanglePath = [UIBezierPath bezierPathWithRect: CGRectMake(CGRectGetMinX(frame) + 8.5, CGRectGetMinY(frame) + 12.5, 183, 131.5)];
    [shadowColor setStroke];
    rectanglePath.lineWidth = 2;
    [rectanglePath stroke];


    //// Rectangle 2 Drawing
    UIBezierPath* rectangle2Path = [UIBezierPath bezierPathWithRect: CGRectMake(CGRectGetMinX(frame) + 12, CGRectGetMinY(frame) + 15, 176, 40)];
    [color setFill];
    [rectangle2Path fill];

}

这将得到结果：

确保为表格单元格设置适当的高度。 还可以更改drawRectCode中的高度以适合您的需要！！！

Answer 3

1. 在tableView：cellForRowAtIndexPath中：

     [tableView setBackgroundColor:[UIColor clearColor]]; [cell setBackgroundColor:[UIColor whiteColor]]; [cell setSelectionStyle:UITableViewCellSelectionStyleGray]; [cell setAccessoryType:UITableViewCellAccessoryDisclosureIndicator]; [cell.layer setCornerRadius:10.0f]; [cell.layer setMasksToBounds:YES]; [cell.layer setBorderWidth:0.2f]; [cell.layer setBorderColor:[UIColor blackColor].CGColor]; 

   您可以根据需要更改值，我尝试了一下就可以了。

2. 您可以将边框设置为图像。 拍摄所需的图像，将其作为单元格的背景图像视图。

祝好运 ：）