透明なナビゲーションバーiOS

121

私はアプリを作成していて、インターネットで閲覧しましたが、この透明なnavigationBarを次のように作成しているのではないかと思います。

ここに画像の説明を入力してください

appdelegateに次のように追加しました：

UINavigationBar.appearance().translucent = true

しかし、これにより次のようになります。

ここに画像の説明を入力してください

最初の画像のように、navigationBarを透明にする方法

ios  iphone  swift  uinavigationbar 
— ピーターピク
ソース
コードはわかりませんが、CSSに長けている場合は、フレームワーク（Pixate：freestyle.org）を使用でき、CSSスタイルをnavbarに適用できます:)！
— Nicolas Charvoz 2014

回答:

286

半透明の場合は、以下のようなナビゲーションバー画像を適用できます。

Objective-C：

[self.navigationController.navigationBar setBackgroundImage:[UIImage new]
                     forBarMetrics:UIBarMetricsDefault]; //UIImageNamed:@"transparent.png"
self.navigationController.navigationBar.shadowImage = [UIImage new];////UIImageNamed:@"transparent.png"
self.navigationController.navigationBar.translucent = YES;
self.navigationController.view.backgroundColor = [UIColor clearColor];

スウィフト3：

self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default) //UIImage.init(named: "transparent.png")
self.navigationController?.navigationBar.shadowImage = UIImage()
self.navigationController?.navigationBar.isTranslucent = true
self.navigationController?.view.backgroundColor = .clear

お役に立てば幸いです。

— ヴィディヤナン
ソース
4
setBackgroundImageを実行すると、barTintColorが削除されますか？
— Peter Pik 2014
ナビゲーションバーの画像を取得できます。必要に応じて、上記のようにナビゲーションバーに適用します。（ナビゲーションバーに適用する画像）
— Vidhyanand
1
navigationControllerのbackgroundColorを設定する必要はありません
— マットビザーク
4
このソリューションを使用すると、黒いnavigationBar、アイデアがありますか？
— Carlos del Blanco、
1
期待どおりではありません。これを行うと、アルファが0.7右のように壁が半透明にならず、ステータスバーもカバーされます。iOS 13でこれを行うと、見栄えの良い長方形とその上に、ステータスバークリスタルクリアが表示されます。質問の作成者はその明確かつ具体的です。
— Marlhex、
122

Swiftソリューション

これは私が見つけた最良の方法です。それをappDelegateの didFinishLaunchingWithOptionsメソッドに貼り付けるだけです。

スイフト3/4

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
    // Override point for customization after application launch.
    // Sets background to a blank/empty image
    UINavigationBar.appearance().setBackgroundImage(UIImage(), for: .default)
    // Sets shadow (line below the bar) to a blank image
    UINavigationBar.appearance().shadowImage = UIImage()
    // Sets the translucent background color
    UINavigationBar.appearance().backgroundColor = .clear
    // Set translucent. (Default value is already true, so this can be removed if desired.)
    UINavigationBar.appearance().isTranslucent = true
    return true
}

Swift 2.0

func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
    // Override point for customization after application launch.
    // Sets background to a blank/empty image
    UINavigationBar.appearance().setBackgroundImage(UIImage(), forBarMetrics: .Default)
    // Sets shadow (line below the bar) to a blank image
    UINavigationBar.appearance().shadowImage = UIImage()
    // Sets the translucent background color
    UINavigationBar.appearance().backgroundColor = UIColor(red: 0.0, green: 0.0, blue: 0.0, alpha: 0.0)
    // Set translucent. (Default value is already true, so this can be removed if desired.)
    UINavigationBar.appearance().translucent = true

    return true
}

ソース：iOS 8.1の下の画像に関してナビゲーションバーを透明にする

— ダンボーリュー
ソース
3
あなたのSwift 3ソリューションは私のバーを真っ白にします。
— ホセ・ラミレス
@JozemiteAppsは、まったく新しいXcodeプロジェクトを作成してコードを貼り付けてみてください。上記の私のコードなのか、これを引き起こしているプロジェクトの何かなのかを確認するのに3分しかかかりません。
— Dan Beaulieu 2017
1
また、真っ白なナビバーがあり、透明なナビバーはありませんでした
— Kingalione
これはうまくいきます、ありがとう！目的のViewControllerのナビゲーションバーのみが透明になるように実装する方法を知っていますか？
— RufusV
@JoseRamirezこれはおそらく、表示されるviewControllerの背景です。安全な領域やマージンではなく、スーパービューに合わせて、最初のビューの上部の拘束を変更する必要があります。
— テスト済み
27

