使用UITabBarController实现底部导航栏

在iOS开发中，底部导航栏是一个常用的UI组件，它可以提供快速切换和浏览应用程序不同模块的功能。在本篇博客中，我们将探讨如何使用UITabBarController实现底部导航栏，并给导航栏添加一些丰富内容。

什么是UITabBarController

UITabBarController是UIKit框架提供的一个视图控制器，用于管理和展示多个子视图控制器。在底部导航栏中，每个标签对应一个子视图控制器，用户可以通过点击标签来切换不同的视图控制器。UITabBarController提供了控制标签切换的逻辑和用户界面。

创建UITabBarController

使用UITabBarController非常简单，首先我们需要创建一个UITabBarController实例，并将所有的子视图控制器添加到它的viewControllers属性中。下面是一个示例代码：

let tabBarController = UITabBarController()

// 创建子视图控制器
let viewController1 = UIViewController()
let viewController2 = UIViewController()
let viewController3 = UIViewController()

// 设置子视图控制器标题和图标
viewController1.tabBarItem = UITabBarItem(title: "首页", image: UIImage(named: "home"), selectedImage: UIImage(named: "home_selected"))
viewController2.tabBarItem = UITabBarItem(title: "消息", image: UIImage(named: "message"), selectedImage: UIImage(named: "message_selected"))
viewController3.tabBarItem = UITabBarItem(title: "个人", image: UIImage(named: "profile"), selectedImage: UIImage(named: "profile_selected"))

// 将子视图控制器添加到UITabBarController
tabBarController.viewControllers = [viewController1, viewController2, viewController3]

// 将UITabBarController设置为根视图控制器
window.rootViewController = tabBarController

在上面的示例代码中，我们创建了一个UITabBarController实例，然后分别创建了三个子视图控制器，分别对应首页、消息和个人页面。接下来，我们为每个子视图控制器设置了标题和图标，然后将它们添加到UITabBarController的viewControllers属性中。最后，我们将UITabBarController设置为应用程序的根视图控制器。

自定义UITabBarController

除了基本的标签切换功能，我们还可以进一步定制UITabBarController，给底部导航栏添加一些丰富内容。

自定义标签样式

通过设置UITabBarItem的属性，我们可以自定义每个标签的样式，包括标题、图标和选中状态下的图标。可以使用系统提供的图标，也可以使用自定义的图标。例如，下面是一个给所有标签添加红色标题的示例代码：

let tabBarController = UITabBarController()

// 创建子视图控制器
let viewController1 = UIViewController()
let viewController2 = UIViewController()
let viewController3 = UIViewController()

// 设置子视图控制器标题和图标
viewController1.tabBarItem = UITabBarItem(title: "首页", image: UIImage(named: "home"), selectedImage: UIImage(named: "home_selected"))
viewController2.tabBarItem = UITabBarItem(title: "消息", image: UIImage(named: "message"), selectedImage: UIImage(named: "message_selected"))
viewController3.tabBarItem = UITabBarItem(title: "个人", image: UIImage(named: "profile"), selectedImage: UIImage(named: "profile_selected"))

// 自定义标签样式
viewController1.tabBarItem.setTitleTextAttributes([NSAttributedString.Key.foregroundColor: UIColor.red], for: .normal)
viewController2.tabBarItem.setTitleTextAttributes([NSAttributedString.Key.foregroundColor: UIColor.red], for: .normal)
viewController3.tabBarItem.setTitleTextAttributes([NSAttributedString.Key.foregroundColor: UIColor.red], for: .normal)

// 将子视图控制器添加到UITabBarController
tabBarController.viewControllers = [viewController1, viewController2, viewController3]

// 将UITabBarController设置为根视图控制器
window.rootViewController = tabBarController

在上面的示例代码中，我们使用了setTitleTextAttributes(_:for:)方法来自定义标签的标题颜色。上述示例代码中的颜色为红色，你可以根据需求自定义标签的样式。

添加中间按钮

在某些情况下，我们可能需要在底部导航栏中添加一个中间按钮，用于执行特殊操作或者跳转到其他页面。然而，UITabBarController默认情况下只支持固定数量的标签，我们无法直接添加一个中间按钮。

为了实现这个功能，我们可以借助自定义的视图控制器来创建中间按钮，然后将其插入到UITabBarController的子视图控制器数组中。以下是一个示例代码：

let tabBarController = UITabBarController()

// 创建子视图控制器
let viewController1 = UIViewController()
let viewController2 = UIViewController()
let viewController3 = UIViewController()

// 设置子视图控制器标题和图标
viewController1.tabBarItem = UITabBarItem(title: "首页", image: UIImage(named: "home"), selectedImage: UIImage(named: "home_selected"))
viewController2.tabBarItem = UITabBarItem(title: "消息", image: UIImage(named: "message"), selectedImage: UIImage(named: "message_selected"))
viewController3.tabBarItem = UITabBarItem(title: "个人", image: UIImage(named: "profile"), selectedImage: UIImage(named: "profile_selected"))

// 创建中间按钮
let middleButton = UIButton(type: .custom)
middleButton.setImage(UIImage(named: "add"), for: .normal)
middleButton.addTarget(self, action: #selector(middleButtonTapped), for: .touchUpInside)

// 将中间按钮添加到UITabBar上
tabBarController.tabBar.addSubview(middleButton)

// 调整中间按钮的位置
middleButton.translatesAutoresizingMaskIntoConstraints = false
middleButton.centerXAnchor.constraint(equalTo: tabBarController.tabBar.centerXAnchor).isActive = true
middleButton.bottomAnchor.constraint(equalTo: tabBarController.tabBar.topAnchor, constant: -10).isActive = true

// 将子视图控制器添加到UITabBarController
tabBarController.viewControllers = [viewController1, viewController2, viewController3]

// 将UITabBarController设置为根视图控制器
window.rootViewController = tabBarController

@objc func middleButtonTapped() {
    // 处理中间按钮点击事件
}

在上面的示例代码中，我们首先创建了一个中间按钮，并设置其图像和点击事件。接下来，我们将中间按钮添加到UITabBar上，并使用自动布局调整其位置。最后，我们将中间按钮添加到UITabBarController的子视图控制器数组中。

总结

使用UITabBarController实现底部导航栏是一种常用的方式，它可以帮助我们快速切换和浏览应用程序的不同模块。在本篇博客中，我们了解了UITabBarController的基本使用方法，并给导航栏添加了一些丰富内容。通过自定义标签样式和添加中间按钮，我们可以打造出各种各样样式独特的底部导航栏。希望本篇博客对你有所帮助，可以在你的iOS应用程序中实现自定义的底部导航栏。

本文来自极简博客，作者：夏日蝉鸣，转载请注明原文链接：使用UITabBarController实现底部导航栏