przezroczysty pasek nawigacji ios

121

Tworzę aplikację i przeglądałem Internet i zastanawiam się, jak tworzą ten przejrzysty pasek nawigacji w ten sposób:

wprowadź opis obrazu tutaj

Dodałem następujące, jak w mojej appdelegate:

UINavigationBar.appearance().translucent = true

ale to tylko sprawia, że ​​wygląda to następująco:

wprowadź opis obrazu tutaj

Jak mogę sprawić, by pasek nawigacji był przezroczysty, jak na pierwszym obrazie

Peter Pik
źródło
Z kodem, którego nie znam, ale jeśli jesteś dobry w CSS, możesz użyć frameworka (Pixate: freestyle.org ) i po prostu zastosować styl CSS do swojego paska nawigacyjnego :)!
Nicolas Charvoz

Odpowiedzi:

286

Możesz zastosować obraz paska nawigacji, jak poniżej, dla półprzezroczystego.

Cel 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

Mam nadzieję, że to ci pomoże ...!

Vidhyanand
źródło
4
kiedy setBackgroundImage usuwa barTintColor?
Peter Pik
Możesz uzyskać obraz paska nawigacyjnego ... zgodnie z potrzebami ... i zastosować do paska nawigacji jak powyżej ... (obraz, który chcesz zastosować do paska nawigacji)
Vidhyan i
1
ustawienie backgroundColor of navigationController nie jest konieczne
matowy bezark
4
Dzięki takiemu rozwiązaniu otrzymuję czarny pasek nawigacji, jakieś pomysły?
Carlos del Blanco,
1
Nie tak jak się spodziewano. Kiedy to zrobisz, ściana nie będzie przezroczysta, jak przy alfa 0,7 w prawo, PLUS zakrywająca również pasek stanu. Jeśli zrobisz to na iOS 13, będziesz miał tylko prostokąt ładnie wyglądającego, a nad nim, STATUS BAR CRYSTAL CLEAR. który autor pytania jest jasny i konkretny.
Marlhex
122

Szybkie rozwiązanie

To najlepszy sposób, jaki znalazłem. Możesz po prostu wkleić go do metody appDelegate didFinishLaunchingWithOptions :

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

źródło: Ustaw przezroczystość paska nawigacji w odniesieniu do poniższego obrazu w iOS 8.1

Dan Beaulieu
źródło
4
Twoje rozwiązanie Swift 3 sprawia, że ​​mój pasek jest zwykły biały.
Jose Ramirez
@JozemiteApps spróbuj stworzyć zupełnie nowy projekt Xcode i wklej kod. Potwierdzenie, czy to mój kod powyżej, czy coś w Twoim projekcie, powinno zająć tylko 3 minuty.
Dan Beaulieu
2
Dostałem też zwykły biały navibar bez przezroczystego navibara
Kingalione
To działa świetnie, dziękuję! Czy wiesz, jak możesz to zaimplementować, aby jedyne paski nawigacyjne na wybranych kontrolerach widoku były przezroczyste?
RufusV
@JoseRamirez To prawdopodobnie tło kontrolera widoku, które widzisz. Musisz zmienić górne ograniczenie pierwszego widoku, aby wyrównać je z nadzorem, a nie z bezpiecznym obszarem lub marginesem.
test turinga odbył się
27

Swift 5 stosowany tylko do bieżącego kontrolera widoku

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
źródło
13

Swift 3: rozszerzenie dla przezroczystego paska nawigacyjnego

extension UINavigationBar {
    func transparentNavigationBar() {
    self.setBackgroundImage(UIImage(), for: .default)
    self.shadowImage = UIImage()
    self.isTranslucent = true
    }
}
Ankit Kumar Gupta
źródło
12

Rozwiązanie Swift 4.2: przezroczyste tło:

  1. Podejście ogólne:

    override func viewDidLoad() {
        super.viewDidLoad()
    
        self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: UIBarMetrics.default)
        self.navigationController?.navigationBar.shadowImage = UIImage()
        self.navigationController?.navigationBar.isTranslucent = true
    
    }
  2. W przypadku konkretnego obiektu:

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

