Tabman项目教程：如何在iOS应用中添加自定义导航栏-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00952/article/details/148756449

Tabman项目教程：如何在iOS应用中添加自定义导航栏

Tabman ™️ A powerful paging view controller with interactive indicator bars 项目地址: https://gitcode.com/gh_mirrors/ta/Tabman

前言

在iOS应用开发中，优雅的页面导航设计对用户体验至关重要。Tabman作为一个强大的导航栏组件库，为开发者提供了灵活多样的导航栏实现方案。本文将深入讲解如何在Tabman项目中添加不同类型的导航栏，帮助开发者掌握这一实用工具的核心功能。

导航栏位置概述

Tabman支持在视图控制器的多个位置添加导航栏，主要包含以下几种位置类型：

顶部区域（.top）
底部区域（.bottom）
导航项区域（.navigationItem）
自定义区域（.custom）

每种位置类型都有其特定的使用场景和实现方式，下面我们将逐一详细介绍。

顶部导航栏实现

顶部导航栏是最常见的导航形式，适用于大多数内容展示场景。

基础实现

override func viewDidLoad() {
    super.viewDidLoad()
    
    let bar = TMBar.ButtonBar()
    addBar(bar, dataSource: self, at: .top)
}

这段代码创建了一个按钮样式的导航栏，并将其添加到视图控制器的顶部位置。需要注意的是，这个位置会自动考虑安全区域的插入，确保导航栏不会与状态栏重叠。

系统样式扩展

如果需要让导航栏看起来更像系统原生导航栏（如UINavigationBar），可以使用TMSystemBar包装器：

addBar(bar.systemBar(), dataSource: self, at: .top)

这种样式会：

将背景延伸到视图边缘
添加分隔线等系统样式元素
提供更原生的视觉体验

底部导航栏实现

底部导航栏适合作为应用的主导航，类似于UITabBar的定位。

基础实现

override func viewDidLoad() {
    super.viewDidLoad()
    
    let bar = TMBar.TabBar()
    addBar(bar, dataSource: self, at: .bottom)
}

这里使用了TabBar样式，这是专门为底部位置设计的样式。它会自动考虑底部安全区域，避免与Home指示器重叠。

系统样式扩展

同样可以使用系统样式包装器：

addBar(bar.systemBar(), dataSource: self, at: .bottom)

导航项区域实现

将导航栏嵌入到UINavigationItem的titleView中，可以创建紧凑的导航体验。

实现要点

let bar = TMBar.ButtonBar()

override func viewWillAppear(animated: Bool) {
    super.viewWillAppear(animated: Bool)
    
    addBar(bar, dataSource: self, at: .navigationItem(item: self.navigationItem))
}

重要提示：

需要在viewWillAppear而非viewDidLoad中设置
建议将bar实例保持为属性而非局部变量
这种位置适合在导航控制器中使用

自定义位置实现

对于有特殊布局需求的场景，Tabman提供了完全自定义的解决方案。

基础实现

let customContainer = UIView()

override func viewDidLoad() {
    super.viewDidLoad()
    
    let bar = TMBar.ButtonBar()
    addBar(bar, dataSource: self, at: .custom(view: customContainer, layout: nil))
}

默认情况下，导航栏会被添加为自定义容器的子视图，并自动设置四边约束。

自定义布局约束

如果需要更精细的布局控制，可以自定义约束：

addBar(bar, dataSource: self, at: .custom(view: customContainer, layout: { (bar) in
    bar.translatesAutoresizingMaskIntoConstraints = false
    NSLayoutConstraint.activate([
        bar.topAnchor.constraint(equalTo: self.customContainer.topAnchor),
        bar.centerXAnchor.constraint(equalTo: self.customContainer.centerXAnchor)
    ])
}))

注意事项：