bilah navigasi transparan ios


121

Saya membuat sebuah aplikasi dan saya telah menjelajahi internet dan saya bertanya-tanya bagaimana mereka membuat bar navigasi transparan ini seperti ini:

masukkan deskripsi gambar di sini

Saya telah menambahkan berikut seperti di appdelegate saya:

UINavigationBar.appearance().translucent = true

tetapi ini hanya membuatnya terlihat seperti berikut:

masukkan deskripsi gambar di sini

Bagaimana saya membuat navigationBar transparan seperti gambar pertama


Dengan kode yang saya tidak tahu, tetapi jika Anda mahir menggunakan CSS, Anda dapat menggunakan kerangka kerja (Pixate: freestyle.org ), dan dapat menerapkan gaya CSS ke bilah navigasi Anda :)!
Nicolas Charvoz

Jawaban:


286

Anda dapat menerapkan Gambar Bilah Navigasi seperti di bawah ini untuk Translucent.

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

Cepat 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

Semoga membantu Anda ..!


4
ketika saya setBackgroundImage menghapus barTintColor?
Peter Pik

Anda bisa mendapatkan gambar bilah Navigasi..Sesuai kebutuhan Anda..dan berlaku untuk bilah navigasi seperti di atas .. (Gambar yang ingin Anda terapkan ke bilah navigasi)
Vidhyan dan

1
pengaturan backgroundColor dari navigationController tidak diperlukan
matt bezark

4
Dengan solusi ini saya mendapatkan navigationBar hitam, ada ide?
Carlos del Blanco

1
Tidak seperti yang diharapkan. Saat Anda melakukannya, Anda tidak akan memiliki dinding tembus cahaya seperti dengan alpha 0,7 di kanan, PLUS juga menutupi bilah status. Jika Anda melakukan ini di iOS 13, Anda hanya akan memiliki persegi panjang dengan tampilan bagus dan di atasnya, THE STATUS BAR CRYSTAL CLEAR. yang mana penulis pertanyaannya jelas dan spesifik.
Marlhex

122

Solusi Cepat

Ini adalah cara terbaik yang pernah saya temukan. Anda cukup menempelkannya ke metode appDelegate Anda didFinishLaunchingWithOptions:

Cepat 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
}

sumber: Jadikan bilah navigasi transparan mengenai gambar di bawah ini di iOS 8.1


4
Solusi Swift 3 Anda membuat bilah saya putih polos.
Jose Ramirez

@JozemiteApps mencoba membuat proyek Xcode baru dan paste kodenya. Hanya perlu 3 menit untuk mengonfirmasi apakah itu kode saya di atas atau sesuatu tentang proyek Anda yang menyebabkan ini.
Dan Beaulieu

2
Saya juga mendapat navibar putih polos dan tidak ada navibar transparan
Kingalione

Ini bekerja dengan baik, terima kasih! Tahukah Anda bagaimana Anda dapat menerapkannya sehingga hanya bilah navigasi pada ViewControllers yang diinginkan yang transparan?
RufusV

@JoseRamirez Ini mungkin latar belakang viewController yang Anda lihat. Anda perlu mengubah batasan teratas pada tampilan pertama agar sejajar dengan superview dan bukan area atau margin aman.
diuji

27

Swift 5 hanya berlaku untuk pengontrol tampilan saat ini

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: ekstensi untuk Bilah Navigasi Transparan

extension UINavigationBar {
    func transparentNavigationBar() {
    self.setBackgroundImage(UIImage(), for: .default)
    self.shadowImage = UIImage()
    self.isTranslucent = true
    }
}

12

Solusi Swift 4.2: Untuk Latar Belakang transparan:

  1. Untuk Pendekatan Umum:

    override func viewDidLoad() {
        super.viewDidLoad()
    
        self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: UIBarMetrics.default)
        self.navigationController?.navigationBar.shadowImage = UIImage()
        self.navigationController?.navigationBar.isTranslucent = true
    
    }
  2. Untuk Objek Tertentu:

    override func viewDidLoad() {
        super.viewDidLoad()
    
        navBar.setBackgroundImage(UIImage(), for: UIBarMetrics.default)
        navBar.shadowImage = UIImage()
        navBar.navigationBar.isTranslucent = true
    
    }

