堆棧內存溢出
  簡體   English   中英

透明的iOS導航欄

[英]Transparent iOS navigation bar

 原文  2014-09-15 10:24:01  2   23    ios/ iphone/ swift/ uinavigationbar

問題描述

我正在創建一個應用程序，我在互聯網上瀏覽過，我想知道他們是如何像這樣制作這個透明的 UINavigationBar 的：

在此處輸入圖像描述

我在我的 appdelegate 中添加了以下內容：

UINavigationBar.appearance().translucent = true

但這只是讓它看起來像下面這樣：

在此處輸入圖像描述

如何使導航欄像第一張圖片一樣透明？

23 個解決方案

解決方案1
 311 已采納  2014-09-15 10:34:31

您可以為半透明應用如下所示的導航欄圖像。

目標-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];

斯威夫特 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

解決方案2
 132  2016-02-09 01:28:44

快速解決方案

這是我找到的最好的方法。 您可以將其粘貼到您的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
}

斯威夫特 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 中使導航欄對下面的圖像透明

解決方案3
 59  2019-08-17 20:48:55

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
}

解決方案4
 15  2016-12-15 07:37:44

Swift 3：透明導航欄的擴展

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

解決方案5
 13  2018-11-08 07:03:17

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 }

希望它有用。

解決方案6
 9  2015-06-06 17:21:00

我能夠通過這種方式迅速完成這項工作：

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
}

解決方案7
 7  2016-02-15 10:28:40

它對我有用：

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

解決方案8
 7  2020-07-08 05:13:30

我一直在努力解決這個問題，但我在使用不同用戶在此處提供的回復時遇到了問題。 問題是在 iOS 13+ 上我的 NavigationBar 透明圖像后面有一個白框

在此處輸入圖片說明

我的解決方案是這個

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

更新

感謝@TMin

如果您使用 tableView/CollectionView，您會注意到滾動時會出現 1 點陰影。 添加 navBar?.scrollEdgeAppearance = nil 來擺脫這個陰影。

希望這可以幫助任何有同樣問題的人

解決方案9
 6  2014-09-15 10:37:12

設置導航欄的背景屬性，例如

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

（如果你沒有導航控制器，你可能需要稍微改變一下，但這應該讓你知道該怎么做。）

還要確保下面的視圖實際上延伸到欄下方。

解決方案10
 4  2019-06-25 11:38:09

將此添加到您的加載中

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

解決方案11
 3  2018-10-04 17:46:12

如果您希望能夠在 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
    }

但要記住的一件重要事情是單擊故事板中的此按鈕。 我有很長一段時間的跳躍顯示問題。 確保你設置了這個： 在此處輸入圖片說明

然后，當您更改導航欄的半透明度時，無論導航欄的可見性如何，它都不會導致視圖跳轉，因為視圖一直延伸到頂部。

解決方案12
 2  2014-12-06 16:34:13

試試這個，如果你還需要支持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];

解決方案13
 2  2019-02-18 19:39:22

對於那些尋找 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;

解決方案14
 1  2016-12-28 08:39:21

您通過傳遞導航控制器和您想在導航欄上設置的顏色來調用的實用方法。 對於透明，您可以使用UIColor類的clearColor 。

對於目標 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
}

解決方案15
 0  2021-04-24 04:04:23

寫下這兩行：

 navigationController?.navigationBar.isTranslucent = true
 navigationController?.navigationBar.backgroundColor = .clear

在 iOS 13 中為我工作

解決方案16
 0  2021-05-14 17:09:09

這里沒有一個答案完全適合我。 這使得導航欄完全透明 - 在 iOS 14 和 iOS 11（目標 C）上測試：

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

解決方案17
 0  2021-06-16 09:25:07

iOS 13.0+ 引入了 UINavigationBarAppearance，因此在 iOS 13.0+ 上會出現這個問題

用這個來解決。

更改導航欄外觀 使用 UINavigationBarAppearance 和 UIBarButtonItemAppearance 來更改導航欄的外觀。

// 用紅色文本制作導航欄的標題。

if #available(iOS 13, *) {
        let appearance = UINavigationBarAppearance()
        appearance.configureWithOpaqueBackground()
        appearance.backgroundColor = UIColor.systemRed
        appearance.titleTextAttributes = [.foregroundColor: UIColor.lightText] // With a red background, make the title more readable.
        navigationItem.standardAppearance = appearance
        navigationItem.scrollEdgeAppearance = appearance
        navigationItem.compactAppearance = appearance // For iPhone small navigation bar in landscape.
    }

解決方案18
 0  2021-09-23 12:48:34

任何正在尋找 iOS 15+ 工作版本的人，這對我shadowImage ，因為setBackgroundImage / shadowImage的舊技術不再有效。

設置透明：

func setTransparent() {
    backgroundColor = .clear
    isTranslucent = true

    standardAppearance.shadowColor = .clear
    standardAppearance.backgroundColor = .clear
    standardAppearance.backgroundEffect = nil
    scrollEdgeAppearance = standardAppearance
}

要刪除透明度：

func removeTransparent() {
    setBackgroundImage(nil, for: .default)
    shadowImage = nil
    backgroundColor = .white
    isTranslucent = false

    let appearance = UINavigationBarAppearance()
    appearance.configureWithOpaqueBackground()
    standardAppearance = appearance
    scrollEdgeAppearance = standardAppearance
}

解決方案19
 0  2021-09-27 14:39:12

我將導航欄配置實現為半透明並切換到 iOS 15 及更早版本的默認狀態：

