UITableView部分周围的边框

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了UITableView部分周围的边框相关的知识,希望对你有一定的参考价值。

我们如何在tableview的每个部分周围设置边框?附图是显示我正在寻找的图像。如果你看图像,它在每个tableview部分周围都有一个边框。

答案

对于这个问题,我修改了jvanmetre答案来舍入tableviews角,只需使用以下代码添加tableView:willDisplayCell:forRowAtIndexPath:委托方法(简单的复制/粘贴应该工作),它也适用于分组表。我评论了你应该在哪里设置边框的宽度和颜色。

- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
    {

    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, 10, 0);
        BOOL addLine = NO;
        if (indexPath.row == 0 && indexPath.row == [tableView numberOfRowsInSection:indexPath.section]-1) {
            CGPathAddRoundedRect(pathRef, nil, bounds, cornerRadius, cornerRadius);
        } else if (indexPath.row == 0) {
            CGPathMoveToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMaxY(bounds));
            CGPathAddArcToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMinY(bounds), CGRectGetMidX(bounds), CGRectGetMinY(bounds), cornerRadius);
            CGPathAddArcToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMinY(bounds), CGRectGetMaxX(bounds), CGRectGetMidY(bounds), cornerRadius);
            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), cornerRadius);
            CGPathAddArcToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMaxY(bounds), CGRectGetMaxX(bounds), CGRectGetMidY(bounds), cornerRadius);
            CGPathAddLineToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMinY(bounds));
        } else {
            CGPathAddRect(pathRef, nil, bounds);
            addLine = YES;
        }
        layer.path = pathRef;
        CFRelease(pathRef);
        //set the border color
        layer.strokeColor = [UIColor lightGrayColor].CGColor;
        //set the border width
        layer.lineWidth = 1;
        layer.fillColor = [UIColor colorWithWhite:1.f alpha:1.0f].CGColor;


        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);
            lineLayer.backgroundColor = tableView.separatorColor.CGColor;
            [layer addSublayer:lineLayer];
        }

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

另外,请记住在Interface Builder中将表的separator属性设置为none(默认为单行),如果以编程方式创建表,则应设置如下属性

yourTableView.separatorStyle = UITableViewCellSeparatorStyleNone
另一答案

这是Asad的答案更新为swift 3

func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
    if (cell.responds(to: #selector(getter: UIView.tintColor))) {
        let cornerRadius: CGFloat = 5
        cell.backgroundColor = UIColor.clear
        let layer: CAShapeLayer  = CAShapeLayer()
        let pathRef: CGMutablePath  = CGMutablePath()
        let bounds: CGRect  = cell.bounds.insetBy(dx: 10, dy: 0)
        var addLine: Bool  = false
        if (indexPath.row == 0 && indexPath.row == tableView.numberOfRows(inSection: indexPath.section)-1) {
            pathRef.__addRoundedRect(transform: nil, rect: bounds, cornerWidth: cornerRadius, cornerHeight: cornerRadius)
        } else if (indexPath.row == 0) {
            pathRef.move(to: CGPoint(x:bounds.minX,y:bounds.maxY))
            pathRef.addArc(tangent1End: CGPoint(x:bounds.minX,y:bounds.minY), tangent2End: CGPoint(x:bounds.midX,y:bounds.minY), radius: cornerRadius)

            pathRef.addArc(tangent1End: CGPoint(x:bounds.maxX,y:bounds.minY), tangent2End: CGPoint(x:bounds.maxX,y:bounds.midY), radius: cornerRadius)
            pathRef.addLine(to: CGPoint(x:bounds.maxX,y:bounds.maxY))
            addLine = true;
        } else if (indexPath.row == tableView.numberOfRows(inSection: indexPath.section)-1) {

            pathRef.move(to: CGPoint(x:bounds.minX,y:bounds.minY))
            pathRef.addArc(tangent1End: CGPoint(x:bounds.minX,y:bounds.maxY), tangent2End: CGPoint(x:bounds.midX,y:bounds.maxY), radius: cornerRadius)

            pathRef.addArc(tangent1End: CGPoint(x:bounds.maxX,y:bounds.maxY), tangent2End: CGPoint(x:bounds.maxX,y:bounds.midY), radius: cornerRadius)
            pathRef.addLine(to: CGPoint(x:bounds.maxX,y:bounds.minY))

        } else {
            pathRef.addRect(bounds)
            addLine = true
        }
        layer.path = pathRef
        //CFRelease(pathRef)
        //set the border color
        layer.strokeColor = UIColor.lightGray.cgColor;
        //set the border width
        layer.lineWidth = 1
        layer.fillColor = UIColor(white: 1, alpha: 1.0).cgColor


        if (addLine == true) {
            let lineLayer: CALayer = CALayer()
            let lineHeight: CGFloat  = (1 / UIScreen.main.scale)
            lineLayer.frame = CGRect(x:bounds.minX, y:bounds.size.height-lineHeight, width:bounds.size.width, height:lineHeight)
            lineLayer.backgroundColor = tableView.separatorColor!.cgColor
            layer.addSublayer(lineLayer)
        }

        let testView: UIView = UIView(frame:bounds)
        testView.layer.insertSublayer(layer, at: 0)
        testView.backgroundColor = UIColor.clear
        cell.backgroundView = testView
    }

}
另一答案

