更改导航栏底部边框颜色 Swift

Posted 2023-03-13

【中文标题】更改导航栏底部边框颜色 Swift

【英文标题】：Change navigation bar bottom border color Swift

【发布时间】：2016-07-13 15:00:02

【问题描述】：

它适用于

import UIKit

class ViewController: UIViewController 

override func viewDidLoad() 
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.

    self.navigationController?.navigationBar.setBackgroundImage(UIImage(), forBarMetrics: .Default)
    self.navigationController?.navigationBar.shadowImage = UIColor.redColor().as1ptImage()




override func didReceiveMemoryWarning() 
    super.didReceiveMemoryWarning()
    // Dispose of any resources that can be recreated.





extension UIColor 
    func as1ptImage() -> UIImage 
        UIGraphicsBeginImageContext(CGSizeMake(1, 1))
        let ctx = UIGraphicsGetCurrentContext()
        self.setFill()
        CGContextFillRect(ctx, CGRect(x: 0, y: 0, width: 1, height: 1))
        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return image
    

但是当我添加 UITableView 时它不会出现在上面，当我添加 UISearchView 时它会出现但会删除导航栏。

有人知道怎么解决吗？

【参考方案1】：

您必须调整导航栏的shadowImage 属性。

试试这个。我在 UIColor 上创建了一个类别作为助手，但您可以按照自己喜欢的方式进行重构。

extension UIColor 
    func as1ptImage() -> UIImage 
        UIGraphicsBeginImageContext(CGSizeMake(1, 1))
        let ctx = UIGraphicsGetCurrentContext()
        self.setFill()
        CGContextFillRect(ctx, CGRect(x: 0, y: 0, width: 1, height: 1))
        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return image
    

选项 1：在单个导航栏上

然后在您的视图控制器中（将 UIColor 更改为您喜欢的）：

// We can use a 1px image with the color we want for the shadow image
self.navigationController?.navigationBar.shadowImage = UIColor.redColor().as1ptImage()

// We need to replace the navigation bar's background image as well 
// in order to make the shadowImage appear. We use the same 1px color tecnique
self.navigationController?.navigationBar.setBackgroundImage(UIColor.yellowColor‌​().as1ptImage(), forBarMetrics: .Default)    

选项 2：在所有导航栏上使用外观代理

不用在每个导航栏上设置背景图片和阴影图片，可以依赖 UIAppearance 代理。您可以尝试将这些行添加到您的 AppDelegate，而不是在 viewDidLoad 中添加之前的行。

// We can use a 1px image with the color we want for the shadow image
UINavigationBar.appearance().shadowImage = UIColor.redColor().as1ptImage()

// We need to replace the navigation bar's background image as well 
// in order to make the shadowImage appear. We use the same 1px color technique
UINavigationBar.appearance().setBackgroundImage(UIColor.yellowColor().as1ptImage(), forBarMetrics: .Default)

【讨论】：

谢谢，我应该把扩展 UIColor 放在哪里？

随心所欲。如果你有其他 UIColor 扩展，你可以把它们放在一起，或者你可以为这个扩展创建一个新文件，或者你可以将扩展设为私有并与 UIViewController 类一起使用。

我之所以问，是因为它显示了一条错误消息“声明仅在文件范围内有效”。

是的，你不能把放在你的班级里。成功了吗？

我正在尝试将它添加到 UITableView 上，但它不起作用。我也试图将它添加到搜索视图上，它可以工作，但会删除导航栏的颜色。知道如何解决这个问题吗？

【参考方案2】：

@TheoF、@Alessandro 和 @Pavel 的精彩贡献。

这就是我所做的……

斯威夫特 4

extension UIColor 

    /// Converts this `UIColor` instance to a 1x1 `UIImage` instance and returns it.
    ///
    /// - Returns: `self` as a 1x1 `UIImage`.
    func as1ptImage() -> UIImage 
        UIGraphicsBeginImageContext(CGSize(width: 1, height: 1))
        setFill()
        UIGraphicsGetCurrentContext()?.fill(CGRect(x: 0, y: 0, width: 1, height: 1))
        let image = UIGraphicsGetImageFromCurrentImageContext() ?? UIImage()
        UIGraphicsEndImageContext()
        return image
    

在viewDidLoad()中使用它：

