ios แถบนำทางโปร่งใส


121

ฉันกำลังสร้างแอปและฉันได้เปิดดูบนอินเทอร์เน็ตและฉันสงสัยว่าพวกเขาสร้างแถบนำทางที่โปร่งใสเช่นนี้ได้อย่างไร:

ใส่คำอธิบายภาพที่นี่

ฉันได้เพิ่มสิ่งต่อไปนี้เช่นในผู้ร่วมประชุมของฉัน:

UINavigationBar.appearance().translucent = true

แต่สิ่งนี้ทำให้ดูเหมือนดังต่อไปนี้:

ใส่คำอธิบายภาพที่นี่

ฉันจะทำให้แถบนำทางโปร่งใสเหมือนภาพแรกได้อย่างไร


ด้วยรหัสที่ฉันไม่รู้ แต่ถ้าคุณใช้ CSS ได้ดีคุณสามารถใช้กรอบงาน (Pixate: freestyle.org ) และสามารถใช้สไตล์ CSS กับแถบนำทางของคุณได้ :)!
Nicolas Charvoz

คำตอบ:


286

คุณสามารถใช้ Navigation Bar Image เช่นด้านล่างสำหรับ 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];

Swift 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

หวังว่าจะช่วยคุณได้ .. !


4
เมื่อฉัน setBackgroundImage มันจะลบ barTintColor?
Peter Pik

คุณสามารถรับภาพของแถบการนำทาง .. ตามความต้องการของคุณ .. และนำไปใช้กับแถบนำทางด้านบน .. (รูปภาพที่ต้องการใช้กับแถบนำทาง)
Vidhyanand

1
ไม่จำเป็นต้องตั้งค่า backgroundColor ของ navigationController
matt bezark

4
ด้วยวิธีนี้ฉันจะได้รับ navigationBar สีดำมีความคิดใด ๆ ?
Carlos del Blanco

1
ไม่เป็นไปตามที่คาดไว้ เมื่อคุณทำคุณจะไม่มีผนังโปร่งแสงเหมือนอัลฟ่า 0.7 ด้านขวาบวกกับแถบสถานะด้วย หากคุณทำสิ่งนี้บน iOS 13 คุณจะมีเพียงรูปสี่เหลี่ยมผืนผ้าที่ดูดีและเหนือกว่านั้นคือ STATUS BAR CRYSTAL CLEAR ซึ่งผู้เขียนคำถามนั้นชัดเจนและเฉพาะเจาะจง
Marlhex

122

โซลูชันที่รวดเร็ว

นี่เป็นวิธีที่ดีที่สุดที่ฉันพบ คุณสามารถวางลงในวิธีการของ appDelegate didFinishLaunchingWithOptions :

สวิฟต์ 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
}

ที่มา: ทำให้แถบนำทางโปร่งใสเกี่ยวกับภาพด้านล่างใน iOS 8.1


4
โซลูชัน Swift 3 ของคุณทำให้แถบของฉันเป็นสีขาวธรรมดา
Jose Ramirez

@JozemiteApps ลองสร้างโครงการ Xcode ใหม่และวางโค้ดลงไปควรใช้เวลาเพียง 3 นาทีเพื่อยืนยันว่าเป็นรหัสของฉันด้านบนหรือบางอย่างเกี่ยวกับโครงการของคุณที่ทำให้เกิดสิ่งนี้
Dan Beaulieu

2
ฉันยังมี navibar สีขาวธรรมดาและไม่มี navibar แบบโปร่งใส
Kingalione

มันใช้งานได้ดีขอบคุณ! คุณรู้หรือไม่ว่าคุณจะใช้มันอย่างไรเพื่อให้แถบนำทางบน ViewControllers ที่ต้องการเท่านั้นโปร่งใส?
RufusV

@JoseRamirez น่าจะเป็นพื้นหลังของ viewController ที่คุณเห็น คุณต้องเปลี่ยนข้อ จำกัด ด้านบนของมุมมองแรกเพื่อให้สอดคล้องกับมุมมองขั้นสูงไม่ใช่พื้นที่ปลอดภัยหรือระยะขอบ
turingtested

27

Swift 5 ใช้กับคอนโทรลเลอร์มุมมองปัจจุบันเท่านั้น

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: ส่วนขยายสำหรับแถบนำทางแบบโปร่งใส

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

12

