Jadikan UINavigationBar transparan

Jawaban:

635

Jika ada yang bertanya-tanya bagaimana mencapai ini di iOS 7+, berikut ini solusinya (iOS 6 juga kompatibel)

Dalam Objective-C

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

Dalam cepat 3 (iOS 10)

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

Dengan cepat 2

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

Diskusi

Mengatur translucentke YESpada bilah navigasi melakukan trik, karena perilaku yang dibahas dalam UINavigationBardokumentasi. Saya akan melaporkan di sini fragmen yang relevan:

Jika Anda menyetel properti ini ke YESpada bilah navigasi dengan gambar latar belakang kustom buram, bilah navigasi akan menerapkan opacity sistem kurang dari 1,0 ke gambar.

Gabriele Petronella
sumber
29
Menjawab komentar saya sendiri di sini; untuk membatalkan coba coba:[self.navigationController.navigationBar setBackgroundImage:nil forBarMetrics:UIBarMetricsDefault]; self.navigationController.navigationBar.shadowImage = nil; self.navigationController.navigationBar.translucent = NO;
Johann Burgess
Saya hanya perlu satu VC untuk memiliki navbar transparan. Bagaimana cara kembali ke gaya asli setelah keluar dari VC itu?
Guilherme
2
untuk mencapai ini di Swift dari dalam ViewController, lakukan seperti ini: self.navigationController?.navigationBar.setBackgroundImage(UIImage(), forBarMetrics: UIBarMetrics.Default) self.navigationController?.navigationBar.shadowImage = UIImage() self.navigationController?.navigationBar.translucent = true
datayeah
Bekerja menggunakan appeareance juga (iOS7 / 8), lihat: gist.github.com/mpycio/ddbdea1adb6b86cf02f6
Mahakala
1
Membatalkan efek bagi saya hanya berfungsi sebagian. Karena setelah saya melakukan ini, tampilan tabel saya semua memiliki header yang terlalu besar. App-wide, yang aneh. (Saya hanya ingin efek ini untuk satu pengontrol yang saya dorong pada tumpukan.)
Henning
29

Di iOS5 Anda dapat melakukan ini untuk membuat bilah navigasi transparan:

nav.navigationBar.translucent = YES; // Setting this slides the view up, underneath the nav bar (otherwise it'll appear black)
const float colorMask[6] = {222, 255, 222, 255, 222, 255};
UIImage *img = [[UIImage alloc] init];
UIImage *maskedImage = [UIImage imageWithCGImage: CGImageCreateWithMaskingColors(img.CGImage, colorMask)];

[nav.navigationBar setBackgroundImage:maskedImage forBarMetrics:UIBarMetricsDefault]; 
[img release];
Alex Stanciu
sumber
6
Di iOS 6 Anda juga ingin menghapus bayangan bar navigasi, jika tidak maka akan terlihat aneh. [[UINavigationBar appearance] setShadowImage: [[UIImage alloc] init]];
Robert
23

Dari IOS7:

self.navigationController.navigationBar.translucent = YES;
self.navigationController.navigationBar.shadowImage = [UIImage new];
self.navigationController.view.backgroundColor = [UIColor clearColor];
[self.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
self.navigationController.navigationBar.backgroundColor = [UIColor clearColor];
Damien Romito
sumber
14

Bagi siapa saja yang ingin melakukan ini di Swift 2.x:

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

atau Swift 3.x:

self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
self.navigationController?.navigationBar.shadowImage = UIImage()
self.navigationController?.navigationBar.isTranslucent = true
fulvio
sumber
2
navigationController adalah properti opsional sehingga Anda perlu membukanya. Cukup tambahkan self.navigationController? .NavigationBar dan Anda siap berangkat
Daniel Galasko
10

Ini sepertinya berhasil:

@implementation UINavigationBar (custom)
- (void)drawRect:(CGRect)rect {}
@end

navigationController.navigationBar.backgroundColor = [UIColor clearColor];
quano
sumber
6
Tampaknya di iOS 5 Anda harus mengganti -drawRect:dalam subkelas yang tepat, bukan dalam kategori, dan kemudian menggunakan subkelas ini sebagai bilah navigasi Anda.
Yang Meyer
9

Setelah melakukan apa yang orang lain katakan di atas, yaitu:

navigationController?.navigationBar.setBackgroundImage(UIImage(), forBarMetrics: .default)
navigationController?.navigationBar.shadowImage = UIImage()
navigationController!.navigationBar.isTranslucent = true

... bilah navigasi saya masih putih . Jadi saya menambahkan baris ini:

navigationController?.navigationBar.backgroundColor = .clear

... dan voila! Sepertinya ini akan berhasil.

Clay Ellis
sumber
7

Jika Anda membuat dengan beta iOS 13.4 dan XCode 11.4 beta terbaru, jawaban yang diterima tidak akan berfungsi lagi. Saya telah menemukan cara lain, mungkin itu hanya bug dalam perangkat lunak beta, tapi saya menuliskannya di sana, untuk berjaga-jaga

(cepat 5)

import UIKit

class TransparentNavBar :UINavigationBar {
    override func awakeFromNib() {
        super.awakeFromNib()
        self.setBackgroundImage(UIImage(), for: .default)
        self.shadowImage = UIImage()
        self.isTranslucent = true
        self.backgroundColor = .clear
        if #available(iOS 13.0, *) {
            self.standardAppearance.backgroundColor = .clear
            self.standardAppearance.backgroundEffect = .none
            self.standardAppearance.shadowColor = .clear
        }
    }
}
Picci
sumber
Luar biasa! Sedang mencari perbaikan! Bagus sekali! Terima kasih!
Georg
5

