自定义导航栏不是矩形

Question

是否可以将导航栏自定义为如下图所示？很显然，这个透明背景不是灰色的。

我已经试过：

UINavigationBar.appearance().setBackgroundImage(UIImage(named:"pattern.png"), 
                  for: .default) 

这似乎捕捉到的颜色，但不是导航栏的格式。

我试图避免产生与一个UIView或任何类似的自定义导航栏，因为这将意味着很多额外的工作，这样一个小change.My应用程序有很多的使用意见导航控制器。

在此先感谢。

Answer 1

使用此Z形图案添加到您的导航栏（版本2），或者你可以用你想要的图案（VERSION1（喜爱））

使用UIImage的版本1和使用自创建自定义的UIImage .navigationController？.navigationBar。了setBackgroundImage方法

获取图像

import UIKit 

extension UIImage { 

    static func pathZigZagForCGRect(rect: CGRect) ->UIBezierPath 
    { 
     let width = rect.size.width 
     let height = rect.size.height 

     let zigZagWidth = CGFloat(7) 
     let zigZagHeight = CGFloat(5) 
     var yInitial = height-zigZagHeight 

     var zigZagPath = UIBezierPath() 
     zigZagPath.move(to: CGPoint(x:0, y:0)) 
     zigZagPath.addLine(to: CGPoint(x:0, y:yInitial)) 

     var slope = -1 
     var x = CGFloat(0) 
     var i = 0 
     while x < width { 
      x = zigZagWidth * CGFloat(i) 
      let p = zigZagHeight * CGFloat(slope) - 5 
      let y = yInitial + p 
      let point = CGPoint(x: x, y: y) 
      zigZagPath.addLine(to: point) 
      slope = slope*(-1) 
      i += 1 
     } 

     zigZagPath.addLine(to: CGPoint(x:width,y: 0)) 
     zigZagPath.addLine(to: CGPoint(x:0,y: 0)) 
     zigZagPath.close() 
     return zigZagPath 
    } 


    static func zigZagImage(rect: CGRect,color:UIColor)->UIImage { 

     UIGraphicsBeginImageContextWithOptions(rect.size, false, 0) 
     var ctx = UIGraphicsGetCurrentContext()! 
     ctx.clear(CGRect(x: 0, y: 0, width: rect.size.width, height: rect.size.height)) 

     ctx.setFillColor(color.cgColor) 
     let path = UIImage.pathZigZagForCGRect(rect: rect) 
     ctx.addPath(path.cgPath) 
     ctx.fillPath() 
     //draw triangle 

     let img = UIGraphicsGetImageFromCurrentImageContext()! 
     UIGraphicsEndImageContext() 

     return img 
    } 

} 

使用它

override func viewDidAppear(_ animated: Bool) { 
     super.viewDidAppear(animated) 
     self.navigationController?.navigationBar.setBackgroundImage(UIImage.zigZagImage(rect: CGRect(x: 0, y: 0, width: (self.navigationController?.navigationBar.frame.size.width)!, height: (self.navigationController?.navigationBar.frame.height)! + 20),color:UIColor.red).resizableImage(withCapInsets: UIEdgeInsets.zero, resizingMode: .stretch), for: .default) 
    } 

结果

第2版使用layerMask

func pathZigZagForView(givenView: UIView) ->UIBezierPath 
    { 
     let width = givenView.frame.size.width 
     let height = givenView.frame.size.height 

     let zigZagWidth = CGFloat(7) 
     let zigZagHeight = CGFloat(5) 
     var yInitial = height-zigZagHeight 

     var zigZagPath = UIBezierPath() 
     zigZagPath.move(to: CGPoint(x:0, y:0)) 
     zigZagPath.addLine(to: CGPoint(x:0, y:yInitial)) 

     var slope = -1 
     var x = CGFloat(0) 
     var i = 0 
     while x < width { 
      x = zigZagWidth * CGFloat(i) 
      let p = zigZagHeight * CGFloat(slope) - 5 
      let y = yInitial + p 
      let point = CGPoint(x: x, y: y) 
      zigZagPath.addLine(to: point) 
      slope = slope*(-1) 
      i += 1 
     } 

     zigZagPath.addLine(to: CGPoint(x:width,y: 0)) 
     zigZagPath.addLine(to: CGPoint(x:0,y: 0)) 
     zigZagPath.close() 
     return zigZagPath 
    } 

func applyZigZagEffect(givenView: UIView) { 
    let shapeLayer = CAShapeLayer(layer: givenView.layer) 
    shapeLayer.path = self.pathZigZagForView(givenView: givenView).cgPath 
    shapeLayer.frame = givenView.bounds 
    shapeLayer.masksToBounds = true 
    givenView.layer.mask = shapeLayer 
} 

使用它

override func viewDidAppear(_ animated: Bool) { 
     super.viewDidAppear(animated) 
     self.navigationController?.navigationBar.backgroundColor = UIColor.red 
     self.applyZigZagEffect(givenView: (self.navigationController?.navigationBar)!) 
    } 

希望这有助于你

Answer 2

我试图避免产生与一个UIView或 任何类似的自定义导航栏，因为这将意味着很多额外的工作 这样一个小change.My应用程序有使用导航了不少意见 控制器。

子类UINavigationController并执行包含在UINavigationBar之内的自定义视图。

然后在应用程序中的任何位置都有导航控制器，请将其类用自定义子类替换。

例如：

class MyCustomNavigationController: UINavigationController { 

    override func viewDidLoad() { 
     // ... code to implement custom view 
     // you may not necessarily want to put it in viewDidLoad... 
    } 

} 

这样，你只需要编写一次自定义视图代码。作为您的导航栏的自定义视图很可能是实现您的愿望的唯一方法。