Uczyń UINavigationBar przejrzystym

Odpowiedzi:

635

Jeśli ktoś zastanawia się, jak to osiągnąć w iOS 7+, oto rozwiązanie (kompatybilne także z iOS 6)

W celu C

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

W swift 3 (iOS 10)

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

W szybkim 2

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

Dyskusja

Ustawianie translucentsię YESna pasku nawigacyjnym załatwia sprawę, ze względu na zachowanie omówione w UINavigationBardokumentacji. Podam tutaj odpowiedni fragment:

Jeśli ustawisz tę właściwość YESna pasku nawigacji z nieprzezroczystym niestandardowym obrazem tła, pasek nawigacji zastosuje do obrazu nieprzezroczystość systemową mniejszą niż 1,0.

Gabriele Petronella
źródło
29
Odpowiadając na mój własny komentarz tutaj; aby cofnąć afekt, spróbuj:[self.navigationController.navigationBar setBackgroundImage:nil forBarMetrics:UIBarMetricsDefault]; self.navigationController.navigationBar.shadowImage = nil; self.navigationController.navigationBar.translucent = NO;
Johann Burgess
Potrzebuję tylko jednego VC, aby mieć przezroczysty pasek nawigacyjny. Jak powrócić do oryginalnego stylu po wyjściu z tego VC?
Guilherme,
2
aby to osiągnąć w Swift z poziomu ViewController, zrób to tak: self.navigationController?.navigationBar.setBackgroundImage(UIImage(), forBarMetrics: UIBarMetrics.Default) self.navigationController?.navigationBar.shadowImage = UIImage() self.navigationController?.navigationBar.translucent = true
datayeah
Działa również przy użyciu wyglądu (iOS7 / 8), patrz: gist.github.com/mpycio/ddbdea1adb6b86cf02f6
Mahakala
1
Cofnięcie efektu dla mnie działa tylko częściowo. Ponieważ po wykonaniu tej czynności wszystkie moje widoki tabeli mają zbyt duże nagłówki. Działa w całej aplikacji, co jest dziwne. (Chcę ten efekt tylko dla jednego kontrolera, który wkładam na stos.)
Henning
29

W iOS5 możesz to zrobić, aby pasek nawigacji był przezroczysty:

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];
Alex Stanciu
źródło
6
W iOS 6 będziesz również chciał usunąć cień paska nawigacji, w przeciwnym razie będzie wyglądał dziwnie. [[UINavigationBar appearance] setShadowImage: [[UIImage alloc] init]];
Robert
23

Z 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];
Damien Romito
źródło
14

Dla każdego, kto chce to zrobić w Swift 2.x:

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

lub Swift 3.x:

self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
self.navigationController?.navigationBar.shadowImage = UIImage()
self.navigationController?.navigationBar.isTranslucent = true
fulvio
źródło
2
navigationController to opcjonalna właściwość, więc musisz ją rozpakować. Po prostu dodaj self.navigationController? .NavigationBar i możesz zacząć
Daniel Galasko
10

To wydaje się działać:

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

navigationController.navigationBar.backgroundColor = [UIColor clearColor];
quano
źródło
6
Wygląda na to, że w iOS 5 musisz zastąpić -drawRect:właściwą podklasę, a nie kategorię, a następnie użyć tej podklasy jako paska nawigacji.
Yang Meyer,
9

Po wykonaniu tego, co wszyscy inni powiedzieli powyżej, tj .:

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

... mój pasek nawigacyjny był nadal biały . Więc dodałem ten wiersz:

navigationController?.navigationBar.backgroundColor = .clear

... zrobione! To chyba załatwiło sprawę.

Clay Ellis
źródło
7

Jeśli budujesz z najnowszą wersją beta iOS 13.4 i XCode 11.4, zaakceptowana odpowiedź nie będzie działać. Znalazłem inny sposób, może to tylko błąd w oprogramowaniu beta, ale na wszelki wypadek zapisuję to tutaj

(szybki 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
        }
    }
}
Picci
źródło
Niesamowite! Właśnie szukałem poprawki! Działa świetnie! Dzięki!
Georg,
5

Wiem, że ten temat jest stary, ale jeśli ludzie chcą wiedzieć, jak to zrobić bez przeciążania metody drawRect.

