如何在Swift中使UIViewController的顶部弯曲？

Question

如何在Swift中使UIViewController的顶部弯曲？

xcodeswiftuiviewcontroller

7

我正在尝试使用Swift曲线化UIViewController的顶部。

我希望它像照片中所示一样弯曲。

- Doughnut Man

1

问题不太清楚。您是想将UIViewController的UIView曲线化吗？ - Alvin George

2个回答

6

如何实现 View 的圆角边缘：

对于 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)
}

- Alvin George

这段代码怎么可能“只曲线顶部”呢？你所做的只是添加了一个小的圆角，而且甚至不是问题中示例图像的一部分。 - Moriya

我已经更新了我的答案，为视图添加了精确的圆角。感谢您的通知。 - Alvin George

@AlvinGeorge 我想在那个顶部曲线上添加一个边框。我尝试使用CAShapeLayer()作为边框，但效果不如预期。你能否提供建议？ - Mitesh Dobareeya

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Moriya · Accepted Answer

如果您想要重现示例底部的效果，您可以使用一些贝塞尔曲线来绘制背景，这应该不会太难。这里有一个自定义视图供您使用。它仅覆盖了绘图部分，并使用具有圆形顶部的贝塞尔路径作为其背景。

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

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()
    }
}

另一种方法是创建一个比屏幕大得多的白色视图。我猜测它应该是屏幕宽度的三倍。然后将其角半径设置为其宽度的一半，使其变成圆形。