iT邦幫忙

2022 iThome 鐵人賽

DAY 17
0
Mobile Development

如何成為IOS初級工程師系列 第 17

Day-17 ViewController的容器 - UITabBarController, UINavigationController

  • 分享至 

  • xImage
  •  

今天會教你如何簡單使用UINavigationController跟UITabBarController,簡單介紹一下這兩個容器,是用來管理一個或多個子ViewController,且是基於stack-based的方式在控制管理。是非常常用的容器哦!

進入正題

今天會學到如何建立

  • UINavigationController
  • UITabBarController

UINavigationController

其實就是我們在手機上面最上方的導覽列
https://ithelp.ithome.com.tw/upload/images/20221002/20152659sRMxIRJZ2w.png
建立的方式非常簡單,假設我們使用剛建立好的專案
我們只要把window?.rootViewController = ViewController()改成下面的樣子,就表示viewController已經裝在NavigationController裡囉,超簡單的吧

window?.rootViewController = UINavigationController(rootViewController: ViewController())

那我們簡單介紹navigationBar最常設定的東西,在viewDidLoad裡面打上以下程式碼。

//設定標題
navigationController?.navigationItem.title = "Hello"

//設定左邊按鈕
navigationController?.navigationItem.leftBarButtonItem = UIBarButtonItem(barButtonSystemItem: .cancel, target: self, action: #selector(method))

然後跟UIbutton的target觸發一樣,打上以下程式碼就可以觸發按鍵的動作。下方程式碼是點擊後會push一個新的viewcontroller出來。

@objc func method(){
        navigationController?.pushViewController(NewViewController(), animated: false)
    }

UITabBarController

就是平常在手機最下方看到的按鍵列
https://ithelp.ithome.com.tw/upload/images/20221002/20152659KJjqrBbgsy.png

首先我們先把一個ViewController當容器繼承UITabBarController

class ViewController: UITabBarController{  繼承UITabBarController

    override func viewDidLoad() {
        super.viewDidLoad()      
    }
  
}

之後我們建立幾個新的Controller,然後在ViewController實例化,我這邊示範一個且簡單設定名稱跟圖案。

let helloController = HelloViewController()   //實例化
helloController.title = "hello"               //設定tab的名稱
helloController.tabBarItem.image = UIImage(systemName: "sun.min")  //設定tab的圖案

然後在一開始的ViewController裡的viewDidLoad打上下方程式碼,這樣我們就可以建立三個tab在列表上囉

viewControllers = [helloController, 其他controller, 其他controller]

上一篇
Day-16 輕鬆做出列表 - UITableView
下一篇
Day-18 請別人做事要有禮貌啊 - Delegatation Pattern
系列文
如何成為IOS初級工程師30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言