Semoga bermanfaat.


Objek apa yang Anda maksud navBar?
Sergey Gamayunov

@SergeyGamayunov di navBarsini, merujuk ke objek UINavigationBar.
Ümañg ßürmån

Itu yang dia maksud ... biarkan navBar = self.navigationController? .NavigationBar
Marlhex

8

Saya dapat melakukannya dengan cepat dengan cara ini:

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

di mana saya membuat metode utilitas berikut dalam UIColorkategori:

imageFromColor(color: UIColor, frame: CGRect) -> UIImage {
  UIGraphicsBeginImageContextWithOptions(frame.size, false, 0)
  color.setFill()
  UIRectFill(frame)
  let image = UIGraphicsGetImageFromCurrentImageContext()
  UIGraphicsEndImageContext()
  return image
}

Ini harus menjadi jawaban teratas!
Mihail Gaji

7

Apa yang berhasil untuk saya:

    let bar:UINavigationBar! =  self.navigationController?.navigationBar
    self.title = "Whatever..."
    bar.setBackgroundImage(UIImage(), forBarMetrics: UIBarMetrics.Default)
    bar.shadowImage = UIImage()
    bar.alpha = 0.0 

5

Setel properti latar belakang navigationBar Anda, misalnya

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

(Anda mungkin harus mengubahnya sedikit jika Anda tidak memiliki pengontrol navigasi, tetapi itu akan memberi Anda gambaran tentang apa yang harus dilakukan.)

Pastikan juga bahwa tampilan di bawah ini benar-benar meluas ke bawah bilah.


Ini memberi saya sebagai berikut: i.stack.imgur.com/GT3WV.png Bagaimana saya bisa membuat sedikit lebih merah seperti tautan pertama (gambar) yang saya posting
Peter Pik

Anda dapat bermain dengan nilai alpha dan mengubahnya dari 0,5 menjadi antara 0,0 dan 1,0. Dan seperti yang saya katakan, pastikan tampilan di bawah berada di bawah bilah navigasi, jika tidak, Anda tidak akan melihat konten apa pun bersinar melalui bilah. Jika Anda menggunakan Interface Builder, Anda dapat menyeret dan menyelaraskan tepi atas tampilan tersebut dengan tepi atas layar.
Atomix

2

Coba ini, ini berfungsi untuk saya jika Anda juga perlu mendukung ios7, ini didasarkan pada transparansi 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

Bagi mereka yang mencari solusi OBJC, untuk ditambahkan ke metode App Delegate didFinishLaunchingWithOptions:

[[UINavigationBar appearance] setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
[UINavigationBar appearance].shadowImage = [UIImage new];
[UINavigationBar appearance].backgroundColor = [UIColor clearColor];
[UINavigationBar appearance].translucent = YES;

1

Jika Anda ingin dapat melakukan ini secara terprogram dalam 4 cepat sambil tetap pada tampilan yang sama,

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
    }

Satu hal penting untuk diingat adalah mengklik tombol ini di papan cerita Anda. Saya memiliki masalah dengan tampilan melompat untuk waktu yang lama. Pastikan Anda mengatur ini:masukkan deskripsi gambar di sini

Kemudian saat Anda mengubah tembus pandang bilah navigasi, hal itu tidak akan menyebabkan tampilan melompat karena tampilan meluas ke atas, terlepas dari visibilitas bilah navigasi.


1

Tambahkan ini di memang memuat

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

Metode utilitas yang Anda panggil dengan meneruskan navigationController dan warna yang ingin Anda setel di bilah navigasi. Untuk transparan Anda dapat menggunakan clearColordari UIColorkelas.

Untuk tujuan 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];
}

Untuk 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

Saya telah mengerjakan ini, dan saya menghadapi masalah menggunakan tanggapan yang diberikan di sini oleh pengguna yang berbeda. Masalahnya adalah kotak putih di belakang gambar transparan NavigationBar saya di iOS 13+

masukkan deskripsi gambar di sini

Solusi saya adalah yang ini

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()
}

Semoga ini bisa membantu siapa pun dengan masalah yang sama

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.