transparente Navigationsleiste ios

121

Ich erstelle eine App und habe im Internet gesurft. Ich frage mich, wie sie diese transparente Navigationsleiste wie folgt erstellen:

Geben Sie hier die Bildbeschreibung ein

Ich habe wie in meinem Appdelegate folgendes hinzugefügt:

UINavigationBar.appearance().translucent = true

aber das lässt es einfach so aussehen:

Geben Sie hier die Bildbeschreibung ein

Wie kann ich die Navigationsleiste wie das erste Bild transparent machen?

Peter Pik
quelle
Mit dem Code, den ich nicht kenne, aber wenn Sie gut mit CSS umgehen können, können Sie ein Framework (Pixate: freestyle.org ) verwenden und einfach einen CSS-Stil auf Ihre Navigationsleiste anwenden :)!
Nicolas Charvoz

Antworten:

286

Sie können das Navigationsleistenbild wie unten für Translucent anwenden.

Ziel c:

[self.navigationController.navigationBar setBackgroundImage:[UIImage new]
                     forBarMetrics:UIBarMetricsDefault]; //UIImageNamed:@"transparent.png"
self.navigationController.navigationBar.shadowImage = [UIImage new];////UIImageNamed:@"transparent.png"
self.navigationController.navigationBar.translucent = YES;
self.navigationController.view.backgroundColor = [UIColor clearColor];

Swift 3:

self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default) //UIImage.init(named: "transparent.png")
self.navigationController?.navigationBar.shadowImage = UIImage()
self.navigationController?.navigationBar.isTranslucent = true
self.navigationController?.view.backgroundColor = .clear

Hoffe es hilft dir ..!

Vidhyanand
quelle
4
Wenn ichBackgroundImage setze, wird die barTintColor entfernt.
Peter Pik
Sie können ein Bild der Navigationsleiste erhalten. Je nach Bedarf. Und wie oben auf die Navigationsleiste anwenden. (Bild, das Sie auf die Navigationsleiste anwenden möchten.)
Vidhyanand
1
Das Einstellen der Hintergrundfarbe des Navigationscontrollers ist nicht erforderlich
Matt Bezark
4
Mit dieser Lösung bekomme ich eine schwarze Navigationsleiste, irgendwelche Ideen?
Carlos del Blanco
1
Nicht wie erwartet. Wenn Sie dies tun, wird die Wand nicht wie bei einem Alpha von 0,7 rechts durchscheinend sein, und PLUS deckt auch die Statusleiste ab. Wenn Sie dies unter iOS 13 tun, haben Sie nur ein Rechteck mit einem guten Aussehen und darüber THE STATUS BAR CRYSTAL CLEAR. was der Autor der Frage klar und spezifisch ist.
Marlhex
122

Schnelle Lösung

Dies ist der beste Weg, den ich gefunden habe. Sie können es einfach in die didFinishLaunchingWithOptions Methode Ihres appDelegate einfügen :

Schnelles 3/4

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
    // Override point for customization after application launch.
    // Sets background to a blank/empty image
    UINavigationBar.appearance().setBackgroundImage(UIImage(), for: .default)
    // Sets shadow (line below the bar) to a blank image
    UINavigationBar.appearance().shadowImage = UIImage()
    // Sets the translucent background color
    UINavigationBar.appearance().backgroundColor = .clear
    // Set translucent. (Default value is already true, so this can be removed if desired.)
    UINavigationBar.appearance().isTranslucent = true
    return true
}

Swift 2.0

func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
    // Override point for customization after application launch.
    // Sets background to a blank/empty image
    UINavigationBar.appearance().setBackgroundImage(UIImage(), forBarMetrics: .Default)
    // Sets shadow (line below the bar) to a blank image
    UINavigationBar.appearance().shadowImage = UIImage()
    // Sets the translucent background color
    UINavigationBar.appearance().backgroundColor = UIColor(red: 0.0, green: 0.0, blue: 0.0, alpha: 0.0)
    // Set translucent. (Default value is already true, so this can be removed if desired.)
    UINavigationBar.appearance().translucent = true

    return true
}

Quelle: Machen Sie die Navigationsleiste in Bezug auf das folgende Bild in iOS 8.1 transparent

Dan Beaulieu
quelle
3
Ihre Swift 3-Lösung macht meinen Balken einfach weiß.
Jose Ramirez
@JozemiteApps versuchen, ein brandneues Xcode-Projekt zu erstellen und den Code einzufügen. Es sollte nur 3 Minuten dauern, um zu bestätigen, ob mein obiger Code oder etwas an Ihrem Projekt dies verursacht.
Dan Beaulieu
1
Ich habe auch eine einfache weiße Navibar und keine transparente Navibar
Kingalione
Das funktioniert super, danke! Wissen Sie, wie Sie es so implementieren können, dass nur die Navigationsleisten auf den gewünschten ViewControllern transparent sind?
RufusV
@JoseRamirez Es ist wahrscheinlich der Hintergrund des viewControllers, den Sie sehen. Sie müssen die obere Einschränkung der ersten Ansicht ändern, um sie an der Übersicht und nicht am sicheren Bereich oder Rand auszurichten.
Turing getestet
25

