Come disegnare una UIToolbar trasparente o una UINavigationBar in iOS7


88

Vorrei un file completamente trasparente UIToolbare / o UINavigationBar. Ho provato i vari incantesimi suggeriti per pre e post iOS 5 ma nessuno sembra funzionare più.

Come potrebbe essere realizzato in iOS 7?


Per i posteri - stavo erroneamente usando self.edgesForExtendedLayout = UIRectEdgeNone, che impedisce alla vista di estendersi sotto la barra degli strumenti.
Ben Packard

Risposte:


303

Swift 3 (iOS 10)

Trasparente UIToolbar

self.toolbar.setBackgroundImage(UIImage(),
                                forToolbarPosition: .any,
                                barMetrics: .default)
self.toolbar.setShadowImage(UIImage(), forToolbarPosition: .any)

Trasparente UINavigationBar

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

Swift <3

Trasparente UIToolbar

self.toolbar.setBackgroundImage(UIImage(),
                                forToolbarPosition: UIBarPosition.Any,
                                barMetrics: UIBarMetrics.Default)
self.toolbar.setShadowImage(UIImage(),
                            forToolbarPosition: UIBarPosition.Any)

Trasparente UINavigationBar

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

Obiettivo-C

Trasparente UIToolbar

[self.toolbar setBackgroundImage:[UIImage new]
              forToolbarPosition:UIBarPositionAny
                      barMetrics:UIBarMetricsDefault];
[self.toolbar setShadowImage:[UIImage new]
          forToolbarPosition:UIBarPositionAny];

Trasparente UINavigationBar

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

Discussione

L'impostazione translucentsu YESsulla barra di navigazione fa il trucco, a causa di un comportamento discusso nella UINavigationBardocumentazione. Riporto qui il frammento rilevante:

Se si imposta questa proprietà YESsu una barra di navigazione con un'immagine di sfondo personalizzata opaca, la barra di navigazione applicherà un'opacità di sistema inferiore a 1.0 all'immagine.


Risultato finale

risultato finale


1
Hai confermato che la versione della barra degli strumenti funziona su iOS7? Ottengo una barra degli strumenti scura e uno strano sfarfallio sulla presentazione.
Ben Packard

2
Lo screenshot è dal iOS 7simulatore
Gabriele Petronella

Inoltre ho appena eseguito un'app di prova sul mio iPhone 5 con iOS 7 e funziona come previsto.
Gabriele Petronella

1
Ben fatto, tanti modi sbagliati / cattivi per farlo là fuori su SO
pfrank

2
Se usi edgeForExtendedLayout = UIRectEdgeNone, probabilmente vorrai implementare transizioni personalizzate. Perché altrimenti, quando si spingono le viste, la transizione predefinita creerà uno sfarfallio scuro sotto la barra trasparente durante l'animazione. Cordiali saluti, ecco una rapida risorsa per una transizione scorrevole di base: gist.github.com/ArtFeel/7690431
anna

8

Se vuoi farlo attraverso l'intera app dovresti usare il proxy UIAppearance (iOS5 +):

UINavigationBar *navigationBarAppearance = [UINavigationBar appearance]; navigationBarAppearance.backgroundColor = [UIColor clearColor]; [navigationBarAppearance setBackgroundImage:[[UIImage alloc] init] forBarMetrics:UIBarMetricsDefault]; navigationBarAppearance.shadowImage = [[UIImage alloc] init];

Documenti: https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIAppearance_Protocol/Reference/Reference.html

Articolo: http://nshipster.com/uiappearance/


Solo una nota per le persone che lo guardano: inserisci questo codice nella tua AppDelegate didFinishLaunchingWithOptions per un modo rapido e sporco per applicarlo.
Shaun F

È inoltre possibile impostare questo proxy di aspetto in modo che funzioni solo con UINavigationControllersottoclassi specifiche , ovvero quelle a cui si desidera applicare questo comportamento.
Evan R

2

Provare:

[navBar setBackgroundImage:[UIImage alloc] forBarMetrics:UIBarMetricsDefault];

0
@implementation MyCustomNavigationBar

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        [self setup];
    }
    return self;
}

- (id)initWithCoder:(NSCoder *)aDecoder {
    self = [super initWithCoder:aDecoder];
    if (self) {
        [self setup];
    }
    return self;
}

- (void)setup {
    [self setupBackground];
}

- (void)setupBackground {
    self.backgroundColor = [UIColor clearColor];
    self.tintColor = [UIColor clearColor];

    // make navigation bar overlap the content
    self.translucent = YES; 
    self.opaque = NO;

    // remove the default background image by replacing it with a clear image
    [self setBackgroundImage:[self.class maskedImage] forBarMetrics:UIBarMetricsDefault];

    // remove defualt bottom shadow
    [self setShadowImage: [UIImage new]]; 
}

+ (UIImage *)maskedImage {
    const float colorMask[6] = {222, 255, 222, 255, 222, 255};
    UIImage *img = [UIImage imageNamed:@"nav-white-pixel-bg.jpg"];
    return [UIImage imageWithCGImage: CGImageCreateWithMaskingColors(img.CGImage, colorMask)];
}

@end

0

Qualcosa in cui sono incappato è che se creassi una sottoclasse UINavigationBare poi creassi un -(void)drawRect:metodo vuoto , otterrei una barra di navigazione trasparente. L'ho provato solo su iOS 7. *, ma sembrava funzionare!

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.