返回
使用Swift开发一个贝乐虎启蒙App - 自定义tabBar
IOS
2023-10-07 08:52:49
在上一篇教程中,我们已经将网络请求封装好了,现在我们就开始搭建框架。
### 分析页面结构
根据下图我们可以看出,整个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。希望对您有所帮助。