返回

使用Swift开发一个贝乐虎启蒙App - 自定义tabBar

IOS

在上一篇教程中,我们已经将网络请求封装好了,现在我们就开始搭建框架。

### 分析页面结构

根据下图我们可以看出,整个app底层是一个UITabBar。

[图片]

它包含五个子页面,分别为:

- 首页
- 发现
- 课程
- 练习
- 我的

每个子页面都有自己的导航栏和内容视图。

### 实现自定义tabBar

#### 1. 创建UITabBarController

```swift
let tabBarController = UITabBarController()
```

#### 2. 添加子控制器

```swift
let homeVC = HomeViewController()
let discoveryVC = DiscoveryViewController()
let courseVC = CourseViewController()
let practiceVC = PracticeViewController()
let mineVC = MineViewController()

let homeNav = UINavigationController(rootViewController: homeVC)
let discoveryNav = UINavigationController(rootViewController: discoveryVC)
let courseNav = UINavigationController(rootViewController: courseVC)
let practiceNav = UINavigationController(rootViewController: practiceVC)
let mineNav = UINavigationController(rootViewController: mineVC)

tabBarController.viewControllers = [homeNav, discoveryNav, courseNav, practiceNav, mineNav]
```

#### 3. 设置tabBarItem

```swift
homeNav.tabBarItem = UITabBarItem(title: "首页", image: UIImage(named: "home"), tag: 0)
discoveryNav.tabBarItem = UITabBarItem(title: "发现", image: UIImage(named: "discovery"), tag: 1)
courseNav.tabBarItem = UITabBarItem(title: "课程", image: UIImage(named: "course"), tag: 2)
practiceNav.tabBarItem = UITabBarItem(title: "练习", image: UIImage(named: "practice"), tag: 3)
mineNav.tabBarItem = UITabBarItem(title: "我的", image: UIImage(named: "mine"), tag: 4)
```

#### 4. 设置tabBar的属性

```swift
tabBarController.tabBar.tintColor = UIColor.blue
tabBarController.tabBar.barTintColor = UIColor.white
```

#### 5. 将tabBarController添加到window中

```swift
window.rootViewController = tabBarController
```

### 效果展示

运行项目,即可看到自定义的tabBar。

[图片]

### 总结

在本教程中,我们学习了如何在iOS中使用Swift开发一个贝乐虎启蒙App,其中包括如何自定义tabBar。希望对您有所帮助。