Como desenhar um UIToolbar ou UINavigationBar transparente no iOS7

88

Eu gostaria de um totalmente transparente UIToolbare / ou UINavigationBar. Eu tentei os vários encantamentos sugeridos para pré e pós-iOS 5, mas nenhum parece funcionar mais.

Como isso pode ser feito no iOS 7?

ios uinavigationcontroller uinavigationbar ios7 uitoolbar Ben Packard
fonte
Para a posteridade - eu estava usando por engano self.edgesForExtendedLayout = UIRectEdgeNone, que impede que a visualização se estenda sob a barra de ferramentas.
Ben Packard

Respostas:

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

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

Objective-C

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;

Discussão

Definir translucentcomo YESna barra de navegação resolve o problema, devido a um comportamento discutido na UINavigationBardocumentação. Vou relatar aqui o fragmento relevante:

Se você definir esta propriedade YESem uma barra de navegação com uma imagem de plano de fundo personalizada opaca, a barra de navegação aplicará uma opacidade do sistema menor que 1,0 à imagem.

Resultado final

resultado final

Gabriele Petronella
fonte
1
Você confirmou que a versão da barra de ferramentas funciona no iOS7? Recebo uma barra de ferramentas escura e uma piscada estranha na apresentação.
Ben Packard
2
A imagem é do iOS 7simulador
Gabriele Petronella
Além disso, acabei de executar um aplicativo de teste no meu iPhone 5 com iOS 7 e funciona como esperado.
Gabriele Petronella
1
Muito bem, tantas maneiras erradas / ruins de fazer isso por aí no SO
pfrank
2
Se estiver usando edgeForExtendedLayout = UIRectEdgeNone, você provavelmente vai querer implementar transições personalizadas. Caso contrário, ao empurrar as visualizações, a transição padrão criará uma cintilação escura sob a barra transparente durante a animação. Para sua informação, aqui está um recurso rápido para uma transição deslizante básica: gist.github.com/ArtFeel/7690431
anna
8

Se você quiser fazer isso por meio de todo o aplicativo, deve usar o 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

Artigo: http://nshipster.com/uiappearance/

Adam Waite
fonte
Apenas uma observação para quem está olhando para isso - coloque este código em seu AppDelegate didFinishLaunchingWithOptions para uma maneira rápida e suja de aplicá-lo.
Shaun F
Você também pode definir esse proxy de aparência para funcionar apenas com UINavigationControllersubclasses específicas - ou seja, aquelas às quais deseja que esse comportamento seja aplicado.
Evan R
2

Experimentar:

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

Algo que descobri é que se eu criasse uma subclasse UINavigationBare, em seguida, criasse um -(void)drawRect:método vazio , obteria uma barra de navegação transparente. Eu só testei isso no iOS 7. *, mas parecia funcionar!

Jakenberg
fonte