Swift 5 gilt nur für den aktuellen Ansichts-Controller

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)

    // Make the navigation bar background clear
    navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
    navigationController?.navigationBar.shadowImage = UIImage()
    navigationController?.navigationBar.isTranslucent = true
}

override func viewWillDisappear(_ animated: Bool) {
    super.viewWillDisappear(animated)

    // Restore the navigation bar to default
    navigationController?.navigationBar.setBackgroundImage(nil, for: .default)
    navigationController?.navigationBar.shadowImage = nil
}
Chris Chute
quelle
13

Swift 3: Erweiterung für transparente Navigationsleiste

extension UINavigationBar {
    func transparentNavigationBar() {
    self.setBackgroundImage(UIImage(), for: .default)
    self.shadowImage = UIImage()
    self.isTranslucent = true
    }
}
Ankit Kumar Gupta
quelle
12

Swift 4.2 Lösung: Für transparenten Hintergrund:

  1. Für den allgemeinen Ansatz:

    override func viewDidLoad() {
        super.viewDidLoad()
    
        self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: UIBarMetrics.default)
        self.navigationController?.navigationBar.shadowImage = UIImage()
        self.navigationController?.navigationBar.isTranslucent = true
    
    }
  2. Für ein bestimmtes Objekt:

    override func viewDidLoad() {
        super.viewDidLoad()
    
        navBar.setBackgroundImage(UIImage(), for: UIBarMetrics.default)
        navBar.shadowImage = UIImage()
        navBar.navigationBar.isTranslucent = true
    
    }

Hoffe es ist nützlich.

Ümañg ßürmån
quelle
Mit welchem ​​Objekt beziehen Sie sich navBar?
Sergey Gamayunov
@SergeyGamayunov navBarbezieht sich hier auf das Objekt von UINavigationBar.
Ümañg ßürmån
Das ist es, was er meint ... lass navBar = self.navigationController? .NavigationBar
Marlhex
8

Dies konnte ich schnell erreichen:

let navBarAppearance = UINavigationBar.appearance()
let colorImage = UIImage.imageFromColor(UIColor.morselPink(), frame: CGRectMake(0, 0, 340, 64))
navBarAppearance.setBackgroundImage(colorImage, forBarMetrics: .Default)

wo ich die folgende Dienstprogrammmethode in einer UIColorKategorie erstellt habe:

imageFromColor(color: UIColor, frame: CGRect) -> UIImage {
  UIGraphicsBeginImageContextWithOptions(frame.size, false, 0)
  color.setFill()
  UIRectFill(frame)
  let image = UIGraphicsGetImageFromCurrentImageContext()
  UIGraphicsEndImageContext()
  return image
}
Julian B.
quelle
Dies sollte die beste Antwort sein!
Mihail Salari
7

Was es für mich funktioniert hat:

    let bar:UINavigationBar! =  self.navigationController?.navigationBar
    self.title = "Whatever..."
    bar.setBackgroundImage(UIImage(), forBarMetrics: UIBarMetrics.Default)
    bar.shadowImage = UIImage()
    bar.alpha = 0.0 
Javier Calatrava Llavería
quelle
5

Legen Sie die Hintergrundeigenschaft Ihrer Navigationsleiste fest, z

navigationController?.navigationBar.backgroundColor = UIColor(red: 1.0, green: 0.0, blue: 0.0, alpha: 0.5)

(Möglicherweise müssen Sie dies ein wenig ändern, wenn Sie keinen Navigationscontroller haben, aber das sollte Ihnen eine Vorstellung davon geben, was zu tun ist.)

Stellen Sie außerdem sicher, dass sich die Ansicht unten tatsächlich unter der Leiste erstreckt.

Atomix
quelle
Dies gibt mir Folgendes: i.stack.imgur.com/GT3WV.png Wie kann ich ein bisschen roter machen als der erste Link (Bild), den ich gepostet habe
Peter Pik
Sie können mit dem Alpha-Wert spielen und ihn von 0,5 auf einen Wert zwischen 0,0 und 1,0 ändern. Und wie gesagt, stellen Sie sicher, dass die Ansicht unten unter der Navigationsleiste angezeigt wird, da sonst kein Inhalt durch die Leiste scheint. Wenn Sie Interface Builder verwenden, können Sie den oberen Rand dieser Ansicht an den oberen Rand des Bildschirms ziehen und ausrichten.
Atomix
2

Versuchen Sie dies, es funktioniert für mich, wenn Sie auch ios7 unterstützen müssen, es basiert auf der Transparenz von UItoolBar:

