Cómo dibujar un UIToolbar transparente o UINavigationBar en iOS7

88

Me gustaría un archivo totalmente transparente UIToolbary / o UINavigationBar. He probado los diversos encantamientos sugeridos para versiones anteriores y posteriores a iOS 5, pero ninguno parece funcionar.

¿Cómo se puede lograr esto en iOS 7?

ios uinavigationcontroller uinavigationbar ios7 uitoolbar Ben Packard
fuente
Para la posteridad: estaba usando por error self.edgesForExtendedLayout = UIRectEdgeNone, lo que evita que la vista se extienda debajo de la barra de herramientas.
Ben Packard

Respuestas:

303

Swift 3 (iOS 10)

Transparente UIToolbar

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

Transparente UINavigationBar

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

Rápido <3

Transparente UIToolbar

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

Transparente UINavigationBar

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

C objetivo

Transparente UIToolbar

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

Transparente UINavigationBar

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

Discusión

Establecerlo translucenten YESen la barra de navegación hace el truco, debido a un comportamiento discutido en la UINavigationBardocumentación. Informaré aquí el fragmento relevante:

Si establece esta propiedad YESen una barra de navegación con una imagen de fondo personalizada opaca, la barra de navegación aplicará una opacidad del sistema inferior a 1.0 a la imagen.

Resultado final

resultado final

Gabriele Petronella
fuente
1
¿Ha confirmado que la versión de la barra de herramientas funciona en iOS7? Aparece una barra de herramientas oscura y un extraño parpadeo en la presentación.
Ben Packard
2
La captura de pantalla es del iOS 7simulador
Gabriele Petronella
Además, acabo de ejecutar una aplicación de prueba en mi iPhone 5 con iOS 7 y funciona como se esperaba.
Gabriele Petronella
1
Bien hecho, muchas formas incorrectas / malas de hacer esto en SO
pfrank
2
Si usa edgeForExtendedLayout = UIRectEdgeNone, probablemente querrá implementar transiciones personalizadas. Porque de lo contrario, al presionar vistas, la transición predeterminada creará un parpadeo oscuro debajo de la barra transparente durante la animación. Para su información, aquí hay un recurso rápido para una transición deslizante básica: gist.github.com/ArtFeel/7690431
anna
8

Si quieres hacerlo a través de toda la aplicación debes usar el proxy UIAppearance (iOS5 +):

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

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

Artículo: http://nshipster.com/uiappearance/

Adam Waite
fuente
Solo una nota para las personas que miran esto: coloque este código en su AppDelegate didFinishLaunchingWithOptions para una manera rápida y sucia de aplicar esto.
Shaun F
También puede configurar este proxy de apariencia para que solo funcione con UINavigationControllersubclases específicas , es decir, aquellas a las que desea aplicar este comportamiento.
Evan R
2

Tratar:

[navBar setBackgroundImage:[UIImage alloc] forBarMetrics:UIBarMetricsDefault];
Leo Natan
fuente
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
gritado
fuente
0

Algo con lo que me topé es que si creaba una subclase UINavigationBary luego creaba un -(void)drawRect:método vacío , obtendría una barra de navegación transparente. Solo probé esto en iOS 7. *, ¡pero pareció funcionar!

jakenberg
fuente