ios - `UINavigationBar` 弯曲扩展？

Question

在 Apple 的自定义 UINavigationBar 示例中，它们演示了通过覆盖导航栏底部并重新创建其投影来扩展导航栏以获得附加功能的可能性。 https://developer.apple.com/library/ios/samplecode/NavBar/Introduction/Intro.html

我想做这个，但有一个弯曲的延伸。换句话说，一个半圆使整个 UINavigationBar 看起来像是一个大圆的一部分。 见附件:

到目前为止，我考虑过可能这样做的唯一方法是制作一个非常大但包含的 UIView 并具有较大的圆角半径来模拟此曲线。我做了一个测试，但发现当 UIView 的大小超过某个大小阈值/比例时，边缘开始扭曲并且看起来很糟糕，因为它是低效的而且奇怪的是有一个巨大但剪裁 UIView。

由于设备尺寸各不相同，并且需要在不扭曲曲线的情况下对屏幕方向变化进行动画处理，是否有任何方法可以生成这种弯曲的UINavigationBar？ p>

Answer 1

我目前唯一的方法是子类化 UINavigationBar 并使用 CAShapeLayer 绘制您想要的形状:

import UIKit

class CustomNavigationBar: UINavigationBar {

    var pathLayer: CAShapeLayer?

    init() {
        super.init(frame: CGRectZero)

        setup()
    }

    override init(frame: CGRect) {
        super.init(frame: frame)

        setup()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)

        setup()
    }

    override func drawRect(rect: CGRect) {

        super.drawRect(rect)
    }

    func setup() {
        var bezierPath = UIBezierPath()
        bezierPath.moveToPoint(CGPointMake(0.0, 31.47))
        bezierPath.addCurveToPoint(CGPointMake(186.72, 42.5), controlPoint1: CGPointMake(0.5, 31.47), controlPoint2: CGPointMake(93.22, 42.5))
        bezierPath.addCurveToPoint(CGPointMake(375, 31.47), controlPoint1: CGPointMake(280.22, 42.5), controlPoint2: CGPointMake(375, 31.47))
        bezierPath.addLineToPoint(CGPointMake(375, -0.5))
        bezierPath.addLineToPoint(CGPointMake(0.5, -0.5))
        bezierPath.addLineToPoint(CGPointMake(0.0, 31.47))
        UIColor.blackColor().setStroke()
        bezierPath.lineWidth = 1
        bezierPath.stroke()

        pathLayer = CAShapeLayer()
        pathLayer?.fillColor = UIColor.lightGrayColor().CGColor
        pathLayer?.path = bezierPath.CGPath
        pathLayer?.lineWidth = 1.0
        pathLayer?.strokeColor = UIColor.blackColor().CGColor
        layer.addSublayer(pathLayer!)

        let title = UILabel(frame: CGRect(x: 0, y: 0, width: 60, height: 30))
        title.text = "Title"
        title.textAlignment = .Center
        title.center = self.center
        addSubview(title)

    }
}

结果:

问题是添加的 pathLayer 会覆盖导航栏标题和按钮的图层。因此，如果将 pathLayer 的 fillColor 设置为非透明颜色，这些按钮和标题将不可见。

要解决此问题，您可以像我一样在添加 pathLayer 之后以编程方式添加标题和按钮，或者使用 insertSublayer 插入 pathLayer 在这篇文章中提到的按钮和标题后面 CALayer - Place sublayer below storyboard UIButtons?