โซลูชัน Swift 4.2:สำหรับพื้นหลังโปร่งใส:

  1. สำหรับแนวทางทั่วไป:

    override func viewDidLoad() {
        super.viewDidLoad()
    
        self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: UIBarMetrics.default)
        self.navigationController?.navigationBar.shadowImage = UIImage()
        self.navigationController?.navigationBar.isTranslucent = true
    
    }
  2. สำหรับวัตถุเฉพาะ:

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

หวังว่าจะเป็นประโยชน์


คุณอ้างถึงวัตถุnavBarอะไร
Sergey Gamayunov

@SergeyGamayunov navBarที่นี่หมายถึงวัตถุของ UINavigationBar
Ümañgßürmån

นั่นคือสิ่งที่เขาหมายถึง ... ให้ navBar = self.navigationController?
.navigationBar

8

ฉันสามารถทำสิ่งนี้ได้อย่างรวดเร็วด้วยวิธีนี้:

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

ที่ฉันสร้างวิธียูทิลิตี้ต่อไปนี้ในUIColorหมวดหมู่:

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

นี่น่าจะเป็นคำตอบอันดับต้น ๆ !
Mihail Salari

7

สิ่งที่ได้ผลสำหรับฉัน:

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

5

ตั้งค่าคุณสมบัติพื้นหลังของ navigationBar ของคุณเช่น

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

(คุณอาจต้องเปลี่ยนแปลงเล็กน้อยหากคุณไม่มีตัวควบคุมการนำทาง แต่ควรให้แนวคิดว่าต้องทำอย่างไร)

ตรวจสอบให้แน่ใจด้วยว่ามุมมองด้านล่างขยายออกไปใต้แถบจริง


สิ่งนี้ทำให้ฉันได้รับสิ่งต่อไปนี้: i.stack.imgur.com/GT3WV.pngฉันจะทำให้สีแดงขึ้นอีกเล็กน้อยเหมือนลิงค์แรก (รูปภาพ) ที่ฉันโพสต์ได้อย่างไร
Peter Pik

คุณสามารถเล่นกับค่าอัลฟาและเปลี่ยนจาก 0.5 เป็นอะไรก็ได้ระหว่าง 0.0 ถึง 1.0 และอย่างที่ฉันพูดไปตรวจสอบให้แน่ใจว่ามุมมองด้านล่างอยู่ใต้แถบนำทางมิฉะนั้นคุณจะไม่เห็นเนื้อหาใด ๆ ที่ส่องผ่านแถบ หากคุณใช้ Interface Builder คุณสามารถลากและจัดแนวขอบด้านบนของมุมมองนั้นกับขอบด้านบนของหน้าจอได้
Atomix

2

ลองใช้วิธีนี้ได้ผลสำหรับฉันหากคุณต้องการรองรับ ios7 มันขึ้นอยู่กับความโปร่งใสของ 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

สำหรับผู้ที่มองหาโซลูชัน OBJC ที่จะเพิ่มในเมธอด 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

หากคุณต้องการทำสิ่งนี้แบบเป็นโปรแกรมใน swift 4 ในขณะที่อยู่ในมุมมองเดิม

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
    }

สิ่งสำคัญอย่างหนึ่งที่ต้องจำไว้คือการคลิกปุ่มนี้ในกระดานเรื่องราวของคุณ ฉันมีปัญหากับจอแสดงผลแบบกระโดดเป็นเวลานาน ตรวจสอบให้แน่ใจว่าคุณได้ตั้งค่านี้:ใส่คำอธิบายภาพที่นี่

จากนั้นเมื่อคุณเปลี่ยนความโปร่งแสงของแถบนำทางจะไม่ทำให้มุมมองกระโดดเนื่องจากมุมมองขยายไปจนถึงด้านบนสุดโดยไม่คำนึงถึงการแสดงผลของแถบนำทาง


1

เพิ่มสิ่งนี้ในการโหลดของคุณ

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

วิธียูทิลิตี้ที่คุณเรียกใช้โดยส่ง navigationController และสีที่คุณต้องการตั้งค่าบนแถบนำทาง สำหรับโปร่งใสคุณสามารถใช้clearColorของUIColorระดับ

เพื่อวัตถุประสงค์ 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];
}

สำหรับ 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

ฉันได้ดำเนินการเรื่องนี้และประสบปัญหาในการใช้คำตอบที่ผู้ใช้รายอื่นให้ไว้ที่นี่ ปัญหาคือกล่องสีขาวด้านหลังรูปภาพโปร่งใส NavigationBar ของฉันบน iOS 13+

ใส่คำอธิบายภาพที่นี่

ทางออกของฉันคืออันนี้

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

หวังว่านี่จะช่วยทุกคนที่มีปัญหาเดียวกัน

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