分組 UITableView 中第一個和最后一個單元格的自定義圓角

Question

我的 iPhone 應用程序當前正在顯示一個包含 2 個部分的分組表。 我嘗試使用以下方法更改每個部分的第一個和最后一個單元格（或者在只有一行的部分的情況下在同一單元格上）的圓角半徑：

cell.layer.cornerRadius = 4;

或作用於整個表視圖：

self.tableView.layer.cornerRadius = 4;

但是沒有運氣......當然我在執行這個操作之前已經導入了 QuartzCore 。 看起來只有當表格以普通樣式顯示時才能自定義角。

理想的解決方案是自定義第一個角的頂角和最后一個角的底角。

有什么建議？

Answer 1

最簡單的方法是：

1. 在xib文件中創建自定義單元格，設置其唯一標識符，例如： @"beginCell", @"middleCell", @"endCell" 。 您可以根據本教程進行操作： http : //www.bdunagan.com/2009/06/28/custom-uitableviewcell-from-a-xib-in-interface-builder/

2. 在方法- (UITableViewCell *)tableView:(UITableView *)aTableView cellForRowAtIndexPath:(NSIndexPath *)indexPath您必須找到位於本節中間或開頭/結尾的其他內容，並使用具有正確標識符的單元格。

Answer 2

您可以做的是在單元格的背景上添加UIView ，使單元格背景為clearcolor。 調整UIView使其具有圓角。

Answer 3

這是在Swift 4.2中可以使用的功能：

func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath)
{
    let cornerRadius = 5
    var corners: UIRectCorner = []

    if indexPath.row == 0
    {
        corners.update(with: .topLeft)
        corners.update(with: .topRight)
    }

    if indexPath.row == tableView.numberOfRows(inSection: indexPath.section) - 1
    {
        corners.update(with: .bottomLeft)
        corners.update(with: .bottomRight)
    }

    let maskLayer = CAShapeLayer()
    maskLayer.path = UIBezierPath(roundedRect: cell.bounds,
                                  byRoundingCorners: corners,
                                  cornerRadii: CGSize(width: cornerRadius, height: cornerRadius)).cgPath
    cell.layer.mask = maskLayer
}

Answer 4

UIView  *view = [UIView alloc]initWithFrame:YourFrame];
view.layer.cornerRadius = 8;

cell.backgroundView = view;

並且不要忘記UITableView背景色是透明的。

Answer 5

如果您只需要圓角，還有另一種解決方案（靈感來自於本機uitableview（cell）的分組樣式，在slowmo :)中）。 應該是這樣的：

單元子類...

@interface MyCell : UITableViewCell
@property (nonatomic) top;
@property (nonatomic) bottom;
@end

@implementation MyCell
-(id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier{
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self) {
        self.backgroundColor = [UIColor clearColor]; // remove white default background
        //example settings, UIImageViews with resizable images can be used too
        self.backgroundView = [[UIView alloc] init];
        self.selectedBackgroundView = [[UIView alloc] init];
        self.backgroundView.backgroundColor = [UIColor greenColor];
        self.selectedBackgroundView.backgroundColor = [UIColor blueColor];
        self.backgroundView.layer.cornerRadius = self.selectedBackgroundView.layer.cornerRadius = 5; // 
    }
    return self;
}
-(void)layoutSubviews{
    [super layoutSubviews];
    self.backgroundView.frame = self.selectedBackgroundView.frame = UIEdgeInsetsInsetRect(self.bounds, UIEdgeInsetsMake(self.top?0:-self.backgroundView.layer.cornerRadius, 0, self.bottom?0:-self.backgroundView.layer.cornerRadius, 0));
}
-(void)setTop:(BOOL)top{
    _top = top;
    [self setNeedsLayout];
}
-(void)setBottom:(BOOL)bottom{
    _bottom = bottom;
    [self setNeedsLayout];
}
@end

在dataSource中，您可以執行以下操作：...

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
      ...cell initialization stuff...
      [(MyCell *)cell setTop:(indexPath.row == 0)];
      [(MyCell *)cell setBottom:(indexPath.row == [tableView numberOfRowsInSection:indexPath.section]-1)];

      return cell;
}

優點：

• 所有細胞一個背景
• 易於使用
• 可動畫化（您要更改位置而不是圖像）
• 也可以用於普通樣式（但要注意部分：））

缺點：

• 需要單元格的子類（即使在更改rowHeight之后，我也找不到調整背景位置的方法）
• 不能用整個截面的圓角解決我的問題（您必須將圓角手動截面視圖）

希望對您有所幫助，但請注意，此代碼未經測試！ 在發布此答案的幾分鍾前，我已經實現了這個想法，它似乎很有效:)

Answer 6

對於故事板，在 iOS >= 13.0

將 UITableView 樣式設置為Inset Grouped

Answer 7

我將我的 tableview 單元格子類化：

class CGStandardCell: UITableViewCell {
    
    override func awakeFromNib() {
        super.awakeFromNib()
    }
    
    func setCornerRadius(forIndexPath indexPath: IndexPath, inTableView tableView: UITableView) {
        let lastRow = tableView.numberOfRows(inSection: indexPath.section) - 1
        
        if indexPath.row == 0 && indexPath.row == lastRow {
            self.cornerRadius = 20
            self.layer.maskedCorners = [.layerMaxXMinYCorner,
                                        .layerMinXMinYCorner,
                                        .layerMinXMaxYCorner,
                                        .layerMaxXMaxYCorner]
        } else if indexPath.row == 0 {
            self.cornerRadius = 20
            self.layer.maskedCorners = [.layerMaxXMinYCorner,
                                        .layerMinXMinYCorner]
        } else if indexPath.row == lastRow {
            self.cornerRadius = 20
            self.layer.maskedCorners = [.layerMinXMaxYCorner,
                                        .layerMaxXMaxYCorner]
        }
    }
}

然后在 tableView(_tableView: UITableView, cellForRowAt indexPath: IndexPath) 中調用

cell.setCornerRadius(forIndexPath: indexPath, inTableView: tableView)