Swift 5は現在のビューコントローラーのみに適用されます

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)

    // Make the navigation bar background clear
    navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
    navigationController?.navigationBar.shadowImage = UIImage()
    navigationController?.navigationBar.isTranslucent = true
}

override func viewWillDisappear(_ animated: Bool) {
    super.viewWillDisappear(animated)

    // Restore the navigation bar to default
    navigationController?.navigationBar.setBackgroundImage(nil, for: .default)
    navigationController?.navigationBar.shadowImage = nil
}
— クリスシュート
ソース
13

Swift 3：Transparent Navigation Barの拡張

extension UINavigationBar {
    func transparentNavigationBar() {
    self.setBackgroundImage(UIImage(), for: .default)
    self.shadowImage = UIImage()
    self.isTranslucent = true
    }
}
— アンキットクマールグプタ
ソース
12

Swift 4.2ソリューション：透明な背景の場合：

  1. 一般的なアプローチの場合：

    override func viewDidLoad() {
    super.viewDidLoad()

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

}

  2. 特定のオブジェクトの場合：

    override func viewDidLoad() {
    super.viewDidLoad()

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

}

お役に立てれば幸いです。

— Ümañgßürmån
ソース
どのオブジェクトを参照しnavBarますか？
— セルゲイガマユノフ
navBarここの@SergeyGamayunov は、UINavigationBarのオブジェクトを参照します。
— Ümañgßürmån
それは彼が意味することです... let navBar = self.navigationController？.navigationBar
— Marlhex
8

私はこの方法で迅速にこれを達成することができました：

let navBarAppearance = UINavigationBar.appearance()
let colorImage = UIImage.imageFromColor(UIColor.morselPink(), frame: CGRectMake(0, 0, 340, 64))
navBarAppearance.setBackgroundImage(colorImage, forBarMetrics: .Default)

ここで、UIColorカテゴリに次のユーティリティメソッドを作成しました。

imageFromColor(color: UIColor, frame: CGRect) -> UIImage {
  UIGraphicsBeginImageContextWithOptions(frame.size, false, 0)
  color.setFill()
  UIRectFill(frame)
  let image = UIGraphicsGetImageFromCurrentImageContext()
  UIGraphicsEndImageContext()
  return image
}
— ジュリアン・B
ソース
これが一番の答えになるはずです！
— Mihail Salari
7

それが私のために働いたもの：

    let bar:UINavigationBar! =  self.navigationController?.navigationBar
    self.title = "Whatever..."
    bar.setBackgroundImage(UIImage(), forBarMetrics: UIBarMetrics.Default)
    bar.shadowImage = UIImage()
    bar.alpha = 0.0
— ハビエル・カラトラバ・ラベリア
ソース
5

ナビゲーションバーのbackgroundプロパティを設定します。

navigationController?.navigationBar.backgroundColor = UIColor(red: 1.0, green: 0.0, blue: 0.0, alpha: 0.5)

（ナビゲーションコントローラがない場合は少し変更する必要があるかもしれませんが、それで何をすべきかがわかるはずです。）

また、下のビューが実際にバーの下に伸びていることを確認してください。

— アトミックス
ソース
これにより、次のようになります。i.stack.imgur.com / GT3WV.png最初に投稿したリンク（画像）のように少し赤くするにはどうすればよいですか
— Peter Pik 14
アルファ値を操作して、0.5から0.0から1.0の間の任意の値に変更できます。そして、先ほど述べたように、下のビューがナビゲーションバーの下にあることを確認してください。そうしないと、バーを介してコンテンツが輝きません。Interface Builderを使用している場合は、そのビューの上端をドラッグして画面の上端に揃えることができます。
— Atomix 2014
2

これを試してみてください。ios7もサポートする必要がある場合は、UItoolBarの透明度に基づいて機能します。