Oto, czego potrzebujesz:

self.navigationController.navigationBar.translucent = YES;
self.navigationController.navigationBar.opaque = YES;
self.navigationController.navigationBar.tintColor = [UIColor clearColor];
self.navigationController.navigationBar.backgroundColor = [UIColor clearColor];
Szlifierka
źródło
1
Przepraszam, to nie jest poprawne. Nadal musisz zastąpić metodę drawRect
Sander
Dlaczego to źle? Wygląda na to, że działa w SIM IOS 6. To nie działa w IOS 5? navigationBar.backgroundColor wydaje się być nieudokumentowany.
Cristi,
5

Poniższy kod rozwija się przy górnej odpowiedzi wybranej dla tego wątku, aby pozbyć się dolnej granicy i ustawić kolor tekstu:

  1. Ostatnie dwa zakodowane wiersze tego kodu ustawiają przezroczystość. Pożyczyłem ten kod z tego wątku i działał idealnie!

  2. Znalazłem kod „clipsToBounds”, który pozbył się dolnej linii granicznej z OR bez ustawionego przezroczystości (więc jeśli zdecydujesz się zamiast tego na stałe białe / czarne / itp. Tło, nadal nie będzie linii granicznej).

  3. Linia „tintColor” (druga linia kodowana) ustawiła mój przycisk powrotu na jasnoszary

  4. BarTintColor zachowałem jako kopię zapasową. Nie wiem, dlaczego przezroczystość nie miałaby działać, ale jeśli nie, chcę, żeby mój biały bg był taki, jak kiedyś

    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()
Dave G.
źródło
3

dla Swift 3.0:

override func viewDidLoad() {
    super.viewDidLoad()

    navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
    navigationController?.navigationBar.shadowImage = UIImage()
    navigationController?.navigationBar.isTranslucent = true
}
Wilson
źródło
3

Rozwiązanie C # / Xamarin

NavigationController.NavigationBar.SetBackgroundImage(new UIImage(), UIBarMetrics.Default);
NavigationController.NavigationBar.ShadowImage = new UIImage();
NavigationController.NavigationBar.Translucent = true;
Mark Moeykens
źródło
2

Wypróbuj następujący fragment kodu:

self.navigationController.navigationBar.translucent = YES;
Rosyjski
źródło
1

Innym sposobem, który działał dla mnie, jest podklasa UINavigationBar i pozostawienie metody drawRect pustej !!

@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
}}
Człowiek ćma
źródło
1

W Swift 4.2

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

(w viewWillAppear), a następnie w viewWillDisappear, aby cofnąć, wstaw

self.navigationController?.navigationBar.shadowImage = nil
self.navigationController?.navigationBar.isTranslucent = false
pomyślny99
źródło
0

Czy masz na myśli całkowicie przezroczysty, czy używasz półprzezroczystego czarnego stylu widocznego w aplikacji Zdjęcia? To ostatnie można osiągnąć, ustawiając jego barStylewłaściwość na UIBarStyleBlackTranslucent. Ten pierwszy ... nie jestem pewien. Jeśli chcesz, aby elementy na nim były nadal widoczne, być może będziesz musiał trochę przekopać się w hierarchii widoków paska i usunąć widok zawierający jego tło.

Noah Witherspoon
źródło
2
Mam na myśli tę pierwszą. Próbowałem utworzyć kategorię i przesłonić metodę drawRect z UINavigationBar (wywołując CGContextClearRect), ale to sprawiło, że była całkowicie czarna. Przedmioty były jednak nadal widoczne.
quano
0

Działa to dla Swift 2.0.

navigationController!.navigationBar.setBackgroundImage(UIImage(), forBarMetrics: UIBarMetrics.Default)
navigationController!.navigationBar.shadowImage = UIImage()
navigationController!.navigationBar.translucent = true
Chris3643
źródło
0

Sprawdź RRViewControllerExtension , który jest dedykowany do zarządzania wyglądem paska UINavigation.

z RRViewControllerExtension w swoim projekcie wystarczy zastąpić

-(BOOL)prefersNavigationBarTransparent;

w twoim widoku kontroler.

pasek nawigacyjny tranparent

Roen
źródło
-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)
            }
        }
    }
}
Dheeraj
źródło