Cara menggambar UIToolbar transparan atau UINavigationBar di iOS7

88

Saya ingin sepenuhnya transparan UIToolbardan / atau UINavigationBar. Saya telah mencoba berbagai mantra yang disarankan untuk sebelum dan sesudah iOS 5 tetapi tampaknya tidak ada yang berhasil lagi.

Bagaimana ini bisa dilakukan di iOS 7?

ios uinavigationcontroller uinavigationbar ios7 uitoolbar Ben Packard
sumber
Untuk anak cucu - Saya keliru menggunakan self.edgesForExtendedLayout = UIRectEdgeNone, yang mencegah tampilan meluas di bawah toolbar.
Ben Packard

Jawaban:

303

Swift 3 (iOS 10)

Transparan UIToolbar

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

Transparan UINavigationBar

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

Cepat <3

Transparan UIToolbar

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

Transparan UINavigationBar

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

Objective-C

Transparan UIToolbar

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

Transparan UINavigationBar

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

Diskusi

Menyetel 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 khusus buram, bilah navigasi akan menerapkan opasitas sistem kurang dari 1,0 ke gambar.

Hasil akhir

hasil akhir

Gabriele Petronella
sumber
1
Sudahkah Anda mengonfirmasi bahwa versi bilah alat berfungsi di iOS7? Saya mendapatkan toolbar gelap dan tampilan aneh berkedip.
Ben Packard
2
Tangkapan layar berasal dari iOS 7simulator
Gabriele Petronella
Saya juga baru saja menjalankan aplikasi uji coba di iPhone 5 saya dengan iOS 7 dan berfungsi seperti yang diharapkan.
Gabriele Petronella
1
Bagus sekali, begitu banyak cara yang salah / buruk untuk melakukan ini di luar sana pada SO
pfrank
2
Jika menggunakan edgeForExtendedLayout = UIRectEdgeNone, Anda mungkin ingin menerapkan transisi kustom. Karena jika tidak, saat mendorong tampilan, transisi default akan membuat flicker gelap di bawah bilah transparan selama animasi. FYI, berikut ini sumber daya cepat untuk transisi geser dasar: gist.github.com/ArtFeel/7690431
anna
8

Jika Anda ingin melakukannya melalui seluruh aplikasi, Anda harus menggunakan proxy UIApearance (iOS5 +):

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

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

Artikel: http://nshipster.com/uiappearance/

Adam Waite
sumber
Hanya catatan untuk orang-orang yang melihat ini - letakkan kode ini di AppDelegate didFinishLaunchingWithOptions Anda untuk cara cepat dan kotor agar ini diterapkan.
Shaun F
Anda juga dapat menyetel proxy tampilan ini untuk hanya bekerja dengan UINavigationControllersubkelas tertentu — yaitu, subclass yang Anda inginkan agar perilaku ini diterapkan.
Evan R
2

Mencoba:

[navBar setBackgroundImage:[UIImage alloc] forBarMetrics:UIBarMetricsDefault];
Leo Natan
sumber
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
teriak
sumber
0

Sesuatu yang saya temukan adalah bahwa jika saya membuat subclass UINavigationBardan kemudian membuat -(void)drawRect:metode kosong , saya akan mendapatkan bilah navigasi transparan. Saya hanya menguji ini di iOS 7. *, tetapi sepertinya berhasil!

jakenberg
sumber