swift - TableView的使用以及圆角分组表格实现的思路
TableView的使用：
与oc语言中的tableview基本类似，swift中的表格依然是如下的实现步骤
1、创建表格
2、设置代理，并注册单元格
3、遵循协议
4、实现代理方法
swift创建表格：
lazy var tableView:UITableView = {
let table:UITableView = UITableView.init(frame: .zero, style: .grouped)
table.delegate = self
table.dataSource = self
table.backgroundColor = RGBColorFromHex(rgbValue: 0xF5F4F4)
table.register(OrderTableViewCell.self , forCellReuseIdentifier: "orderCellid")
table.register(OrderTableTitleViewCell.self , forCellReuseIdentifier: "orderTitleCellid")
table.register(OrderFooterView.self , forHeaderFooterViewReuseIdentifier: "footerCellid")
table.rowHeight = 45
return table
}()
表格实现的代理方法
func numberOfSections(in tableView: UITableView) -> Int {
return 3 // 返回的分组数
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 3 // 每一个分组的内容个数
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let titleCell:OrderTableTitleViewCell = tableView.dequeueReusableCell(withIdentifier: "orderTitleCellid", for: indexPath) as! OrderTableTitleViewCell
let cell:OrderTableViewCell = tableView.dequeueReusableCell(withIdentifier: "orderCellid", for: indexPath) as! OrderTableViewCell
if indexPath.row == 0 {
titleCell.setCellWithData(data: "titleData")
return titleCell
} else {
cell.setCellWithData(data: "cellData")
return cell
}
}
圆角分组表格实现思路：
实现如上图的分组圆角表格思路：
实现的思路有两种，第一种是含有分组footer的tabView,对每个分组中的第一个cell设置左上放圆角与右上角圆角。每一个分组的footerView设置左下方圆角与右下方圆角
代码例子：（在tableView将要进行展示的代理方法中去实现）
func tableView(_ tableView: UITableView, willDisplayFooterView view: UIView, forSection section: Int) {
// 圆角路径
let path:UIBezierPath = UIBezierPath.init(roundedRect: view.bounds, byRoundingCorners: [.bottomLeft,.bottomRight], cornerRadii: CGSize(width: 10, height: 0))
//
let shapLayer:CAShapeLayer = CAShapeLayer()
shapLayer.lineWidth = 1
shapLayer.strokeColor = UIColor.white.cgColor
shapLayer.fillColor = UIColor.clear.cgColor
shapLayer.path = path.cgPath
let maskLayer:CAShapeLayer = CAShapeLayer.init()
maskLayer.path = path.cgPath
view.layer.mask = maskLayer
view.layer.addSublayer(shapLayer)
}
func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
if indexPath.row == 0 {
let path:UIBezierPath = UIBezierPath.init(roundedRect: cell.contentView.bounds, byRoundingCorners: [.topLeft,.topRight], cornerRadii: CGSize(width: 10, height: 0))
let shapLayer:CAShapeLayer = CAShapeLayer()
shapLayer.lineWidth = 1
shapLayer.strokeColor = UIColor.white.cgColor
shapLayer.fillColor = UIColor.clear.cgColor
shapLayer.path = path.cgPath
let maskLayer:CAShapeLayer = CAShapeLayer.init()
maskLayer.path = path.cgPath
cell.layer.mask = maskLayer
cell.layer.addSublayer(shapLayer)
}
}
原理解释：这里我通过使用UIBezierPath去创建含有圆角弧度的路径,并绘制layer层加入需要进行显示的视图上，之后并对需要显示的layer设置蒙版进行展示
第二种实现思路是不含有FooterView的圆角分组表格，其思路与第一种类似，对每一个分组的第一个cell于最后一个cell进行绘制圆角
代码例子如下
func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
let rowsCount:Int = tableView.numberOfRows(inSection: indexPath.section)
if indexPath.row == 0 {
let path:UIBezierPath = UIBezierPath.init(roundedRect: cell.contentView.bounds, byRoundingCorners: [.topLeft,.topRight], cornerRadii: CGSize(width: 10, height: 0))
let shapLayer:CAShapeLayer = CAShapeLayer()
shapLayer.lineWidth = 1
shapLayer.strokeColor = UIColor.white.cgColor
shapLayer.fillColor = UIColor.clear.cgColor
shapLayer.path = path.cgPath
let maskLayer:CAShapeLayer = CAShapeLayer.init()
maskLayer.path = path.cgPath
cell.layer.mask = maskLayer
cell.layer.addSublayer(shapLayer)
}
if indexPath.row = rowsCount - 1 {
let path:UIBezierPath = UIBezierPath.init(roundedRect: cell.contentView.bounds, byRoundingCorners: [.topLeft,.topRight], cornerRadii: CGSize(width: 10, height: 0))
let shapLayer:CAShapeLayer = CAShapeLayer()
shapLayer.lineWidth = 1
shapLayer.strokeColor = UIColor.white.cgColor
shapLayer.fillColor = UIColor.clear.cgColor
shapLayer.path = path.cgPath
let maskLayer:CAShapeLayer = CAShapeLayer.init()
maskLayer.path = path.cgPath
cell.layer.mask = maskLayer
cell.layer.addSublayer(shapLayer)
}
}