[self.navigationController.navigationBar setBackgroundImage:[UIImage new]
                                                  forBarMetrics:UIBarMetricsDefault];
    self.navigationController.navigationBar.shadowImage = [UIImage new];
    self.navigationController.navigationBar.translucent = YES;
    self.navigationController.view.backgroundColor = [UIColor clearColor];
    UIToolbar* blurredView = [[UIToolbar alloc] initWithFrame:self.navigationController.navigationBar.bounds];
    [blurredView setBarStyle:UIBarStyleBlack];
    [blurredView setBarTintColor:[UIColor redColor]];
    [self.navigationController.navigationBar insertSubview:blurredView atIndex:0];
— エミルド
ソース
2

OBJCソリューションをお探しの方は、App DelegateのdidFinishLaunchingWithOptionsメソッドに追加してください。

[[UINavigationBar appearance] setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
[UINavigationBar appearance].shadowImage = [UIImage new];
[UINavigationBar appearance].backgroundColor = [UIColor clearColor];
[UINavigationBar appearance].translucent = YES;
— david72
ソース
1

同じビューを維持したまま、プログラムでSwift 4でこれを実行できるようにするには、

if change {
        navigationController?.navigationBar.isTranslucent = false
        self.navigationController?.navigationBar.backgroundColor = UIColor(displayP3Red: 255/255, green: 206/255, blue: 24/255, alpha: 1)
        navigationController?.navigationBar.barTintColor = UIColor(displayP3Red: 255/255, green: 206/255, blue: 24/255, alpha: 1)
    } else {
        navigationController?.navigationBar.isTranslucent = true
        navigationController?.navigationBar.setBackgroundImage(backgroundImage, for: .default)
        navigationController?.navigationBar.backgroundColor = .clear
        navigationController?.navigationBar.barTintColor = .clear
    }

ただし、ストーリーボードでこのボタンをクリックすることは重要です。ジャンプの表示に長い間問題がありました。必ずこれを設定してください：ここに画像の説明を入力してください

次に、ナビゲーションバーの透明度を変更しても、ビューがナビゲーションバーの表示状態に関係なく最上部まで伸びているため、ビューがジャンプすることはありません。

— paul_f
ソース
1

これをあなたのロードに追加してください

self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
self.navigationController?.navigationBar.shadowImage = UIImage()
self.navigationController?.navigationBar.backgroundColor = UIColor(red: 1, green: 1, blue: 1, alpha: 0.0)
//adjust alpha according to your need 0 is transparent 1 is solid
— アビシェク・マウリヤ
ソース
0

ナビゲーションバーに設定したいnavigationControllerとcolorを渡すことで呼び出すユーティリティメソッド。以下のために透明を使用できclearColorのUIColorクラス。

目的cの場合- 

+ (void)setNavigationBarColor:(UINavigationController *)navigationController 
                               color:(UIColor*) color {
   [navigationController setNavigationBarHidden:false animated:false];
   [navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
   [navigationController.navigationBar setShadowImage:[UIImage new]];
   [navigationController.navigationBar setTranslucent:true];
   [navigationController.view setBackgroundColor:color];
   [navigationController.navigationBar setBackgroundColor:color];
}

Swift 3.0の場合- 

class func setNavigationBarColor(navigationController : UINavigationController?, 
                                 color : UIColor) {
    navigationController?.setNavigationBarHidden(false, animated: false)
    navigationController?.navigationBar .setBackgroundImage(UIImage(), forBarMetrics: UIBarMetrics.Default)
    navigationController?.navigationBar.shadowImage = UIImage()
    navigationController?.navigationBar.translucent = true
    navigationController?.view.backgroundColor = color
    navigationController?.navigationBar.backgroundColor =  color
}
— ラフル
ソース
0

私はこれに取り組んでおり、ここでさまざまなユーザーから提供された応答を使用して問題に直面していました。問題は、iOS 13以降のNavigationBar透明画像の背後にある白いボックスでした。

ここに画像の説明を入力してください

私の解決策はこれです

if #available(iOS 13, *) {
    navBar?.standardAppearance.backgroundColor = UIColor.clear
    navBar?.standardAppearance.backgroundEffect = nil
    navBar?.standardAppearance.shadowImage = UIImage()
    navBar?.standardAppearance.shadowColor = .clear
    navBar?.standardAppearance.backgroundImage = UIImage()
}

これが同じ問題のある人に役立つことを願っています

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