Benutzerdefinierte Navigationsleiste nicht rechteckig

Question

Ist es möglich, die Navigationsleiste so anzupassen, dass sie wie in der Abbildung unten aussieht? Offensichtlich hat das einen transparenten Hintergrund und keinen grauen Hintergrund.

Ich habe versucht:

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

, dass die Farbe zu erfassen scheint aber nicht das Format der Navigationsleiste.

ich so eine benutzerdefinierte Navigationsleiste mit einem UIView oder allem zu vermeiden, versuchen zu schaffen, weil das eine Menge zusätzlicher Arbeit für ein so kleines change.My App bedeuten würde, hat viele Ansichten einer Verwendung Navigationssteuerung.

Vielen Dank im Voraus.

Answer 1

verwendet das Zick-Zack-Muster auf Ihre navigationbar (version2) hinzufügen, oder Sie können eine benutzerdefinierte UIImage mit dem gewünschten Muster (version1 (Favoriten))

Version 1 mit UIImage und mit selbst erstellen .navigationController? .navigationBar.setBackgroundImage Methode

Erste das Bild

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 
    } 

} 

Mit ihm

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

Ergebnis

Version 2 Ebenenmaske mit

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 
} 

es

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

Hoffnung, dies hilft Ihnen

Answer 2

Ich versuche, mit einem UIView oder etwas wie das Erstellen einer benutzerdefinierten Navigationsleiste zu vermeiden, weil das eine Menge zusätzlicher Arbeit für so eine kleine change.My App viele Ansichten hat mit einer Navigation bedeuten würde Controller.

Subclass UINavigationController und implementieren die benutzerdefinierte Ansicht auf dem UINavigationBar darin enthaltenen.

Überall dort, wo Sie einen Navigationscontroller in der App haben, ersetzen Sie seine Klasse durch die benutzerdefinierte Unterklasse.

Zum Beispiel:

class MyCustomNavigationController: UINavigationController { 

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

} 

diese Weise können Sie nur einmal die benutzerdefinierte Ansicht Code zu schreiben. Eine benutzerdefinierte Ansicht als Navigationsleiste ist wahrscheinlich die einzige Möglichkeit, um das zu erreichen, was Sie wünschen.