2016-06-13 94 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