如何在tableView顶部实现navigation并添加title？

嘿，我来给你梳理下实现这个需求的两种常用方向，都是iOS开发里的常规操作哈：

这是最省心的方式，系统已经帮我们处理了状态栏适配、滑动返回等细节：

• 首先确保你的TableViewController被UINavigationController包裹：
  • 代码创建的话：

    let tableViewVC = YourTableViewController()
    let navVC = UINavigationController(rootViewController: tableViewVC)
    // 把navVC设置为根控制器或者push到现有导航栈中
    

  • Storyboard创建的话，直接把TableViewController拖进Navigation Controller即可。
• 设置导航栏标题：在TableViewController的viewDidLoad里添加代码：

  // 简单设置标题
  self.title = "你的标题内容"
  
  // 自定义标题样式（比如修改字体、颜色）
  let titleLabel = UILabel()
  titleLabel.text = "自定义标题"
  titleLabel.textColor = .white
  titleLabel.font = UIFont.boldSystemFont(ofSize: 18)
  self.navigationItem.titleView = titleLabel
  

• 添加左右侧按钮（比如返回键、功能键）：

  // 左侧返回按钮（push跳转后系统会自动生成，这里是自定义示例）
  let backBtn = UIBarButtonItem(title: "返回", style: .plain, target: self, action: #selector(backAction))
  self.navigationItem.leftBarButtonItem = backBtn
  
  // 右侧功能按钮
  let rightBtn = UIBarButtonItem(image: UIImage(systemName: "plus"), style: .plain, target: self, action: #selector(rightAction))
  self.navigationItem.rightBarButtonItem = rightBtn
  

如果系统导航栏满足不了你的UI需求，可以自己做一个顶部View放在TableView头部：

• 先创建自定义导航View：

  class CustomNavView: UIView {
      override init(frame: CGRect) {
          super.init(frame: frame)
          setupUI()
      }
      
      required init?(coder: NSCoder) {
          super.init(coder: coder)
          setupUI()
      }
      
      private func setupUI() {
          self.backgroundColor = .systemBlue // 设置背景色
          
          // 添加标题Label
          let titleLabel = UILabel()
          titleLabel.text = "自定义标题"
          titleLabel.textColor = .white
          titleLabel.font = UIFont.boldSystemFont(ofSize: 18)
          self.addSubview(titleLabel)
          titleLabel.translatesAutoresizingMaskIntoConstraints = false
          NSLayoutConstraint.activate([
              titleLabel.centerXAnchor.constraint(equalTo: self.centerXAnchor),
              titleLabel.centerYAnchor.constraint(equalTo: self.centerYAnchor)
          ])
          
          // 添加左侧返回按钮
          let backBtn = UIButton(type: .system)
          backBtn.setTitle("返回", for: .normal)
          backBtn.setTitleColor(.white, for: .normal)
          backBtn.addTarget(self, action: #selector(backBtnTapped), for: .touchUpInside)
          self.addSubview(backBtn)
          backBtn.translatesAutoresizingMaskIntoConstraints = false
          NSLayoutConstraint.activate([
              backBtn.leftAnchor.constraint(equalTo: self.leftAnchor, constant: 16),
              backBtn.centerYAnchor.constraint(equalTo: self.centerYAnchor)
          ])
      }
      
      @objc private func backBtnTapped() {
          // 通过通知告诉ViewController处理返回逻辑
          NotificationCenter.default.post(name: NSNotification.Name("CustomNavBackTapped"), object: nil)
      }
  }
  

• 在TableViewController中添加这个自定义View作为TableView头部：

  override func viewDidLoad() {
      super.viewDidLoad()
      
      // 适配状态栏高度，iOS13+可以用safeAreaInsets
      let navHeight = 44 + UIApplication.shared.statusBarFrame.height
      let customNavView = CustomNavView(frame: CGRect(x: 0, y: 0, width: self.view.frame.width, height: navHeight))
      self.tableView.tableHeaderView = customNavView
      
      // 监听返回按钮点击事件
      NotificationCenter.default.addObserver(self, selector: #selector(handleBackAction), name: NSNotification.Name("CustomNavBackTapped"), object: nil)
  }
  
  @objc private func handleBackAction() {
      self.navigationController?.popViewController(animated: true)
      // 如果是present的页面，用self.dismiss(animated: true)
  }
  

如果是用SwiftUI开发，实现起来更简洁：

struct ContentView: View {
    var body: some View {
        NavigationStack {
            List {
                // 列表内容
                Text("列表项1")
                Text("列表项2")
            }
            .navigationTitle("你的标题")
            .navigationBarTitleDisplayMode(.inline) // 设置标题显示模式
            .toolbar {
                // 左侧返回按钮
                ToolbarItem(placement: .navigationBarLeading) {
                    Button("返回") {
                        // 返回逻辑
                    }
                }
                // 右侧功能按钮
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button(action: {}) {
                        Image(systemName: "plus")
                    }
                }
            }
        }
    }
}

内容的提问来源于stack exchange，提问作者GFK76