/* In this example, I have a ViewController embedded in a NavigationController in IB. */

// Remove the background color.
navigationController?.navigationBar.setBackgroundImage(UIColor.clear.as1ptImage(), for: .default)

// Set the shadow color.
navigationController?.navigationBar.shadowImage = UIColor.gray.as1ptImage()

【参考方案3】：

将@alessandro-orru 的答案放在一个扩展中

extension UINavigationController 

    func setNavigationBarBorderColor(_ color:UIColor) 
        self.navigationBar.shadowImage = color.as1ptImage()
    


extension UIColor 

    /// Converts this `UIColor` instance to a 1x1 `UIImage` instance and returns it.
    ///
    /// - Returns: `self` as a 1x1 `UIImage`.
    func as1ptImage() -> UIImage 
        UIGraphicsBeginImageContext(CGSize(width: 1, height: 1))
        setFill()
        UIGraphicsGetCurrentContext()?.fill(CGRect(x: 0, y: 0, width: 1, height: 1))
        let image = UIGraphicsGetImageFromCurrentImageContext() ?? UIImage()
        UIGraphicsEndImageContext()
        return image
    

然后在您的视图控制器中添加：

self.navigationController?.setNavigationBarBorderColor(UIColor.red)

【讨论】：

我更喜欢这个答案！干净简单，在 Swift 4+ 中工作

【参考方案4】：

从 ios 13 开始，您可以将 UINavigationBarAppearance() 类与 shadowColor 属性一起使用：

if #available(iOS 13.0, *) 
  let style = UINavigationBarAppearance()
  style.shadowColor = UIColor.clear // Effectively removes the border
  navigationController?.navigationBar.standardAppearance = style

  // Optional info for follow-ups:
  // The above will override other navigation bar properties so you may have to assign them here, for example:
  //style.buttonAppearance.normal.titleTextAttributes = [.font: UIFont(name: "YourFontName", size: 17)!]
  //style.backgroundColor = UIColor.orange
  //style.titleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.white,
                               NSAttributedString.Key.font: UIFont(name: "AnotherFontName", size: 20.0)!]
 else 
  // Fallback on earlier versions

【参考方案5】：

Swift 4.0 - 5.2 的解决方案

这是用于更改底部导航栏线的高度和颜色的小扩展

extension UINavigationController

    func addCustomBottomLine(color:UIColor,height:Double)
    
        //Hiding Default Line and Shadow
        navigationBar.setValue(true, forKey: "hidesShadow")
    
        //Creating New line
        let lineView = UIView(frame: CGRect(x: 0, y: 0, width:0, height: height))
        lineView.backgroundColor = color
        navigationBar.addSubview(lineView)
    
        lineView.translatesAutoresizingMaskIntoConstraints = false
        lineView.widthAnchor.constraint(equalTo: navigationBar.widthAnchor).isActive = true
        lineView.heightAnchor.constraint(equalToConstant: CGFloat(height)).isActive = true
        lineView.centerXAnchor.constraint(equalTo: navigationBar.centerXAnchor).isActive = true
        lineView.topAnchor.constraint(equalTo: navigationBar.bottomAnchor).isActive = true
    

添加此扩展后，您可以在任何 UINavigationController 上调用此方法（例如来自 ViewController viewDidLoad()）

self.navigationController?.addCustomBottomLine(color: UIColor.black, height: 20)

【参考方案6】：

对于 Swift 3.0 只需更改此行：

CGContextFillRect(ctx, CGRect(x: 0, y: 0, width: 1, height: 1))

对此：

ctx?.fill(CGRect(x: 0, y: 0, width: 1, height: 1))

【参考方案7】：

现在有更好的选择：

UINavigationBar.appearance().shadowImage = UIImage()

【参考方案8】：

适用于 iOS 13 及更高版本

    guard let navigationBar = navigationController?.navigationBar else  return 
    navigationBar.isTranslucent = true
    if #available(iOS 13.0, *) 
        let appearance = UINavigationBarAppearance()
        appearance.configureWithTransparentBackground()
        appearance.backgroundImage = UIImage()
        appearance.backgroundColor = .clear
        navigationBar.standardAppearance = appearance
     else 
        navigationBar.setBackgroundImage(UIImage(), for: .default)
        navigationBar.shadowImage = UIImage()