Machen Sie UINavigationBar transparent


Antworten:


635

Wenn sich jemand fragt, wie dies in iOS 7+ erreicht werden kann, finden Sie hier eine Lösung (auch iOS 6-kompatibel).

In Ziel-C

[self.navigationBar setBackgroundImage:[UIImage new]
                         forBarMetrics:UIBarMetricsDefault];
self.navigationBar.shadowImage = [UIImage new];
self.navigationBar.translucent = YES;

In Swift 3 (iOS 10)

self.navigationBar.setBackgroundImage(UIImage(), for: .default)
self.navigationBar.shadowImage = UIImage()
self.navigationBar.isTranslucent = true

In schneller 2

self.navigationBar.setBackgroundImage(UIImage(), forBarMetrics: .Default)
self.navigationBar.shadowImage = UIImage()
self.navigationBar.translucent = true

Diskussion

Die Einstellung translucentin YESder Navigationsleiste reicht aufgrund eines in der UINavigationBarDokumentation beschriebenen Verhaltens aus . Ich werde hier das relevante Fragment melden:

Wenn Sie diese Eigenschaft in YESeiner Navigationsleiste mit einem undurchsichtigen benutzerdefinierten Hintergrundbild festlegen , wendet die Navigationsleiste eine Systemopazität von weniger als 1,0 auf das Bild an.


29
Beantwortung meines eigenen Kommentars hier; Um den Affekt rückgängig zu machen, versuchen Sie:[self.navigationController.navigationBar setBackgroundImage:nil forBarMetrics:UIBarMetricsDefault]; self.navigationController.navigationBar.shadowImage = nil; self.navigationController.navigationBar.translucent = NO;
Johann Burgess

Ich brauche nur einen VC, um eine transparente Navigationsleiste zu haben. Wie kann ich nach dem Beenden dieser VC zum ursprünglichen Stil zurückkehren?
Guilherme

2
Um dies in Swift aus einem ViewController heraus zu erreichen, gehen Sie folgendermaßen vor: self.navigationController?.navigationBar.setBackgroundImage(UIImage(), forBarMetrics: UIBarMetrics.Default) self.navigationController?.navigationBar.shadowImage = UIImage() self.navigationController?.navigationBar.translucent = true
datayeah

Funktioniert auch mit Aussehen (iOS7 / 8), siehe: gist.github.com/mpycio/ddbdea1adb6b86cf02f6
Mahakala

1
Das Rückgängigmachen des Effekts funktioniert für mich nur teilweise. Denn nachdem ich das getan habe, haben meine Tabellenansichten alle zu große Header. App-weit, was komisch ist. (Ich möchte diesen Effekt nur für einen Controller, den ich auf den Stapel schiebe.)
Henning

29

In iOS5 können Sie dies tun, um die Navigationsleiste transparent zu machen:

nav.navigationBar.translucent = YES; // Setting this slides the view up, underneath the nav bar (otherwise it'll appear black)
const float colorMask[6] = {222, 255, 222, 255, 222, 255};
UIImage *img = [[UIImage alloc] init];
UIImage *maskedImage = [UIImage imageWithCGImage: CGImageCreateWithMaskingColors(img.CGImage, colorMask)];

[nav.navigationBar setBackgroundImage:maskedImage forBarMetrics:UIBarMetricsDefault]; 
[img release];

6
In iOS 6 möchten Sie auch den Schatten der Navigationsleiste entfernen, da er sonst seltsam aussieht. [[UINavigationBar appearance] setShadowImage: [[UIImage alloc] init]];
Robert

23

Von IOS7:

