如何在UIView顶部应用向下的曲线？

Question

所以我看到一些关于如何在UIVIEW上添加曲线的帖子，如 如何在UIImageView底部应用曲线？ 但我没有看到任何关于如何在UIView的顶部添加一个向下的曲线。我试着用这个帖子所附的链接玩了一下，但似乎还没弄明白。

我试图在我的自定义UIVIEW的顶部实现这个曲线。

Answer 1

这是我如何能够做到这一点。

lazy var clariQuestionView: UIView = {
    let safeAreaAdjustment = UIApplication.shared.windows.filter { $0.isKeyWindow}.first?.safeAreaInsets.bottom ?? 0

    let containerView = UIView(frame: CGRect(x: 0, y: UIScreen.main.bounds.height - 169 - safeAreaAdjustment, width: UIScreen.main.bounds.width, height: 169 + safeAreaAdjustment))
    containerView.backgroundColor = .lightGray
    containerView.translatesAutoresizingMaskIntoConstraints = true
    return containerView
}()

override func layoutSubviews() {
    super.layoutSubviews()
    applyCurve(givenView: clariQuestionView, curvedPercent: 0.2)
}

private func applyCurve(givenView view: UIView, curvedPercent: CGFloat) {
    let shapeLayer = CAShapeLayer(layer: view.layer)
    shapeLayer.path = self.pathForCurvedView(givenView: view, curvedPercent: curvedPercent).cgPath
    shapeLayer.frame = view.bounds
    shapeLayer.masksToBounds = true
    view.layer.mask = shapeLayer
    addSubview(view)
}

private func pathForCurvedView(givenView view: UIView, curvedPercent: CGFloat) -> UIBezierPath {
    let path = UIBezierPath()
    path.move(to: CGPoint(x: 0.0, y: 0.0))

    path.addLine(to: CGPoint(x: 0.0, y: view.bounds.size.height))
    path.addLine(to: CGPoint(x: view.bounds.size.width, y: view.bounds.size.height))
    path.addLine(to: CGPoint(x: view.bounds.size.width, y: 0.0))
    path.addQuadCurve(to: CGPoint(x: 0, y: 0), controlPoint: CGPoint(x: view.bounds.size.width / 2, y: view.bounds.size.height * curvedPercent))
    path.close()

    return path
}