2016-06-13 92 views
1

在Apple的自定义UINavigationBar的示例中,他们通过覆盖该栏的底部并重新创建其投影来演示扩展导航栏以获取其他功能的可能性。 https://developer.apple.com/library/ios/samplecode/NavBar/Introduction/Intro.html`UINavigationBar`弯曲扩展?

我期待这样做,但有一个弯曲的扩展名。换句话说,使整个UINavigationBar看起来像是一个大圈的一部分的半圆。 见附表:

design mockup

我已经想过可能这样做,到目前为止,唯一的办法就是让一个非常大的,但含有UIView与大圆角半径效仿这条曲线。我做了一个测试,但发现当UIView的尺寸超过一定的尺寸阈值/比例时,边缘开始变形,并且看起来非常糟糕,因为它具有大量但非常剪裁的效果并且效率低下。

由于器件尺寸变化和屏幕取向变化的需求,而不扭曲曲线被动画,有任何方法以可能产生这种弯曲UINavigationBar

+0

'UIBezierPath' ? – jtbandes

+0

http://stackoverflow.com/questions/25569210/uinavigationcontroller-with-custom-shape-navigation-bar这可能有助于 – iAnurag

+0

@iAuurag与背景图像,鉴于我提到的约束(处理旋转和各种屏幕尺寸动态)... –

回答

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) 

    } 
} 

结果:

enter image description here

的问题是,增加的pathLayer会涵盖导航栏标题和按钮的图层。因此,如果将pathLayer的fillColor设置为纯色以外的其他颜色,则这些按钮和标题将不可见。

要解决此问题,您可以添加标题和按钮编程为我做的pathLayer添加后,或使用insertSublayer插入按钮和标题背后的pathLayer在这篇文章中提到CALayer - Place sublayer below storyboard UIButtons?

+0

嗯,这是否必须在'UINavigationBar'范围内,但是? –

+0

不,它可能超出了'UINavigationBar'的范围 – luiyezheng