带有多个单元格边框的钱包样式 Swift
Posted
技术标签:
【中文标题】带有多个单元格边框的钱包样式 Swift【英文标题】：Wallet style with multiple cells border Swift 【发布时间】：2020-07-29 05:36:32 【问题描述】：如何只制作带有圆角和黑色边框颜色的最后一个单元格？而单元格的其余部分将只有左右边框？
这是细胞的设计。粉色部分是节标题，白色部分是单元格。在图像中，我有 6 个单元格，我希望第 6 个单元格有圆角和黑色边框。单元格 1-5 将只有左右边框。
我的表格视图将包含几组待办事项，请看下图。
谢谢。
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell
.
.
.
cell.view.clipsToBounds = true
if indexPath.row == todoList.count - 1
cell.view.layer.cornerRadius = 10
cell.view.layer.maskedCorners = [.layerMinXMaxYCorner,.layerMaxXMaxYCorner]
cell.view.layer.borderColor = UIColor.black.cgColor //not working it makes all cell has border
cell.view.layer.borderWidth = 1
else
//only want left and right with black border
.
.
.
【问题讨论】：
为什么不给tableView而不是单元格提供圆角半径和黑色边框？ 它是用于tableviewcell而不是tableview，我有两个tableviewcell用于自定义标题和单元格。 我要求给 tableView 圆角半径 这行不通。单元格位于 tableview 内并具有填充。这将如何应用于每组部分和单元格？ 【参考方案1】：@PpppppPppppp，我设法通过一些技巧得到了结果。如果您找到另一种方法，请发布。这是最终结果：
不要为单元格设置左右边框，而是将黑色设置为单元格的contentView，并在内部放置一个带有前导和尾随约束的视图，使其看起来像有边框。
然后根据您的 UI 要求提供带有遮罩角的 viewForHeaderInSection 和 viewForFooterInSection。在页脚中需要一些技巧来隐藏顶部边框。
我没有使用任何自定义UITableViewCell 或UITableViewHeaderFooterView，因为这仅用于演示。在下面找到表格视图的完整代码。
extension ViewController: UITableViewDataSource, UITableViewDelegate
func numberOfSections(in tableView: UITableView) -> Int
return 4
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int
return 6
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell
let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)
cell.textLabel?.text = "index: \(indexPath.row)"
return cell
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat
return 50
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView?
let header = UIView(frame: .init(x: 0, y: 0, width: tableView.bounds.width, height: 70))
header.backgroundColor = .white
let innderView = UIView(frame: .init(x: 0, y: 20, width: header.bounds.width, height: 50))
header.addSubview(innderView)
innderView.backgroundColor = .lightGray
innderView.layer.cornerRadius = 8
innderView.layer.borderColor = UIColor.black.cgColor
innderView.layer.borderWidth = 2
innderView.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMinYCorner]
return header
func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat
return 70
func tableView(_ tableView: UITableView, viewForFooterInSection section: Int) -> UIView?
let footer = UIView(frame: .init(x: 0, y: 0, width: tableView.bounds.width, height: 20))
let innerView = UIView(frame: .init(x: 2, y: 0, width: footer.bounds.width-4, height: footer.bounds.height-2))
footer.addSubview(innerView)
innerView.backgroundColor = .white
innerView.layer.cornerRadius = 8
innerView.layer.maskedCorners = [.layerMinXMaxYCorner, .layerMaxXMaxYCorner]
footer.backgroundColor = .black
footer.layer.cornerRadius = 8
footer.layer.maskedCorners = [.layerMinXMaxYCorner, .layerMaxXMaxYCorner]
return footer
func tableView(_ tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat
return 20
【讨论】：
感谢您的回答！！ 对不起，它确实有帮助，但不适用于清晰的背景，所以我选择了其他人的答案。我给了你一个赞成票，因为它仍然非常有用！谢谢！【参考方案2】：我确实认为@Jithin 使用添加子视图的答案是最简单和最好的答案，但是如果您真的想绘制自己的边界线，我们可以使用 UIBezierPath 来实现这一点。 （我认为这有点矫枉过正）。
extension ViewController: UITableViewDataSource
func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int)
let cornerRadius: CGFloat = 10.0
let lineWidth: CGFloat = 2
// deduct the line width to keep the line stay side the view
let point1 = CGPoint(x: 0.0 + lineWidth / 2, y: view.frame.height)
let point2 = CGPoint(x: 0.0 + lineWidth / 2, y: 0.0 + cornerRadius + lineWidth / 2)
let point3 = CGPoint(x: 0.0 + cornerRadius + lineWidth / 2, y: 0.0 + lineWidth / 2)
let point4 = CGPoint(x: view.frame.width - cornerRadius - lineWidth / 2, y: 0.0 + lineWidth / 2)
let point5 = CGPoint(x: view.frame.width - lineWidth / 2, y: 0.0 + cornerRadius + lineWidth / 2)
let point6 = CGPoint(x: view.frame.width - lineWidth / 2, y: view.frame.height - lineWidth / 2)
// draw the whole line with upper corner radius
let path = UIBezierPath()
path.move(to: point1)
path.addLine(to: point2)
path.addArc(withCenter: CGPoint(x: point3.x, y: point2.y),
radius: cornerRadius,
startAngle: .pi,
endAngle: -.pi/2,
clockwise: true)
path.addLine(to: point4)
path.addArc(withCenter: CGPoint(x: point4.x, y: point5.y),
radius: cornerRadius,
startAngle: -.pi/2,
endAngle: 0,
clockwise: true)
path.addLine(to: point6)
path.addLine(to: point1)
let topBorder = CAShapeLayer()
topBorder.path = path.cgPath
topBorder.lineWidth = lineWidth
topBorder.strokeColor = UIColor.purple.cgColor
topBorder.fillColor = nil
// add the line to header view
view.layer.addSublayer(topBorder)
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell
let cell = tableView.dequeueReusableCell(withIdentifier: "testingCell", for: indexPath) as! TableViewCell
cell.cellLabel.text = "\(mockData[indexPath.section][indexPath.row])"
cell.backgroundColor = .green
if indexPath.row == mockData[indexPath.section].count - 1
cell.setAsLastCell()
// we can add a mask to cut those area outside our border line
let maskPath = UIBezierPath(roundedRect: cell.bounds, byRoundingCorners: [.bottomLeft, .bottomRight], cornerRadii: CGSize(width: 10, height: 10))
let maskLayer = CAShapeLayer()
maskLayer.path = maskPath.cgPath
cell.layer.mask = maskLayer
else
cell.setAsNormalCell()
cell.layer.mask = nil
return cell
这是 UITableViewwCell：
class TableViewCell: UITableViewCell
@IBOutlet weak var cellLabel: UILabel!
let leftBorder = CALayer()
let rightBorder = CALayer()
let bottomBorder = CAShapeLayer()
let cornerRadius: CGFloat = 10
let lineWidth: CGFloat = 2
override func awakeFromNib()
super.awakeFromNib()
override func layoutSubviews()
super.layoutSubviews()
leftBorder.frame = CGRect(x: 0, y: 0, width: lineWidth, height: self.frame.height)
leftBorder.backgroundColor = UIColor.blue.cgColor
self.layer.addSublayer(leftBorder)
rightBorder.frame = CGRect(x: self.frame.width - lineWidth, y: 0.0, width: lineWidth, height: self.frame.height)
rightBorder.backgroundColor = UIColor.blue.cgColor
self.layer.addSublayer(rightBorder)
// same idea as drawing line in the header view
let point1 = CGPoint(x: 0.0 + lineWidth / 2, y: 0.0)
let point2 = CGPoint(x: 0.0 + lineWidth / 2, y: self.frame.height - cornerRadius - lineWidth / 2)
let point3 = CGPoint(x: cornerRadius + lineWidth / 2, y: self.frame.height - lineWidth / 2)
let point4 = CGPoint(x: self.frame.width - cornerRadius - lineWidth / 2, y: self.frame.height - lineWidth / 2)
let point5 = CGPoint(x: self.frame.width - lineWidth / 2, y: self.frame.height - cornerRadius - lineWidth / 2)
let point6 = CGPoint(x: self.frame.width - lineWidth / 2, y: 0.0)
let path = UIBezierPath()
path.move(to: point1)
path.addLine(to: point2)[![enter image description here][1]][1]
path.addArc(withCenter: CGPoint(x: point3.x, y: point2.y),
radius: cornerRadius,
startAngle: .pi,
endAngle: .pi/2,
clockwise: false)
path.addLine(to: point4)
path.addArc(withCenter: CGPoint(x: point4.x,y: point5.y),
radius: cornerRadius,
startAngle: .pi/2,
endAngle: 0,
clockwise: false)
path.addLine(to: point6)
bottomBorder.path = path.cgPath
bottomBorder.strokeColor = UIColor.red.cgColor
bottomBorder.lineWidth = lineWidth
bottomBorder.fillColor = nil
self.layer.addSublayer(bottomBorder)
func setAsNormalCell()
leftBorder.isHidden = false
rightBorder.isHidden = false
bottomBorder.isHidden = true
func setAsLastCell()
leftBorder.isHidden = true
rightBorder.isHidden = true
bottomBorder.isHidden = false
当然，上面的代码只是为了测试目的，可能有点乱，但我希望它可以解释一下画线。
结果：
【讨论】：
我喜欢这两个答案，但你的答案更灵活，如果背景清晰，我也可以使用它。谢谢！ 这将在表格视图重用单元格时创建多个图层。我认为这不是一个好的解决方案 @SultanAli 谢谢你，是的，你是对的，我只是给出了一个快速回答，重点是通过 UIBezierPath 绘制边界，正如我所说，这只是为了测试目的。当我们滚动 tableView 时，会多次调用 willDisplayHeaderView，并多次添加同一个 subLayer 来查看。尽管 CALayer 是轻量级的，但这并不是添加它的理想方式。当然，我们可以做一些简单的事情，比如在添加新子图层之前删除所有子图层，但这不是我想在答案中关注的内容。 到目前为止，我更喜欢创建 UITableViewHeaderFooterView 的子类，覆盖 layoutSubviews 并在那里添加 subLayers（有趣的是，我发现即使 layoutSubviews 也被调用，因此 subLayers 被多次添加，subLayers 的总数添加相同的子图层时不会增加，但这是另一回事）。我将尝试更新我的答案以使其完美，感谢您的评论:) @paky 感谢您的回复，据我了解，如果它是单元格或单元格的子视图，它将增加视图中的子层数【参考方案3】：您可以为表格视图指定圆角半径。
tableView.layer.cornerRadius = 10
tableView.layer.borderColor = UIColor.black.cgColor
tableView.layer.borderWidth = 1
【讨论】：
以上是关于带有多个单元格边框的钱包样式 Swift的主要内容，如果未能解决你的问题，请参考以下文章