iOS7で透明なUIToolbarまたはUINavigationBarを描画する方法


88

私は完全に透明希望UIToolbarおよび/またはUINavigationBar。私は、iOS 5以前およびiOS 5以降に提案されたさまざまな呪文を試しましたが、どれも動作しないようです。

これはiOS 7でどのように達成できますか?


後世のために-誤ってself.edgesForExtendedLayout = UIRectEdgeNoneを使用していたため、ツールバーの下にビューが拡張されなくなりました。
ベンパッカード

回答:


303

Swift 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

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

討論

ドキュメントで説明されている動作により、ナビゲーションバーtranslucentYESに設定するとうまくいきUINavigationBarます。ここで関連するフラグメントを報告します。

YES不透明なカスタム背景画像のあるナビゲーションバーでこのプロパティをに設定すると、ナビゲーションバーは1.0未満のシステム不透明度を画像に適用します。


最終結果

最終結果


1
ツールバーのバージョンがiOS7で動作することを確認しましたか?暗いツールバーが表示され、プレゼンテーションで奇妙なちらつきが発生します。
ベンパッカード

2
スクリーンショットはiOS 7シミュレータからのものです
ガブリエレペトロネラ2013

また、iOS 7を搭載したiPhone 5でテストアプリを実行するだけで、期待どおりに動作します。
ガブリエレペトロ

1
うまくできている、SOでこれを行うための多くの間違った/悪い方法
pfrank

2
EdgesForExtendedLayout = UIRectEdgeNoneを使用している場合は、おそらくカスタム遷移を実装する必要があります。それ以外の場合、ビューを押すと、デフォルトの遷移により、アニメーション中に透明なバーの下に暗いフリッカーが作成されます。参考までに
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に入れて、これをすばやく簡単に適用できます。
Shaun F 14

この外観プロキシを特定の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. *でテストしただけですが、動作するように見えました!

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.