Saya tahu topik ini sudah lama, tetapi jika orang ingin tahu cara melakukannya tanpa membebani metode drawRect.

Inilah yang Anda butuhkan:

self.navigationController.navigationBar.translucent = YES;
self.navigationController.navigationBar.opaque = YES;
self.navigationController.navigationBar.tintColor = [UIColor clearColor];
self.navigationController.navigationBar.backgroundColor = [UIColor clearColor];
Sander
sumber
1
Maaf, ini tidak benar. Anda masih harus mengganti metode drawRect
Sander
Kenapa ini salah? Tampaknya bekerja di iOS 6 sim. Tidak berfungsi di iOS 5? navigationBar.backgroundColor tampaknya tidak berdokumen.
Cristi
5

Kode di bawah ini membentang pada jawaban teratas yang dipilih untuk utas ini, untuk menghilangkan batas bawah dan mengatur warna teks:

  1. Dua baris kode terakhir dari kode ini mengatur transparansi. Saya meminjam kode itu dari utas ini dan berhasil dengan sempurna!

  2. Properti "clipsToBounds" adalah kode yang saya temukan yang menghilangkan garis batas bawah dengan ATAU tanpa set transparansi (jadi jika Anda memutuskan untuk menggunakan latar belakang putih / hitam / dll yang solid, sebagai gantinya, tidak akan ada garis perbatasan).

  3. Baris "tintColor" (baris kode 2) mengatur tombol punggungku menjadi abu-abu terang

  4. Saya menyimpan barTintColor sebagai cadangan. Saya tidak tahu mengapa transparansi tidak akan berfungsi, tetapi jika tidak, saya ingin bg putih saya seperti dulu

    let navigationBarAppearace = UINavigationBar.appearance()
    navigationBarAppearace.tintColor = UIColor.lightGray
    navigationBarAppearace.barTintColor = UIColor.white
    navigationBarAppearace.clipsToBounds = true
    navigationBarAppearace.isTranslucent = true
    navigationBarAppearace.setBackgroundImage(UIImage(), for: .default)
    navigationBarAppearace.shadowImage = UIImage()
Dave G
sumber
3

untuk Swift 3.0:

override func viewDidLoad() {
    super.viewDidLoad()

    navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
    navigationController?.navigationBar.shadowImage = UIImage()
    navigationController?.navigationBar.isTranslucent = true
}
Wilson
sumber
3

Solusi C # / Xamarin

NavigationController.NavigationBar.SetBackgroundImage(new UIImage(), UIBarMetrics.Default);
NavigationController.NavigationBar.ShadowImage = new UIImage();
NavigationController.NavigationBar.Translucent = true;
Mark Moeykens
sumber
2

Coba bagian kode berikut:

self.navigationController.navigationBar.translucent = YES;
Rusia
sumber
1

Cara lain yang berhasil bagi saya adalah dengan Subclass UINavigationBar Dan biarkan Metode drawRect kosong !!

@IBDesignable class MONavigationBar: UINavigationBar {


// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
override func drawRect(rect: CGRect) {
    // Drawing code
}}
M.Othman
sumber
1

Dalam Swift 4.2

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

(di viewWillAppear), dan kemudian di viewWillDisappear, untuk membatalkannya, masukkan

self.navigationController?.navigationBar.shadowImage = nil
self.navigationController?.navigationBar.isTranslucent = false
auspicious99
sumber
0

Apakah yang Anda maksud sepenuhnya transparan, atau menggunakan gaya hitam-tembus pandang yang terlihat di aplikasi Foto? Yang terakhir dapat Anda capai dengan mengatur barStylepropertinya UIBarStyleBlackTranslucent. Mantan ... Saya tidak yakin tentang. Jika Anda ingin item di dalamnya tetap terlihat, Anda mungkin harus melakukan beberapa penggalian di hierarki tampilan bilah dan menghapus tampilan yang mengandung latar belakangnya.

Noah Witherspoon
sumber
2
Maksudku yang pertama. Saya mencoba membuat kategori dan mengganti metode drawRect dari UINavigationBar (menggunakan CGContextClearRect), tetapi itu membuatnya benar-benar hitam. Item masih terlihat.
quano
0

Ini berfungsi untuk Swift 2.0.

navigationController!.navigationBar.setBackgroundImage(UIImage(), forBarMetrics: UIBarMetrics.Default)
navigationController!.navigationBar.shadowImage = UIImage()
navigationController!.navigationBar.translucent = true
Chris3643
sumber
0

Periksa RRViewControllerExtension , yang didedikasikan untuk manajemen tampilan bilah UINavigation.

dengan RRViewControllerExtension di proyek Anda, Anda hanya perlu menimpanya

-(BOOL)prefersNavigationBarTransparent;

di viewcontroller Anda.

panel navigasi transparan

Roen
sumber
-2
extension UINavigationBar {
var isTransperent: Bool {
        get {
            return false // Just to satisfy property
        }
        set {
            if newValue == true {
                self.shadowImage   = UIImage()
                self.isTranslucent = true
                self.setBackgroundImage(UIImage(), for: .default)
            }else{
                self.shadowImage   = UIImage()
                self.isTranslucent = false
                self.setBackgroundImage(nil, for: .default)
            }
        }
    }
}
Dheeraj
sumber