[self.navigationController.navigationBar setBackgroundImage:[UIImage new]
                                                  forBarMetrics:UIBarMetricsDefault];
    self.navigationController.navigationBar.shadowImage = [UIImage new];
    self.navigationController.navigationBar.translucent = YES;
    self.navigationController.view.backgroundColor = [UIColor clearColor];
    UIToolbar* blurredView = [[UIToolbar alloc] initWithFrame:self.navigationController.navigationBar.bounds];
    [blurredView setBarStyle:UIBarStyleBlack];
    [blurredView setBarTintColor:[UIColor redColor]];
    [self.navigationController.navigationBar insertSubview:blurredView atIndex:0];
EmilDo
quelle
2

Für diejenigen, die nach einer OBJC-Lösung suchen, die in der App Delegate didFinishLaunchingWithOptions-Methode hinzugefügt werden soll:

[[UINavigationBar appearance] setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
[UINavigationBar appearance].shadowImage = [UIImage new];
[UINavigationBar appearance].backgroundColor = [UIColor clearColor];
[UINavigationBar appearance].translucent = YES;
david72
quelle
1

Wenn Sie dies in Swift 4 programmgesteuert tun möchten, während Sie in derselben Ansicht bleiben,

if change {
        navigationController?.navigationBar.isTranslucent = false
        self.navigationController?.navigationBar.backgroundColor = UIColor(displayP3Red: 255/255, green: 206/255, blue: 24/255, alpha: 1)
        navigationController?.navigationBar.barTintColor = UIColor(displayP3Red: 255/255, green: 206/255, blue: 24/255, alpha: 1)
    } else {
        navigationController?.navigationBar.isTranslucent = true
        navigationController?.navigationBar.setBackgroundImage(backgroundImage, for: .default)
        navigationController?.navigationBar.backgroundColor = .clear
        navigationController?.navigationBar.barTintColor = .clear
    }

Eine wichtige Sache, an die Sie sich erinnern sollten, ist das Klicken auf diese Schaltfläche in Ihrem Storyboard. Ich hatte lange Zeit ein Problem mit einem Springdisplay. Stellen Sie sicher, dass Sie Folgendes einstellen:Geben Sie hier die Bildbeschreibung ein

Wenn Sie dann die Transluzenz der Navigationsleiste ändern, springen die Ansichten nicht, da sich die Ansichten unabhängig von der Sichtbarkeit der Navigationsleiste ganz nach oben erstrecken.

paul_f
quelle
1

Fügen Sie dies zu Ihrer Did Load hinzu

self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
self.navigationController?.navigationBar.shadowImage = UIImage()
self.navigationController?.navigationBar.backgroundColor = UIColor(red: 1, green: 1, blue: 1, alpha: 0.0)
//adjust alpha according to your need 0 is transparent 1 is solid
Abhishek Maurya
quelle
0

Dienstprogrammmethode, die Sie aufrufen, indem Sie den Navigationscontroller und die Farbe übergeben, die Sie in der Navigationsleiste festlegen möchten. Für transparent können Sie verwendenclearColor derUIColor Klasse.

Für das Ziel c -

+ (void)setNavigationBarColor:(UINavigationController *)navigationController 
                               color:(UIColor*) color {
   [navigationController setNavigationBarHidden:false animated:false];
   [navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
   [navigationController.navigationBar setShadowImage:[UIImage new]];
   [navigationController.navigationBar setTranslucent:true];
   [navigationController.view setBackgroundColor:color];
   [navigationController.navigationBar setBackgroundColor:color];
}

Für Swift 3.0 -

class func setNavigationBarColor(navigationController : UINavigationController?, 
                                 color : UIColor) {
    navigationController?.setNavigationBarHidden(false, animated: false)
    navigationController?.navigationBar .setBackgroundImage(UIImage(), forBarMetrics: UIBarMetrics.Default)
    navigationController?.navigationBar.shadowImage = UIImage()
    navigationController?.navigationBar.translucent = true
    navigationController?.view.backgroundColor = color
    navigationController?.navigationBar.backgroundColor =  color
}
Rahul
quelle
0

Ich hatte daran gearbeitet und hatte ein Problem mit den Antworten, die hier von verschiedenen Benutzern bereitgestellt wurden. Problem war eine weiße Box hinter meinem transparenten NavigationBar-Bild unter iOS 13+

Geben Sie hier die Bildbeschreibung ein

Meine Lösung ist diese

if #available(iOS 13, *) {
    navBar?.standardAppearance.backgroundColor = UIColor.clear
    navBar?.standardAppearance.backgroundEffect = nil
    navBar?.standardAppearance.shadowImage = UIImage()
    navBar?.standardAppearance.shadowColor = .clear
    navBar?.standardAppearance.backgroundImage = UIImage()
}

Hoffe das hilft jedem mit dem gleichen Problem

Reinier Melian
quelle