如何在Swift中弯曲UIView控制器的顶部

Question

我试图用swift来计算出视图控制器顶部的曲线.

谁能帮我.我希望它像这张照片中显示的那样弯曲.

Answer 1

你可以用一些bezier曲线绘制背景,这不应该太难.如果您想要重新创建类似于该示例底部的内容,您尤其希望这样做.

这是您可以使用的自定义视图.它只是覆盖了绘图,并使其背景为具有圆顶的贝塞尔曲线路径

您可以使用我插入的静态值调整高度和曲线.

class CurvedView: UIView {
    override func drawRect(rect: CGRect) {

        let y:CGFloat = 20
        let curveTo:CGFloat = 0

        let myBezier = UIBezierPath()
        myBezier.moveToPoint(CGPoint(x: 0, y: y))
        myBezier.addQuadCurveToPoint(CGPoint(x: rect.width, y: y), controlPoint: CGPoint(x: rect.width / 2, y: curveTo))
        myBezier.addLineToPoint(CGPoint(x: rect.width, y: rect.height))
        myBezier.addLineToPoint(CGPoint(x: 0, y: rect.height))
        myBezier.closePath()
        let context = UIGraphicsGetCurrentContext()
        CGContextSetLineWidth(context, 4.0)
        UIColor.whiteColor().setFill()
        myBezier.fill()
    }
}

另一种方法是制作一个比屏幕大得多的白色视图......我猜的是屏幕宽度的3倍.然后只需将拐角半径设置为其宽度的一半即可.

Answer 2

有圆角的视图边缘：

在 UIViewController 的默认视图的情况下：

override func viewWillAppear(animated: Bool) {

    self.navigationController?.navigationBarHidden =  true

    //UIView Corner Radius
    self.view.layer.cornerRadius = 20.0;
    self.view.layer.masksToBounds = true

    //UIView Set up border
    self.view.layer.borderColor = UIColor.yellowColor().CGColor;
    self.view.layer.borderWidth = 3.0;        
}

如果是顶部状态栏：

将自定义视图作为顶部状态栏。

func addStatusBar()
{
    let statusBarView = UIView(frame: CGRect(x: 0.0, y: 0.0, width: UIScreen.mainScreen().bounds.size.width, height: 20.0))

    statusBarView.backgroundColor = UIColor.greenColor()

    //UIView Corner Radius
    statusBarView.layer.cornerRadius = 5.0;
    statusBarView.layer.masksToBounds = true

    //UIView Set up border
    statusBarView.layer.borderColor = UIColor.yellowColor().CGColor;
    statusBarView.layer.borderWidth = 3.0;

    self.navigationController?.navigationBarHidden =  true
    self.view.addSubview(statusBarView)
}

添加自定义状态栏查看：

override func viewWillAppear(animated: Bool) {
    self.addStatusBar()
}

要制作圆顶视图：

extension UIView {

    func addTopRoundedCornerToView(targetView:UIView?, desiredCurve:CGFloat?)
    {
        let offset:CGFloat =  targetView!.frame.width/desiredCurve!
        let bounds: CGRect = targetView!.bounds

        let rectBounds: CGRect = CGRectMake(bounds.origin.x, bounds.origin.y+bounds.size.height / 2, bounds.size.width, bounds.size.height / 2)

        let rectPath: UIBezierPath = UIBezierPath(rect: rectBounds)
        let ovalBounds: CGRect = CGRectMake(bounds.origin.x - offset / 2, bounds.origin.y, bounds.size.width + offset, bounds.size.height)
        let ovalPath: UIBezierPath = UIBezierPath(ovalInRect: ovalBounds)
        rectPath.appendPath(ovalPath)

        // Create the shape layer and set its path
        let maskLayer: CAShapeLayer = CAShapeLayer()
        maskLayer.frame = bounds
        maskLayer.path = rectPath.CGPath

        // Set the newly created shape layer as the mask for the view's layer
        targetView!.layer.mask = maskLayer
    }
}

用法：

override func viewWillAppear(animated: Bool) {
    self.navigationController?.navigationBarHidden =  true
    self.view.addTopRoundedCornerToView(self.view, desiredCurve: 0.6)
}