So zeichnen Sie eine transparente UIToolbar oder UINavigationBar in iOS7


88

Ich möchte eine völlig transparente UIToolbarund / oder UINavigationBar. Ich habe die verschiedenen Beschwörungsformeln ausprobiert, die für Pre- und Post-iOS 5 vorgeschlagen wurden, aber keine scheint mehr zu funktionieren.

Wie könnte dies in iOS 7 erreicht werden?


Für die Nachwelt - Ich habe fälschlicherweise self.edgesForExtendedLayout = UIRectEdgeNone verwendet, wodurch verhindert wird, dass sich die Ansicht unter der Symbolleiste erstreckt.
— Ben Packard

Antworten:


303

Swift 3 (iOS 10)

Transparent UIToolbar

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

Transparent UINavigationBar

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

Schnell <3

Transparent UIToolbar

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

Transparent UINavigationBar

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

Ziel c

Transparent UIToolbar

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

Transparent UINavigationBar

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

Diskussion

Die Einstellung translucentin YESder Navigationsleiste reicht aufgrund eines in der UINavigationBarDokumentation beschriebenen Verhaltens aus . Ich werde hier das relevante Fragment melden:

Wenn Sie diese Eigenschaft in YESeiner Navigationsleiste mit einem undurchsichtigen benutzerdefinierten Hintergrundbild festlegen , wendet die Navigationsleiste eine Systemopazität von weniger als 1,0 auf das Bild an.


Endergebnis

Endergebnis


1
Haben Sie bestätigt, dass die Symbolleistenversion unter iOS7 funktioniert? Ich bekomme eine dunkle Symbolleiste und ein seltsames Flackern bei der Präsentation.
— Ben Packard

2
Der Screenshot ist aus dem iOS 7Simulator
— Gabriele Petronella

Außerdem starte ich gerade eine Test-App auf meinem iPhone 5 mit iOS 7 und sie funktioniert wie erwartet.
— Gabriele Petronella

1
Schön gemacht, so viele falsche / schlechte Wege, dies auf SO zu tun
— pfrank

2
Wenn Sie edgeForExtendedLayout = UIRectEdgeNone verwenden, möchten Sie wahrscheinlich benutzerdefinierte Übergänge implementieren. Andernfalls wird beim Verschieben von Ansichten beim Standardübergang während der Animation ein dunkles Flimmern unter der transparenten Leiste erzeugt. Zu Ihrer Information
— Anna

8

Wenn Sie dies über die gesamte App tun möchten, sollten Sie den UIAppearance-Proxy (iOS5 +) verwenden:

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

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

Artikel: http://nshipster.com/uiappearance/


Nur eine Anmerkung für Leute, die sich das ansehen - fügen Sie diesen Code in Ihre AppDelegate didFinishLaunchingWithOptions ein, um eine schnelle und schmutzige Möglichkeit zu finden, dies anzuwenden.
— Shaun F

Sie können diesen Darstellungs-Proxy auch so einstellen, dass er nur mit bestimmten UINavigationControllerUnterklassen funktioniert, dh mit denen, auf die dieses Verhalten angewendet werden soll.
— Evan R vor

2

Versuchen:

[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

Ich bin darauf gestoßen, dass ich eine transparente Navigationsleiste erhalten würde , wenn ich eine Unterklasse UINavigationBarund dann eine leere -(void)drawRect:Methode erstellen würde. Ich habe dies nur in iOS 7 getestet. *, Aber es schien zu funktionieren!

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.