如何在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

这是另一种方法。

对tableView和行进行superView视图。

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

它将根据cornerRadius剪切线条。