self.navigationController.navigationBar.translucent = YES;
self.navigationController.navigationBar.shadowImage = [UIImage new];
self.navigationController.view.backgroundColor = [UIColor clearColor];
[self.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
self.navigationController.navigationBar.backgroundColor = [UIColor clearColor];

14

Für alle, die dies in Swift 2.x tun möchten:

self.navigationController?.navigationBar.setBackgroundImage(UIImage(), forBarMetrics: .Default)
self.navigationController?.navigationBar.shadowImage = UIImage()
self.navigationController?.navigationBar.translucent = true

oder Swift 3.x:

self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
self.navigationController?.navigationBar.shadowImage = UIImage()
self.navigationController?.navigationBar.isTranslucent = true

2
navigationController ist eine optionale Eigenschaft, die Sie entpacken müssen. Fügen Sie einfach self.navigationController? .NavigationBar hinzu und Sie können
loslegen

10

Das scheint zu funktionieren:

@implementation UINavigationBar (custom)
- (void)drawRect:(CGRect)rect {}
@end

navigationController.navigationBar.backgroundColor = [UIColor clearColor];

6
In iOS 5 müssen Sie anscheinend -drawRect:eine Unterklasse überschreiben , nicht eine Kategorie, und diese Unterklasse dann als Navigationsleiste verwenden.
Yang Meyer

9

Nachdem Sie das getan haben, was alle anderen oben gesagt haben, dh:

navigationController?.navigationBar.setBackgroundImage(UIImage(), forBarMetrics: .default)
navigationController?.navigationBar.shadowImage = UIImage()
navigationController!.navigationBar.isTranslucent = true

... meine Navigationsleiste war noch weiß . Also habe ich diese Zeile hinzugefügt:

navigationController?.navigationBar.backgroundColor = .clear

... et voila! Das schien den Trick zu tun.


7

Wenn Sie mit der neuesten Beta-Version von iOS 13.4 und XCode 11.4 erstellen, funktioniert die akzeptierte Antwort nicht mehr. Ich habe einen anderen Weg gefunden, vielleicht ist es nur ein Fehler in der Beta-Software, aber ich schreibe ihn dort auf, nur für den Fall

(schnell 5)

import UIKit

class TransparentNavBar :UINavigationBar {
    override func awakeFromNib() {
        super.awakeFromNib()
        self.setBackgroundImage(UIImage(), for: .default)
        self.shadowImage = UIImage()
        self.isTranslucent = true
        self.backgroundColor = .clear
        if #available(iOS 13.0, *) {
            self.standardAppearance.backgroundColor = .clear
            self.standardAppearance.backgroundEffect = .none
            self.standardAppearance.shadowColor = .clear
        }
    }
}

Genial! War nur auf der Suche nach einem Fix! Funktioniert super! Vielen Dank!
Georg

5

Ich weiß, dass dieses Thema alt ist, aber wenn die Leute wissen wollen, wie es gemacht wird, ohne die drawRect-Methode zu überladen.

Das brauchen Sie:

self.navigationController.navigationBar.translucent = YES;
self.navigationController.navigationBar.opaque = YES;
self.navigationController.navigationBar.tintColor = [UIColor clearColor];
self.navigationController.navigationBar.backgroundColor = [UIColor clearColor];

1
Es tut mir leid, das ist nicht richtig. Sie müssen noch die drawRect-Methode überschreiben
Sander

Warum ist das falsch? Es scheint in IOS 6 sim zu funktionieren. Es funktioniert nicht in IOS 5? navigationBar.backgroundColor scheint nicht dokumentiert zu sein.
Cristi

5

Der folgende Code erweitert die obere Antwort, die für diesen Thread ausgewählt wurde, um den unteren Rand zu entfernen und die Textfarbe festzulegen:

  1. Die letzten beiden codierten Zeilen dieses Codes legen die Transparenz fest. Ich habe diesen Code aus diesem Thread ausgeliehen und er hat perfekt funktioniert!

  2. Die "clipsToBounds" -Eigenschaft war Code, den ich gefunden habe und der die untere Grenzlinie mit ODER ohne eingestellte Transparenz entfernt hat (wenn Sie sich also stattdessen für einen durchgehenden weißen / schwarzen / etc. Hintergrund entscheiden, gibt es immer noch keine Grenzlinie).

  3. Die Zeile "tintColor" (2. codierte Zeile) setzt meinen Zurück-Knopf auf hellgrau

  4. Ich habe barTintColor als Backup behalten. Ich weiß nicht, warum Transparenz nicht funktionieren würde, aber wenn nicht, möchte ich, dass mein BG weiß ist, wie ich es früher hatte

    let navigationBarAppearace = UINavigationBar.appearance()
    navigationBarAppearace.tintColor = UIColor.lightGray
    navigationBarAppearace.barTintColor = UIColor.white
    navigationBarAppearace.clipsToBounds = true
    navigationBarAppearace.isTranslucent = true
    navigationBarAppearace.setBackgroundImage(UIImage(), for: .default)
    navigationBarAppearace.shadowImage = UIImage()