这是另一种我最终可以帮助某人的方法。它使用预定义的颜色和宽度绘制每个部分的边框,而不更改单元格的其他属性。它没有给你一个圆形的部分(可能它可以相应地修改),但它提供了很好的控制线绘制。该方法还解决了设备轮换问题。

typedef enum CellBorderMask{
    CellBorderMaskLeft      = 1 << 0,
    CellBorderMaskRigth     = 1 << 1,
    CellBorderMaskTop       = 1 << 2,
    CellBorderMaskBottom    = 1 << 3
}CellBorderMask;




- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath {

    CellBorderMask mask;
    if (indexPath.row == 0){
        mask |= CellBorderMaskTop;
    }

    if(indexPath.row == [tableView numberOfRowsInSection:indexPath.section] - 1) {
        mask |= CellBorderMaskBottom;
    }
    mask |= CellBorderMaskRigth | CellBorderMaskLeft;
    [self addBorder:mask forView:cell.contentView];
}

-(void)addBorder:(CellBorderMask)mask forView:(UIView *)view{
    float onePixel = (1.f / [UIScreen mainScreen].scale);
    float lineWidth = 1 * onePixel;
    CGColorRef cgBorderColor = [UIColor redColor].CGColor;


    CALayer *topBorder = [CALayer layer];
    CALayer *bottomBorder = [CALayer layer];
    CALayer *leftBorder = [CALayer layer];
    CALayer *rightBorder = [CALayer layer];

    //tag layers so it's possible to find and remove them later 
    topBorder.name = @"Border";
    bottomBorder.name = @"Border";
    leftBorder.name = @"Border";
    rightBorder.name = @"Border";

    //remove previously set border layers so they doesn't produce unwanted effect on orientation change
    [self cleanUpOldBorderLayers:view];

    topBorder.frame = CGRectMake(0.0f, 0.0f, view.bounds.size.width, lineWidth);
    topBorder.backgroundColor = cgBorderColor;

    bottomBorder.frame = CGRectMake(0.0f, view.bounds.size.height - lineWidth, view.bounds.size.width, lineWidth);
   

以上是关于UITableView部分周围的边框的主要内容,如果未能解决你的问题,请参考以下文章

移除 UITableView 的边框,而不是分隔符

如何围绕 UITableView 组部分创建发光效果?

如何删除画布周围的灰色边框

如何删除android Viewpager周围显示的黑色边框

UITableView 部分边框

IOS 7:从分组样式 UITableView 的一部分中删除边框