如何让TableView Section拥有迷人圆角？

2023-09-26 06:53:58

赋予 UITableView 分区圆角：打造美观且用户友好的界面

在移动应用开发中，UITableView 是一种广泛使用的控件，用于显示数据列表。为了增强用户体验，有时需要对分区进行圆角处理，呈现更具吸引力的外观。虽然分区本身并不是一个物理视图，但我们仍然可以巧妙地实现这一效果。

巧用背景视图：打破局限

由于无法直接对分区设置圆角，因此我们需要另辟蹊径。一种有效的方法是创建自定义的背景视图，并将其应用于分区。

创建自定义背景视图

class CustomSectionBackgroundView: UIView {

    override func layoutSubviews() {
        super.layoutSubviews()

        // 设置圆角半径
        layer.cornerRadius = 10
        layer.masksToBounds = true
    }
}

在分区头部视图中使用自定义背景视图

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

    // 创建自定义背景视图
    let backgroundView = CustomSectionBackgroundView()

    // 设置背景颜色（可根据实际情况设置）
    backgroundView.backgroundColor = .systemGray6

    return backgroundView
}

优化视觉效果：锦上添花

除了圆角外，还可以进一步优化分区外观，使其与 UITableView 的其他部分更加协调。

调整分区间距

适当的间距可以增强视觉层次感，可以通过设置分区高度来实现：

func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {

    return 20 // 设置间距为 20
}

隐藏多余的分割线

默认情况下，分区之间有分割线。对于圆角分区，我们可以隐藏多余的分割线，只保留最底部的分割线：

func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {

    // 隐藏多余的分割线
    if section > 0 {
        view.subviews.first?.backgroundColor = .clear
    }
}