วิธีการวาด UIToolbar หรือ UINavigationBar แบบโปร่งใสใน iOS7


88

ผมอยากจะโปร่งใสทั้งหมดและUIToolbar / หรือ UINavigationBarฉันได้ลองใช้คาถาต่างๆที่แนะนำสำหรับ iOS 5 ก่อนและหลัง แต่ดูเหมือนจะไม่มีผลอีกต่อไป

สิ่งนี้จะสำเร็จได้อย่างไรใน iOS 7?


สำหรับลูกหลาน - ฉันใช้ self.edgesForExtendedLayout = UIRectEdgeNone โดยไม่ได้ตั้งใจซึ่งป้องกันไม่ให้มุมมองขยายออกไปใต้แถบเครื่องมือ
Ben Packard

คำตอบ:


303

Swift 3 (iOS 10)

โปร่งใส UIToolbar

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

โปร่งใส UINavigationBar

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

รวดเร็ว <3

โปร่งใส UIToolbar

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

โปร่งใส UINavigationBar

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

วัตถุประสงค์ -C

โปร่งใส UIToolbar

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

โปร่งใส UINavigationBar

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

อภิปรายผล

การตั้งค่าtranslucentเป็นYESบนแถบการนำทางเป็นการหลอกลวงเนื่องจากพฤติกรรมที่กล่าวถึงในUINavigationBarเอกสารประกอบ ฉันจะรายงานส่วนที่เกี่ยวข้องที่นี่:

หากคุณตั้งค่าคุณสมบัตินี้เป็นYESบนแถบนำทางที่มีภาพพื้นหลังแบบกำหนดเองแบบทึบแถบนำทางจะใช้ความทึบของระบบที่น้อยกว่า 1.0 กับรูปภาพ


ผลลัพธ์สุดท้าย

ผลลัพธ์สุดท้าย


1
คุณยืนยันว่าเวอร์ชันแถบเครื่องมือใช้งานได้บน iOS7 หรือไม่? ฉันได้รับแถบเครื่องมือสีเข้มและงานนำเสนอที่กะพริบแปลก ๆ
Ben Packard

2
ภาพหน้าจอมาจากiOS 7เครื่องจำลอง
Gabriele Petronella

นอกจากนี้ฉันเพิ่งเรียกใช้แอปทดสอบบน iPhone 5 ด้วย iOS 7 และทำงานได้ตามที่คาดไว้
Gabriele Petronella

1
ทำได้ดีมากวิธีที่ผิด / ไม่ดีมากมายในการทำสิ่งนี้ใน SO
เล่นพิเรน

2
หากใช้ edgeForExtendedLayout = UIRectEdgeNone คุณอาจต้องการใช้การเปลี่ยนแบบกำหนดเอง เนื่องจากไม่เช่นนั้นเมื่อกดมุมมองการเปลี่ยนเริ่มต้นจะสร้างการสั่นไหวสีเข้มใต้แถบโปร่งใสระหว่างการเคลื่อนไหว FYI นี่คือแหล่งข้อมูลอย่างรวดเร็วสำหรับการเปลี่ยนการเลื่อนขั้นพื้นฐาน: gist.github.com/ArtFeel/7690431
แอนนา

8

หากคุณต้องการทำผ่านแอพทั้งหมดคุณควรใช้ UIAppearance proxy (iOS5 +):

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

เอกสาร: https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIAppearance_Protocol/Reference/Reference.html

บทความ: http://nshipster.com/uiappearance/


เพียงแค่บันทึกไว้สำหรับคนที่มองหาสิ่งนี้ - ใส่รหัสนี้ใน AppDelegate ของคุณ didFinishLaunchingWithOptions สำหรับวิธีที่รวดเร็วและสกปรกในการนำไปใช้
Shaun F

คุณยังสามารถตั้งค่าพร็อกซีลักษณะนี้ให้ใช้ได้เฉพาะกับUINavigationControllerคลาสย่อยที่เฉพาะเจาะจงเท่านั้นเช่นคลาสย่อยที่คุณต้องการใช้กับลักษณะการทำงานนี้
Evan R


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

สิ่งที่ฉันสะดุดคือถ้าฉันสร้างคลาสย่อยUINavigationBarแล้วสร้าง-(void)drawRect:เมธอดว่างเปล่าฉันจะได้แถบนำทางที่โปร่งใส ฉันทดสอบสิ่งนี้ใน iOS 7 * เท่านั้น แต่ดูเหมือนจะใช้ได้!

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.