圆角tableview标题swift答案

【问题标题】：Rounded tableview header swift圆角tableview标题swift
【发布时间】：2023-03-16 14:31:01
【问题描述】：

我正在尝试在 tableview 顶部添加一个圆形的 tableview 标题。它的顶部在图像下方：

所以我的想法是绘制一个形状视图并将此视图添加为标题。但从我看到的解决方案来看，我所能做的就是这种形状：

我的问题是：如何在没有额外高度的情况下拥有这种观点？所以角落下面没有高度。任何其他实现设计的方式也不错。

我的代码：

import UIKit
import PlaygroundSupport


let containerView = UIView(frame: CGRect(x: 0, y: 0, width: 300, height: 500))
containerView.backgroundColor = .white
PlaygroundPage.current.liveView = containerView


let headerView = UIView()

let frame2 = CGRect(x: 0, y: 190, width: 300, height: 40)
headerView.clipsToBounds = true

headerView.backgroundColor = .red
headerView.frame = frame2

headerView.roundCorners([.topLeft, .topRight], radius: 40)
containerView.addSubview(headerView)

extension UIView {

func roundCorners(_ corners: UIRectCorner, radius: CGFloat) {
    let path = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
    let mask = CAShapeLayer()
    mask.path = path.cgPath
    self.layer.mask = mask
}
}

【问题讨论】：

标签： swift uitableview header uibezierpath rounded-corners

【解决方案1】：

使用这个视图扩展

extension UIView {
    func roundCorners(corners: UIRectCorner, radius: CGFloat) {
        let path = UIBezierPath(roundedRect: bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
        let mask = CAShapeLayer()
        mask.path = path.cgPath
        self.layer.mask = mask
    }
}

使用扩展：

viewPopupCard.roundCorners(corners: [.topLeft, .topRight], radius: 18)

【讨论】：

感谢您的回答，但您的解决方案给出的结果与我最初的问题相同：视图顶部有圆角，所以没关系，但角落下方也有一些额外的高度，这就是我试图删除的。我找到了解决方案，请查看没有高度的视图的其他答案。

【解决方案2】：

我找到了办法：

import UIKit
import PlaygroundSupport


let containerView = UIView(frame: CGRect(x: 0, y: 0, width: 300, height: 500))
containerView.backgroundColor = .white
PlaygroundPage.current.liveView = containerView


let headerView = UIView()
let frame2 = CGRect(x: 0, y: 190, width: 300, height: 22)
headerView.clipsToBounds = true

headerView.backgroundColor = .red
headerView.frame = frame2
draw(shapeView: headerView)
containerView.addSubview(headerView)

func draw(shapeView:UIView) {
    let path = headerView.headerBezierPath(hight: headerView.frame.height).cgPath
    let shape = CAShapeLayer()
    shape.path = path
    shapeView.layer.mask = shape
}

extension UIView {
    func headerBezierPath(hight:CGFloat) -> UIBezierPath {
        let cardRadius = CGFloat(hight)
        let viewSize = self.bounds.size
        let path = UIBezierPath()
        path.move(to: CGPoint(x: cardRadius, y: 0))
    
        // top line
        path.addLine(to: CGPoint(x: viewSize.width - cardRadius, y: 0))

        // top-right corner arc
        path.addArc(withCenter: 
        CGPoint(x: viewSize.width - cardRadius, y: cardRadius),
        radius: cardRadius,
        startAngle: CGFloat(Double.pi * 3 / 2),
        endAngle: CGFloat(0),
        clockwise: true)

        // bottom line
        path.addLine(to: CGPoint(x: 0, y: cardRadius))
    
        // top-left corner arc
       path.addArc(
          withCenter: CGPoint(x: cardRadius, y: cardRadius),
      radius: cardRadius,
      startAngle: CGFloat(Double.pi),
      endAngle: CGFloat(Double.pi / 2 * 3),
      clockwise: true
        )
    
        // close path join to origin
        path.close()
        // Set the background color of the view
        UIColor.gray.set()
        path.fill()
    
        return path
    }
}

【讨论】：