如何使用 Swift 中的 CG 类 创建以下附件 UI？

Question

如何创建这种UI？

到目前为止，我最终创建了与下面相同的 UI。

我不确定，如何像上面参考中那样弯曲黄色边框。

Answer 1

只需添加边框布局和添加遮罩即可实现您所需要的

完整示例（仅相关代码）

import UIKit

class ViewController: UIViewController {
    @IBOutlet weak var tableView: UITableView!
    var selectedIndex : Int = -1

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.

        self.tableView.layer.borderColor = UIColor.red.cgColor
        self.tableView.layer.borderWidth = 3
    }

    func bezierPathWithShape(rect:CGRect,cornerRadius:CGFloat) ->UIBezierPath
    {
        let path = UIBezierPath(roundedRect: rect, byRoundingCorners: .allCorners, cornerRadii: CGSize(width: cornerRadius, height: cornerRadius))
        return path
    }


    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        let mask = CAShapeLayer(layer: self)
        mask.path = self.bezierPathWithShape(rect: self.tableView.bounds, cornerRadius: 15).cgPath
        self.tableView.layer.mask = mask
        self.tableView.layer.masksToBounds = true
    }

}

结果

Answer 2

这是另一种方法。

取一个view，tableView和lines都是superView。

添加cornerRadius，然后为superView设置clipToBounds = true。

它会根据cornerRadius裁剪线条。