Swift iOS : NavigationController

1000copy發表於2017-02-27
SwiftiOSNavigationController

控制器NavigationController常用於用來做層次化UI導航。類名為UINavigationController。

NavigationController可以通過屬性包含多個ViewController、一個UINavigationBar、一個可選的UIToolbar。

以一個共三層的ViewController的案例，來展示NavigationController的使用：

  1. 共三層層次化UI

  2. 每一級頁面內有一個按鈕，可以繼續導航到下一級頁面

  3. 每一個頁面的導航條的左側按鈕可以返還到上一級

程式碼如下：

    import UIKit
    @UIApplicationMain
    class AppDelegate: UIResponder, UIApplicationDelegate {
        var window: UIWindow?
        var nav : Nav?
        func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
            self.window = UIWindow(frame: UIScreen.main.bounds)
            nav = Nav()
            self.window!.rootViewController = nav
            self.window?.makeKeyAndVisible()
            return true
        }
    }
    class Nav: UINavigationController {
        var count = 0
        var label : UILabel!
        override func viewDidLoad() {
            super.viewDidLoad()
            self.view.backgroundColor = .white
            self.pushViewController(Level1(), animated: true)
        }
    }
    
    class Level1: UIViewController {
        var count = 0
        var label : UILabel!
        override func viewDidLoad() {
            super.viewDidLoad()
            self.title = "Level 1"
                    self.view.backgroundColor = .white
                    let button   = UIButton(type: .system)
                    button.frame = CGRect(x: 120, y: 100, width: 100, height: 50)
                    button.setTitle("Dive Into 2",for: .normal)
                    button.addTarget(self, action: #selector(Level1.buttonAction(_:)), for: .touchUpInside)
                    view.addSubview(button)
        }
        func buttonAction(_ sender:UIButton!){
            let appDelegate = UIApplication.shared.delegate as! AppDelegate
            appDelegate.nav?.pushViewController(Level2(), animated: true)
        }
    }
    
    class Level2: UIViewController {
        var count = 0
        var label : UILabel!
        override func viewDidLoad() {
            super.viewDidLoad()
            self.title = "Level 2"
            self.view.backgroundColor = .white
            let button   = UIButton(type: .system)
            button.frame = CGRect(x: 120, y: 100, width: 100, height: 50)
            button.setTitle("Dive Into 3",for: .normal)
            button.addTarget(self, action: #selector(Level2.buttonAction(_:)), for: .touchUpInside)
            view.addSubview(button)
        }
        func buttonAction(_ sender:UIButton!){
            let appDelegate = UIApplication.shared.delegate as! AppDelegate
            appDelegate.nav?.pushViewController(Level3(), animated: true)
        }
    }
    class Level3: UIViewController {
        var count = 0
        var label : UILabel!
        override func viewDidLoad() {
            super.viewDidLoad()
            self.title = "Level 3"
            self.view.backgroundColor = .white
            let button   = UIButton(type: .system)
            button.frame = CGRect(x: 120, y: 100, width: 100, height: 50)
            button.setTitle("End",for: .normal)
            button.addTarget(self, action: #selector(Level3.buttonAction(_:)), for: .touchUpInside)
            view.addSubview(button)
        }
        func buttonAction(_ sender:UIButton!){
            
        }
    }

解釋下：

  1. 把Nav作為UINavigationController的子類，例項化此類並設定到window.rootViewController上

  2. 每一層都是繼承於UIViewController，類名分別為Level1、Level2、Level3

  3. Nav類檢視載入完成後，把第一層Level1壓入導航檢視

  4. 無需任何使用者程式碼，UINavigationController本身預設提供頁面的頂部條狀區域，它被稱為導航條(UINavigationBar)

  5. 點選此導航條的左側按鈕可以返還到上一級頁面；導航條中間顯示當前ViewController的title屬性值

相關文章