extension UINavigationBar {
    static let defaultBackgroundColor = UIColor.red
    static let defaultTintColor = UIColor.white
    
    func setTranslucent(tintColor: UIColor, titleColor: UIColor) {
        if #available(iOS 15, *) {
            let appearance = UINavigationBarAppearance()
            appearance.configureWithTransparentBackground()
            appearance.titleTextAttributes = [.foregroundColor: titleColor]
            standardAppearance = appearance
            scrollEdgeAppearance = appearance
        } else {
            titleTextAttributes = [.foregroundColor: titleColor]
            setBackgroundImage(UIImage(), for: UIBarMetrics.default)
            shadowImage = UIImage()
        }
        isTranslucent = true
        self.tintColor = tintColor
    }
    
    func setDefaultState() {
        isTranslucent = false
        clipsToBounds = false
        
        if #available(iOS 15, *) {
            let appearance = UINavigationBarAppearance()
            appearance.configureWithOpaqueBackground()
            appearance.backgroundColor = UINavigationBar.defaultBackgroundColor
            appearance.titleTextAttributes = [.foregroundColor: UINavigationBar.defaultTintColor]
            
            UINavigationBar.appearance().standardAppearance = appearance
            UINavigationBar.appearance().scrollEdgeAppearance = appearance
        } else {
            setBackgroundImage(UIImage(), for: UIBarPosition.any, barMetrics: UIBarMetrics.defaultPrompt)
            shadowImage = UIImage()
            barTintColor = UINavigationBar.defaultBackgroundColor
            titleTextAttributes = [.foregroundColor: UINavigationBar.defaultTintColor]
        }
        
        tintColor = UINavigationBar.defaultTintColor
    }
}

解決方案20
 0  2021-12-15 09:16:42

這對 swift 4/5 的用戶來說非常有效。

func setUpNavBar(){
    navigationItem.title = "Flick"
    navigationController?.navigationBar.shadowImage = UIImage()
    self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: UIBarMetrics.default)
    self.navigationController?.navigationBar.shadowImage = UIImage()
    self.navigationController?.navigationBar.isTranslucent = true
    self.navigationController?.view.backgroundColor = UIColor.clear
    navigationController?.navigationBar.titleTextAttributes = [.foregroundColor: UIColor.white]
}

解決方案21
 0  2022-04-08 16:21:00

IOS15版本

extension UIViewController {

    func clearNavigationBar(clear: Bool) {
        if clear {
            let appearance = UINavigationBarAppearance()
            appearance.configureWithTransparentBackground()
            self.navigationController?.navigationBar.standardAppearance = appearance
            self.navigationController?.navigationBar.scrollEdgeAppearance = appearance
        } else {
            let appearance = UINavigationBarAppearance()
            appearance.configureWithOpaqueBackground()
            self.navigationController?.navigationBar.standardAppearance = appearance
            self.navigationController?.navigationBar.scrollEdgeAppearance = appearance
        }
    }
}


class ViewController: UIViewController {

    override func viewWillAppear(_ animated: Bool) {
         super.viewWillAppear(animated)
         clearNavigationBar(clear: true)
    }
    
    override func viewWillDisappear(_ animated: Bool) {
         super.viewWillDisappear(animated)
         clearNavigationBar(clear: false)
    }
}

解決方案22
 0  2022-05-31 08:15:37

對於以上所有 iOS 版本

if #available(iOS 15.0, *) {
        let appearance = UINavigationBarAppearance()
        appearance.configureWithOpaqueBackground()
        appearance.backgroundImage = UIColor.clear.imageWithColor(width: UIScreen.main.bounds.size.width, height: 84)
        appearance.shadowImage = UIImage()
        appearance.titleTextAttributes = [NSAttributedString.Key.foregroundColor : UIColor.black ,NSAttributedString.Key.font : UIFont(name: "SF UI Display Semibold", size: 18) ?? UIFont()]
        appearance.titlePositionAdjustment = UIOffset(horizontal: 0, vertical: 2)
        self.navigationBar.standardAppearance = appearance
    } else {
        self.navigationBar.setBackgroundImage(UIImage(), for: UIBarMetrics.default)
        self.navigationBar.shadowImage = UIImage()
        self.navigationBar.titleTextAttributes = [NSAttributedString.Key.foregroundColor : UIColor.black ,NSAttributedString.Key.font : UIFont(name: "SF UI Display Semibold", size: 18) ?? UIFont()]
        self.navigationBar.setTitleVerticalPositionAdjustment(2, for: UIBarMetrics.default)
    }


func imageWithColor(width: CGFloat, height: CGFloat) -> UIImage {
    let size = CGSize(width: width, height: height)
    return UIGraphicsImageRenderer(size: size).image { rendererContext in
        self.setFill()
        rendererContext.fill(CGRect(origin: .zero, size: size))
    }
}

解決方案23
 0  2022-12-21 09:35:21

只需在您的應用程序委托中添加以下代碼行

       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

然后覆蓋視圖控制器內的自定義導航欄，並確保在它消失后重置

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 透明導航欄 iOS 13 iOS中的透明導航欄和標簽欄 ios 11 透明導航欄 在iOS 7中制作透明的導航欄和透明的標簽欄。 如何在iOS 10中使導航欄透明 iOS 15 導航欄透明問題 如何在iOS 11中將導航欄設置為透明 iOS - 如何使導航欄的子視圖透明？ 透明的導航欄，但保持iOS模糊 iOS 11導航欄透明，帶有大標題
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM