如何在 iOS7中绘制透明的 UIToolbar 或 UINavigationBar

我想一个完全透明的 UIToolbar和/或 UINavigationBar。我已经尝试了 iOS5之前和之后提出的各种咒语,但似乎都不再奏效。

如何在 iOS7中实现这一点?

39470 次浏览

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

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

Objective-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;

Discussion

Setting translucent to YES on the navigation bar does the trick, due to a behavior discussed in the UINavigationBar documentation. I'll report here the relevant fragment:

If you set this property to YES on a navigation bar with an opaque custom background image, the navigation bar will apply a system opacity less than 1.0 to the image.


Final result

final result

Try:

[navBar setBackgroundImage:[UIImage alloc] forBarMetrics:UIBarMetricsDefault];
@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

Something I stumbled upon is that if I created a subclassed UINavigationBar and then created an empty -(void)drawRect: method, I would get a transparent navigation bar. I only tested this in iOS 7.*, but it seemed to work!

If you want to do it through the entire app you should use the UIAppearance proxy (iOS5+):

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

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

Article: http://nshipster.com/uiappearance/