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


88

我想要一个完全透明UIToolbar和/或UINavigationBar。我尝试了针对iOS 5前后的各种建议,但似乎都无法正常工作了。

在iOS 7中如何实现?


为了后代-我错误地使用了self.edgesForExtendedLayout = UIRectEdgeNone,它阻止了视图在工具栏下扩展。
本·帕克

Answers:


303

迅捷3(iOS 10)

透明 UIToolbar

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

透明 UINavigationBar

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

迅捷<3

透明 UIToolbar

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

透明 UINavigationBar

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

目标C

透明 UIToolbar

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

透明 UINavigationBar

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

讨论区

由于文档中讨论的行为,在导航栏上设置translucent为可以YES解决问题UINavigationBar。我将在这里报告相关片段:

如果将此属性设置为YES带有不透明自定义背景图像的导航栏,则导航栏将对图像应用小于1.0的系统不透明度。


最后结果

最后结果


1
您是否确认工具栏版本可在iOS7上使用?我得到一个黑暗的工具栏,并在演示中出现奇怪的闪烁。
本·帕卡德

2
屏幕截图来自iOS 7模拟器
Gabriele Petronella

另外,我只是在装有iOS 7的iPhone 5上运行了一个测试应用程序,它可以按预期运行。
加布里埃尔·彼得罗内拉2013年

1
做得很好,SO上有这么多错误/不好的方法可以做到这一点
pfrank 2013年

2
如果使用edgeForExtendedLayout = UIRectEdgeNone,则可能要实现自定义过渡。因为否则,在推送视图时,默认过渡将在动画过程中在透明条下方创建黑色闪烁。仅供参考,以下是基本滑动转换的快速资源:gist.github.com/ArtFeel/7690431
anna

8

如果要通过整个应用程序进行操作,则应使用UIAppearance代理(iOS5 +):

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

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

文章:http//nshipster.com/uiappearance/


只是给关注此内容的人提供的注释-将此代码放入您的AppDelegate didFinishLaunchingWithOptions中,以快速,肮脏的方式应用此代码。
肖恩F

您也可以将此外观代理设置为仅与特定的UINavigationController子类一起使用,即要将此行为应用于的子类。
埃文·R

2

尝试:

[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

我偶然发现的是,如果我创建了一个子类UINavigationBar然后创建了一个空-(void)drawRect:方法,那么我将获得一个透明的导航栏。我仅在iOS 7. *中对此进行了测试,但它似乎可以工作!

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.