如何创建带有圆角的UITableView分区视图

Question

我在stackoverflow和其他开发者网站上搜索了很多与我的问题相关的帖子，但是我无法找到确切且适合的答案。我需要创建一个带有圆角的表格部分视图，而不使用第三方框架，类似于iOS 6中样式化的Grouped tableview。

请帮忙!!!

想要像这样：

- Ankit Gupta

---

你需要将顶部/底部单元格的角四舍五入吗？ - Sean Lintern

请问您能提供屏幕截图吗？具体想要什么样的呢？ - Suhas Arvind Patil

你需要创建自定义视图并在viewforheader方法中将其添加到页眉中，它能正常工作。 - Krish Solanki

@SuhasPatil 我添加了我的屏幕截图和问题。 - Ankit Gupta

可以展示代码吗？ - Joshua

好的，我会发布我的答案。 - Suhas Arvind Patil

Answer 1

在这里提供帮助：我认为您正在寻找一个整个部分角落都是圆角的效果（请参见附加的截图）。

你可以通过将 tableview style 设置为 .insetGrouped 来实现这一点。

https://developer.apple.com/documentation/uikit/uitableview/style/insetgrouped

- Ashis Laha

---

"insetGrouped" 仅适用于 iOS 13.0 或更高版本。 - Coder ACJHP

圆角半径可编辑吗？ - AsifHabib

Answer 2

尝试以下操作：

-(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
    UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, tableView.frame.size.width, 50)];
    [view setBackgroundColor:[UIColor orangeColor]];
    [view fnForMakingRoundCorners];

    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(10, 5, tableView.frame.size.width, 18)];
    [label setText:@"Text"];
    [view addSubview:label];

    return view;
}

-(CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section {

    return 50.0f;
}

为了制作圆角，我编写了一个UIView类别，适用于所有视图：

// For -> Rounded Corners
-(void)fnForMakingRoundCorners {

    self.layer.cornerRadius = 5.0f;
    self.layer.masksToBounds = YES;
}

将看起来像：

- Suhas Arvind Patil

---

谢谢你的帮助，伙计，但我也需要在底部进行更改。你能为此提供建议吗？ - Ankit Gupta

欢迎，底部也是什么意思？您想将页脚添加到表视图中吗？ - Suhas Arvind Patil

设置页脚只是另一个委托方法，圆角视图与上面相同。 - horsley

Answer 3

为表视图添加这个

    func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
        let cornerRadius: CGFloat = 10
        cell.backgroundColor = .clear

        let layer = CAShapeLayer()
        let pathRef = CGMutablePath()
        let bounds = cell.bounds.insetBy(dx: 0, dy: 0)
        cornerLayerWidth = bounds.width
        var addLine = 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: .init(x: bounds.minX, y: bounds.maxY))
            pathRef.addArc(tangent1End: .init(x: bounds.minX, y: bounds.minY), tangent2End: .init(x: bounds.midX, y: bounds.minY), radius: cornerRadius)
            pathRef.addArc(tangent1End: .init(x: bounds.maxX, y: bounds.minY), tangent2End: .init(x: bounds.maxX, y: bounds.midY), radius: cornerRadius)
            pathRef.addLine(to: .init(x: bounds.maxX, y: bounds.maxY))
            addLine = true

            cell.backgroundColor = .white

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

        layer.path = pathRef
        layer.fillColor = UIColor(white: 1, alpha: 1).cgColor

        if (addLine == true) {
            let lineLayer = CALayer()
            let lineHeight = 1.0 / 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(frame: bounds)
        testView.layer.insertSublayer(layer, at: 0)
        testView.backgroundColor = .clear
        cell.backgroundView = testView
    }

如果你想要包括节标题，可以尝试下面这个：

声明cornerLayerWidth为全局变量。

var cornerLayerWidth:CGFloat = 0.0

    func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
        let cornerRadius: CGFloat = 10
        cell.backgroundColor = .clear

        let layer = CAShapeLayer()
        let pathRef = CGMutablePath()
        let bounds = cell.bounds.insetBy(dx: 0, dy: 0)
        cornerLayerWidth = bounds.width
        var addLine = 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 {


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

        layer.path = pathRef
        layer.fillColor = UIColor(white: 1, alpha: 1).cgColor

        if (addLine == true) {
            let lineLayer = CALayer()
            let lineHeight = 1.0 / 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(frame: bounds)
        testView.layer.insertSublayer(layer, at: 0)
        testView.backgroundColor = .clear
        cell.backgroundView = testView
    }

和

    func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {

        let cell = tableView.dequeueReusableCell(withIdentifier: "eMPOIListHeaderViewCell") as! eMPOIListHeaderViewCell

        let cornerRadius: CGFloat = 10

        let layer = CAShapeLayer()
        let pathRef = CGMutablePath()
        let bounds =  CGRect(x: 0, y: 0, width: cornerLayerWidth, height: 50)//cell.bounds.insetBy(dx: 0, dy: 0)

        pathRef.__addRoundedRect(transform: nil, rect: bounds, cornerWidth: cornerRadius, cornerHeight: cornerRadius)

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



        layer.path = pathRef
        layer.fillColor = UIColor(white: 1, alpha: 1).cgColor

             let lineLayer = CALayer()
            let lineHeight = 1.0 / 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(frame: bounds)
        testView.layer.insertSublayer(layer, at: 0)
        testView.backgroundColor = .clear

        cell.backgroundView = testView


        return cell

    }

- Rajath Kornaya

Answer 4

我认为其中一个选项是在节头中添加一个containerView（customView），并对其进行圆角设置。

UITableViewHeaderFooterView *footerView = [tableView dequeueReusableHeaderFooterViewWithIdentifier:@"identifier"];
UIView *customView = (UIView *)[footerView viewWithTag:888];

if(footerView == nil){ // using a non-registered header
   // initialize footerView
   // <FooterView initialized>
   footerView.contentView.backgroundColor = [UIColor clearColor];
   footerView.backgroundView = nil; 

   customView = [UIView new];
   customView.tag = 888;
   [customView layer].cornerRadius = 5;
   [footerView.contentView addSubview: customView];
}

- Joshua