Cách vẽ một thanh UIToolbar hoặc UINavigationBar trong suốt trong iOS7


88

Tôi muốn một hoàn toàn minh bạch UIToolbarvà / hoặc UINavigationBar. Tôi đã thử các câu thần chú khác nhau được đề xuất cho trước và sau iOS 5 nhưng dường như không có câu nào hoạt động nữa.

Làm thế nào điều này có thể được thực hiện trong iOS 7?


Đối với hậu thế - tôi đã nhầm lẫn khi sử dụng self.edgesForExtendedLayout = UIRectEdgeNone, điều này ngăn chế độ xem mở rộng dưới thanh công cụ.
Ben Packard

Câu trả lời:


303

Swift 3 (iOS 10)

Trong suốt UIToolbar

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

Trong suốt UINavigationBar

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

Swift <3

Trong suốt UIToolbar

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

Trong suốt UINavigationBar

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

Objective-C

Trong suốt UIToolbar

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

Trong suốt UINavigationBar

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

Thảo luận

Đặt translucentthành YEStrên thanh điều hướng thực hiện thủ thuật, do một hành vi được thảo luận trong UINavigationBartài liệu. Tôi sẽ báo cáo ở đây phần liên quan:

Nếu bạn đặt thuộc tính này YEStrên thanh điều hướng có hình nền tùy chỉnh mờ đục, thanh điều hướng sẽ áp dụng độ mờ hệ thống nhỏ hơn 1,0 cho hình ảnh.


Kết quả cuối cùng

kết quả cuối cùng


1
Bạn đã xác nhận phiên bản thanh công cụ hoạt động trên iOS7 chưa? Tôi nhận được một thanh công cụ tối và nhấp nháy lạ trên bản trình bày.
Ben Packard

2
Ảnh chụp màn hình là từ iOS 7mô phỏng
Gabriele Petronella

Ngoài ra, tôi vừa chạy một ứng dụng thử nghiệm trên iPhone 5 của mình với iOS 7 và nó hoạt động như mong đợi.
Gabriele Petronella

1
Ngon lành, rất nhiều sai / cách xấu để làm điều này ra có trên SO
pfrank

2
Nếu sử dụng edgeForExtendedLayout = UIRectEdgeNone, bạn có thể muốn triển khai các chuyển đổi tùy chỉnh. Bởi vì nếu không, khi đẩy lượt xem, quá trình chuyển đổi mặc định sẽ tạo ra nhấp nháy tối dưới thanh trong suốt trong quá trình hoạt ảnh. FYI, đây là một tài nguyên nhanh chóng cho quá trình chuyển đổi trượt cơ bản: gist.github.com/ArtFeel/7690431
anna

8

Nếu bạn muốn thực hiện việc đó thông qua toàn bộ ứng dụng, bạn nên sử dụng proxy UIAppearance (iOS5 +):

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

Tài liệu: https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIAppearance_Protocol/Reference/Reference.html

Bài viết: http://nshipster.com/uiappearance/


Chỉ là một lưu ý cho những người đang xem - hãy đặt mã này vào AppDelegate didFinishLaunchingWithOptions của bạn để có một cách nhanh chóng và tiện lợi để áp dụng điều này.
Shaun F

Bạn cũng có thể đặt proxy giao diện này chỉ hoạt động với các UINavigationControllerlớp con cụ thể — tức là những lớp mà bạn muốn áp dụng hành vi này.
Evan R

2

Thử:

[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

Một điều tôi tình cờ gặp là nếu tôi tạo một lớp con UINavigationBarvà sau đó tạo một -(void)drawRect:phương thức trống , tôi sẽ nhận được một thanh điều hướng trong suốt. Tôi chỉ thử nghiệm điều này trong iOS 7. *, nhưng nó dường như hoạt động!

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.