UITableView周圍的邊框

Question

我們如何在tableview的每個部分都有邊框？附上圖片來展示我在找什麼。如果您查看圖像，則每個tableview部分都有一個邊框。

Answer 1

您可以使用的tableview部分風格。

Answer 2

對於這個問題，我做了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; 
    } 
} 

還有，記得設置表沒有在界面生成器的分離特性，（這是在默認情況下單線），如果要創建表編程，你應該設置這樣

財產

yourTableView.separatorStyle = UITableViewCellSeparatorStyleNone 

Answer 3

以下是接受答案的快速版本。

func tableView(tableView: UITableView, willDisplayCell cell: UITableViewCell, forRowAtIndexPath indexPath: NSIndexPath) { 
    if (cell.respondsToSelector("tintColor")) { 
     var cornerRadius: CGFloat = 5; 
     cell.backgroundColor = UIColor.clearColor() 
     var layer: CAShapeLayer = CAShapeLayer() 
     var pathRef: CGMutablePathRef = CGPathCreateMutable() 
     var bounds: CGRect = CGRectInset(cell.bounds, 10, 0) 
     var addLine: Bool = false 
     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 = true; 
     } 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 = true; 
     } 
     layer.path = pathRef; 
     //CFRelease(pathRef); 
     //set the border color 
     layer.strokeColor = UIColor.lightGrayColor().CGColor; 
     //set the border width 
     layer.lineWidth = 1; 
     layer.fillColor = UIColor(white: 1, alpha: 1.0).CGColor; 


     if (addLine == true) { 
      var lineLayer: CALayer = CALayer(); 
      var lineHeight: CGFloat = (1/UIScreen.mainScreen().scale); 
      lineLayer.frame = CGRectMake(CGRectGetMinX(bounds), bounds.size.height-lineHeight, bounds.size.width, lineHeight); 
      lineLayer.backgroundColor = tableView.separatorColor!.CGColor; 
      layer.addSublayer(lineLayer); 
     } 

     var testView: UIView = UIView(frame:bounds) 
     testView.layer.insertSublayer(layer, atIndex: 0) 
     testView.backgroundColor = UIColor.clearColor() 
     cell.backgroundView = testView 
    } 

} 

Answer 4

這是另一種方法，我最終可能會幫助某人。它使用預定義的顏色和寬度爲每個部分繪製邊框，而不更改單元格的其他屬性。它不會給你一個圓形的部分（可能會相應地進行修改），但它可以很好地控制要繪製的線條。該方法還處理設備旋轉。

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); 
    bottomBorder.backgroundColor = cgBorderColor; 

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

    rightBorder.frame = CGRectMake(view.bounds.size.width - lineWidth, 0.0f, lineWidth, view.bounds.size.height); 
    rightBorder.backgroundColor = cgBorderColor; 
    if(mask & CellBorderMaskTop){ 
     [view.layer addSublayer:topBorder]; 
    } 
    if(mask & CellBorderMaskBottom){ 
     [view.layer addSublayer:bottomBorder]; 
    } 
    if(mask & CellBorderMaskLeft){ 
     [view.layer addSublayer:leftBorder]; 
    } 
    if(mask & CellBorderMaskRigth){ 
     [view.layer addSublayer:rightBorder]; 
    } 
} 

-(void)cleanUpOldBorderLayers:(UIView *)view{ 
    NSMutableArray *layerArray = [NSMutableArray new]; 
    for (CALayer *layer in view.layer.sublayers) { 
     if([@"Border" isEqualToString:layer.name]){ 
      [layerArray addObject:layer]; 
     } 
    } 
    for (CALayer *layer in layerArray) { 
     [layer removeFromSuperlayer]; 
    } 
} 


-(void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation{ 
    //need to trigger tableView:willDisplayCell: method on orientation change. 
    //Suggest a better method for this if there is one 
    [self.tableView reloadData]; 
} 

我使用tableView的reloadData方法來重繪細胞，我認爲這不是最好的方法。請在評論中提供替代方法的建議，我會更新代碼。

要將邊框添加到頁眉/頁腳，只需在viewForHeaderInSection/viewForFooterInSection委託方法中創建一個自定義視圖，並在將視圖從代理中返回之前將視圖傳遞給上述addBorder:forView方法。

Answer 5

這裏是阿薩德的回答更新迅速的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 
    } 

}