3

für Swift 3.0:

override func viewDidLoad() {
    super.viewDidLoad()

    navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
    navigationController?.navigationBar.shadowImage = UIImage()
    navigationController?.navigationBar.isTranslucent = true
}

3

C # / Xamarin-Lösung

NavigationController.NavigationBar.SetBackgroundImage(new UIImage(), UIBarMetrics.Default);
NavigationController.NavigationBar.ShadowImage = new UIImage();
NavigationController.NavigationBar.Translucent = true;

2

Versuchen Sie den folgenden Code:

self.navigationController.navigationBar.translucent = YES;

1

Eine andere Möglichkeit, die für mich funktioniert hat, besteht darin, UINavigationBar zu unterklassifizieren und die drawRect-Methode leer zu lassen !!

@IBDesignable class MONavigationBar: UINavigationBar {


// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
override func drawRect(rect: CGRect) {
    // Drawing code
}}

1

In Swift 4.2

self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
self.navigationController?.navigationBar.shadowImage = UIImage()
self.navigationController?.navigationBar.isTranslucent = true

(in viewWillAppear) und dann in viewWillDisappear, um es rückgängig zu machen, setzen

self.navigationController?.navigationBar.shadowImage = nil
self.navigationController?.navigationBar.isTranslucent = false

0

Meinen Sie damit völlig transparent oder verwenden Sie den durchscheinend-schwarzen Stil, der in der Foto-App angezeigt wird? Letzteres können Sie erreichen, indem Sie seine barStyleEigenschaft auf setzen UIBarStyleBlackTranslucent. Ersteres ... da bin ich mir nicht sicher. Wenn Sie möchten, dass die darauf befindlichen Elemente weiterhin sichtbar sind, müssen Sie möglicherweise in der Ansichtshierarchie der Leiste herumgraben und die Ansicht mit dem Hintergrund entfernen.


2
Ich meine das erstere. Ich habe versucht, eine Kategorie zu erstellen und die drawRect-Methode von UINavigationBar (Aufruf von CGContextClearRect) zu überschreiben, aber dadurch wurde sie vollständig schwarz. Die Gegenstände waren jedoch immer noch sichtbar.
Quano

0

Dies funktioniert für Swift 2.0.

navigationController!.navigationBar.setBackgroundImage(UIImage(), forBarMetrics: UIBarMetrics.Default)
navigationController!.navigationBar.shadowImage = UIImage()
navigationController!.navigationBar.translucent = true

0

Überprüfen Sie RRViewControllerExtension , das sich mit der Verwaltung des Erscheinungsbilds von UINavigation-Leisten befasst.

Mit RRViewControllerExtension in Ihrem Projekt müssen Sie nur überschreiben

-(BOOL)prefersNavigationBarTransparent;

in dir viewcontroller.

Navigationsleiste transparent


-2
extension UINavigationBar {
var isTransperent: Bool {
        get {
            return false // Just to satisfy property
        }
        set {
            if newValue == true {
                self.shadowImage   = UIImage()
                self.isTranslucent = true
                self.setBackgroundImage(UIImage(), for: .default)
            }else{
                self.shadowImage   = UIImage()
                self.isTranslucent = false
                self.setBackgroundImage(nil, for: .default)
            }
        }
    }
}
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.