Swift纯Code之旅 Day3. 「画面管理员 - TabbarController」

昨天已经知道主画面是谁了，那今天就要来介绍管理ViewController的元件：

TabbarViewController

可以看到IOS内建的闹钟切换页面，就是由下面红色圈起来的TabbarController在控制

那我们就赶紧来实作吧！

首先先建五个ViewController，分别代表：

1. 画面管理员 (MainTabbarController)
2. 世界时钟 (WorldClockViewController)
3. 闹钟 (AlarmViewController)
4. 码表 (StopWatchViewController)
5. 计时器 (TimerViewController)

新增ViewController的方式可参考以下

新增完後可以创一个资料夹将他们分类，方便日後好管理

该有的东西都有之後，就开始建立TabbarController的内容吧！

class MainTabbarViewController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // 建立四个变数存放ViewController，提供以下做设定
        let worldClockVC = WorldClockViewController()
        let alarmVC = AlarmViewController()
        let stopWatchVC = StopWatchViewController()
        let timerVC = TimerViewController()
        
        // 设定这四个ViewController在Tabbar上面显示的图片
        worldClockVC.tabBarItem.image = UIImage(systemName: "network")
        alarmVC.tabBarItem.image = UIImage(systemName: "alarm.fill")
        stopWatchVC.tabBarItem.image = UIImage(systemName: "stopwatch.fill")
        timerVC.tabBarItem.image = UIImage(systemName: "timer")
        
        // 设定这四个ViewController在Tabber上的文字
        worldClockVC.title = "世界时钟"
        alarmVC.title = "闹钟"
        stopWatchVC.title = "码表"
        timerVC.title = "计时器"
        
        //由於闹钟页面最上头有NavigationBar，因此将闹钟设定为NavigationController
        let navAlarm = UINavigationController(rootViewController: alarmVC)
        
        // 让NavigationBar不透明
        navAlarm.navigationBar.isTranslucent = false
        // 设定NavigationBar的背景颜色
        navAlarm.navigationBar.barTintColor = .black
        // 设定NavigationBar的文字颜色
        navAlarm.navigationBar.titleTextAttributes =  [.foregroundColor: UIColor.white]
    
        // 设定Tabbar背景色
        self.tabBar.barTintColor = .clear
        // 设定Tabbar的文字颜色
        self.tabBar.tintColor = .orange
        
        // 将四个ViewController依序加进TabbarController内
        setViewControllers([worldClockVC, navAlarm, stopWatchVC, timerVC], animated: false)
    }
}

设定完後就执行专案看看结果吧！

疑？ 你说TabbarController没有出现？ 等等！先别急着关文章啊！
还记得Day2有提到设定主画面的事情吗？
现在我们去将该Project的画面设为Tabbarcontroller後，再执行看看吧

现在你的程序应该会出现这个很像IOS内建闹钟的画面了