Swift - 实现tableView中section分组圆角效果1(没有分区头、尾的情况)
作者:hangge | 2018-10-24 08:10
表格分组(section)的圆角效果在许多 App 中都可以看到。其具体实现方式,根据 section 是否包含有 header 和 footer 而又有所不同。下面通过样例演示没有分区头、分区尾的情况下,如何实现圆角效果。
一、没有 header 和 footer 的情况
1,效果图
(1)tableView 中每个 section 都带有圆角,无论该分区内是只有一个单元格,还是有多个单元格。
(2)同时为了让显示效果更好,在每个单元格左右两侧还设置了边距,使其与边框保持一定的距离。

2,样例代码
(1)首先自定义一个单元格类(MyTableViewCell),并重写它的 frame 属性方法,实现边距效果。
import UIKit
//自定义单元格
class MyTableViewCell: UITableViewCell {
override var frame: CGRect {
get {
return super.frame
}
set {
var frame = newValue
frame.origin.x += 15
frame.size.width -= 2 * 15
super.frame = frame
}
}
}
(2)主视图控制器代码如下,要实现圆角效果的关键在于 cellForRowAt 方法,根据不同情况对单元格设置不同的遮罩。
import UIKit
class ViewController: UIViewController , UITableViewDelegate, UITableViewDataSource{
var tableView:UITableView?
var allnames:Dictionary<Int, [String]>?
override func loadView() {
super.loadView()
}
override func viewDidLoad() {
super.viewDidLoad()
//初始化数据
self.allnames = [
0:[String]([
"UILabel 标签",
"UITextField 文本框",
"UIButton 按钮"]),
1:[String]([
"UIDatePiker 日期选择器",
"UIToolbar 工具条"]),
2:[String]([
"UIProgressView 进度条"])
]
//创建表视图
self.tableView = UITableView(frame:self.view.frame, style:.grouped)
self.tableView!.delegate = self
self.tableView!.dataSource = self
//创建一个重用的单元格
self.tableView!.register(MyTableViewCell.self, forCellReuseIdentifier: "cell")
self.view.addSubview(self.tableView!)
}
//返回分区
func numberOfSections(in tableView: UITableView) -> Int {
return self.allnames!.count
}
//返回表格行数(也就是返回控件数)
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
let data = self.allnames?[section]
return data!.count
}
//创建各单元显示内容(创建参数indexPath指定的单元)
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath)
-> UITableViewCell {
//获取单元格
let cell = self.tableView?.dequeueReusableCell(withIdentifier: "cell")
as! MyTableViewCell
cell.accessoryType = .disclosureIndicator
//设置单元格内容
let secno = indexPath.section
var data = self.allnames?[secno]
cell.textLabel?.text = data![indexPath.row]
//圆角半径
let cornerRadius:CGFloat = 15.0
//下面为设置圆角操作(通过遮罩实现)
let sectionCount = tableView.numberOfRows(inSection: indexPath.section)
let shapeLayer = CAShapeLayer()
cell.layer.mask = nil
//当前分区有多行数据时
if sectionCount > 1 {
switch indexPath.row {
//如果是第一行,左上、右上角为圆角
case 0:
var bounds = cell.bounds
bounds.origin.y += 1.0 //这样每一组首行顶部分割线不显示
let bezierPath = UIBezierPath(roundedRect: bounds,
byRoundingCorners: [.topLeft,.topRight],
cornerRadii: CGSize(width: cornerRadius,height: cornerRadius))
shapeLayer.path = bezierPath.cgPath
cell.layer.mask = shapeLayer
//如果是最后一行,左下、右下角为圆角
case sectionCount - 1:
var bounds = cell.bounds
bounds.size.height -= 1.0 //这样每一组尾行底部分割线不显示
let bezierPath = UIBezierPath(roundedRect: bounds,
byRoundingCorners: [.bottomLeft,.bottomRight],
cornerRadii: CGSize(width: cornerRadius,height: cornerRadius))
shapeLayer.path = bezierPath.cgPath
cell.layer.mask = shapeLayer
default:
break
}
}
//当前分区只有一行行数据时
else {
//四个角都为圆角(同样设置偏移隐藏首、尾分隔线)
let bezierPath = UIBezierPath(roundedRect:
cell.bounds.insetBy(dx: 0.0, dy: 2.0),
cornerRadius: cornerRadius)
shapeLayer.path = bezierPath.cgPath
cell.layer.mask = shapeLayer
}
return cell
}
}
class MyTableViewCell: UITableViewCell {
override var frame: CGRect {
get {
return super.frame
}
set {
var frame = newValue
frame.origin.x += 15
frame.size.width -= 2 * 15
super.frame = frame
}
}
}
全部评论(0)