Mam nadzieję, że to przydatne.

Ümañg ßürmån
źródło
O jakim obiekcie mówisz navBar?
Sergey Gamayunov
@SergeyGamayunov navBartutaj, odnosi się do obiektu UINavigationBar.
Ümañg ßürmån
To ma na myśli ... niech navBar = self.navigationController?
.NavigationBar
8

Udało mi się to szybko osiągnąć w ten sposób:

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

gdzie utworzyłem następującą metodę narzędziową w UIColorkategorii:

imageFromColor(color: UIColor, frame: CGRect) -> UIImage {
  UIGraphicsBeginImageContextWithOptions(frame.size, false, 0)
  color.setFill()
  UIRectFill(frame)
  let image = UIGraphicsGetImageFromCurrentImageContext()
  UIGraphicsEndImageContext()
  return image
}
Julian B.
źródło
To powinna być najlepsza odpowiedź!
Mihail Salari
7

Co mi się udało:

    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
źródło
5

Ustaw właściwość background swojego navigationBar, np

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

(Być może będziesz musiał to nieco zmienić, jeśli nie masz kontrolera nawigacyjnego, ale to powinno dać ci pojęcie, co robić).

Upewnij się również, że poniższy widok faktycznie rozciąga się pod paskiem.

Atomix
źródło
To daje mi następujące informacje: i.stack.imgur.com/GT3WV.png Jak mogę zrobić trochę bardziej czerwony jak pierwszy link (obraz), który opublikowałem
Peter Pik
Możesz grać z wartością alfa i zmieniać ją z 0,5 na dowolną z zakresu od 0,0 do 1,0. I jak powiedziałem, upewnij się, że poniższy widok znajduje się pod paskiem nawigacji, w przeciwnym razie nie zobaczysz żadnej treści prześwitującej przez pasek. Jeśli używasz Interface Builder, możesz przeciągnąć i wyrównać górną krawędź tego widoku z górną krawędzią ekranu.
Atomix,
2

Spróbuj tego, działa dla mnie, jeśli potrzebujesz również obsługi ios7, jest oparty na przezroczystości 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
źródło
2

Dla tych, którzy szukają rozwiązania OBJC, do dodania w metodzie App Delegate didFinishLaunchingWithOptions:

[[UINavigationBar appearance] setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
[UINavigationBar appearance].shadowImage = [UIImage new];
[UINavigationBar appearance].backgroundColor = [UIColor clearColor];
[UINavigationBar appearance].translucent = YES;
david72
źródło
1

Jeśli chcesz móc robić to programowo w Swift 4, pozostając przy tym samym widoku,

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
    }

Jedną ważną rzeczą do zapamiętania jest jednak kliknięcie tego przycisku w swojej serii ujęć. Przez długi czas miałem problem z wyświetlaniem skoków. Upewnij się, że ustawiłeś to:wprowadź opis obrazu tutaj

Wówczas zmiana półprzezroczystości paska nawigacji nie spowoduje przeskakiwania widoków, ponieważ widoki rozciągają się na samą górę, niezależnie od widoczności paska nawigacji.

paul_f
źródło
1

Dodaj to do swojego załadowania

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
źródło
0

Metoda narzędziowa, którą wywołujesz, przekazując navigationController i kolor, który chcesz ustawić na pasku nawigacji. Dla przezroczysty można korzystać clearColorzUIColor klasy.

Dla celu 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];
}

Dla 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
źródło
0

Pracowałem nad tym i napotkałem problem podczas korzystania z odpowiedzi udzielonych tutaj przez różnych użytkowników. Problem polegał na tym, że białe pole za przezroczystym obrazem paska nawigacji w systemie iOS 13+

wprowadź opis obrazu tutaj

Moje rozwiązanie jest takie

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

Mam nadzieję, że to pomoże każdemu z tym samym problemem

Reinier Melian
źródło