在 Swift 中设置自定义 NavigationBar 的最简单方法是啥？

Posted 2023-03-11

【中文标题】在 Swift 中设置自定义 NavigationBar 的最简单方法是啥？

【英文标题】：Easiest way to setup custom NavigationBar in Swift?在 Swift 中设置自定义 NavigationBar 的最简单方法是什么？

【发布时间】：2021-11-25 15:27:30

【问题描述】：

在 ios/Swift 中设置自定义 NavigationBar 的最简单方法是什么？ 我想在导航按钮上方使用标签（增加高度）。替换和隐藏默认 NavigationBar 并使用 UIView 是唯一的方法吗？

【参考方案1】：

（您的问题中缺少一些内容，因此可能无法回答。）

UINavigationBar 只是UIView 的子类，就像UINavigationController 是UIViewController 的子类一样。前者只是一个带有标题和左/右栏按钮的“视图”，后者将拥有它并且还可以“控制” UIViewController 堆栈。

这是前者的代码。

首先，让我们为用户名声明一个标签和一个没有标题的导航栏和一个左/右栏按钮。如果需要，您可以在左/右设置一系列条形按钮。另外，我喜欢带有描述性文本的 SF Symbols，所以我会先制作 UIButtons。

let userName = UILabel()
let navBar = UINavigationBar()
let navItems = UINavigationItem(title: "")
var btnLeft:UIButton()
var btnRight:UIButton()
var barBtnLeft:UIBarButtonItem!
var barBtnRight:UIBarButtonItem!

现在让我们填充并设置自动布局。这一切都可以在viewDidLoad 期间完成，并在其他地方更改内容（如用户名）。

// user name label

userName.translatesAutoresizingMaskIntoConstraints = false
userName.text = "User Name"
userName.textAlignment = .center

// create UIButtons with an SF Symbol and description

btnLeft.translatesAutoresizingMaskIntoConstraints = false
btnLeft.setImage(UIImage(systemName: "lessthan"), for: .normal)
btnLeft.setTitle("  left", for: .normal)
btnLeft.setTitleColor(.blue, for: .normal)
btnRight.translatesAutoresizingMaskIntoConstraints = false
btnRight.setImage(UIImage(systemName: "greaterthan"), for: .normal)
btnRight.setTitle("  right", for: .normal)
btnRight.setTitleColor(.blue, for: .normal)

// I like to "frame" these buttons, this is optional

btnLeft.layer.borderWidth = 1
btnLeft.layer.borderColor = UIColor.blue.cgColor
btnLeft.layer.cornerRadius = 5
btnRight.layer.borderWidth = 1
btnRight.layer.borderColor = UIColor.blue.cgColor
btnRight.layer.cornerRadius = 5

// now give the buttons a size

btnLeft.heightAnchor.constraint(equalToConstant: 44).isActive = true
btnLeft.widthAnchor.constraint(equalToConstant: 100).isActive = true
btnRight.heightAnchor.constraint(equalToConstant: 44).isActive = true
btnRight.widthAnchor.constraint(equalToConstant: 100).isActive = true

// don't forget to add targets!

btnLeft.addTarget(self, action: #selector(leftButtonSelector), for: .touchUpInside)
btnRight.addTarget(self, action: #selector(rightButtonSelector), for: .touchUpInside)

// make the result be a bar button

barBtnLeft = UIBarButtonItem(customView: btnLeft)
barBtnRight = UIBarButtonItem(customView: btnRight)

// add them to the navigation bar

navItems.leftBarButtonItems = [barBtnLeft]
navItems.rightBarButtonItems = [barBtnRight]
navBar.setItems([navItems], animated: false)
navBar.translatesAutoresizingMaskIntoConstraints = false

// add the label and navigation bar to your view

view.addSubview(userName)
view.addSubview(navBar)

// finally, lay the user name above the navigation bar

userName.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true
userName.heightAnchor.constraint(equalToConstant: 44).isActive = true
userName.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor).isActive = true
userName.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor).isActive = true
navBar.topAnchor.constraint(equalTo: userName.bottomAnchor).isActive = true
navBar.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor).isActive = true
navBar.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor).isActive = true

【讨论】：

谢谢，这样我就可以将它添加到视图控制器的视图中。我想不建议继承 UINavigationBar，真的找不到任何好的例子吗？

我不确定推荐什么 - 我的需求不需要这样的东西。我只是想在单个屏幕中使用 UINavigationBar 和 UITable View 的组合作为协调子视图，在导航栏中使用“添加”、“编辑”、“取消”和“完成”（删除是表格视图的一部分）。如果你能描绘出我的 UI，导航栏就可以为我提供开箱即用的一切。最终子类化的原因是什么？

我一直在寻找“快速修复”，可能会使用类似 let navController = UINavigationController(navigationBarClass: CustomNavigationBar.self, toolbarClass: nil) 来替换在 AppDelegate 中初始化的现有导航栏。但将导航栏与您的解决方案一起放在基础 viewWController 中可能是一个更好的主意。