Swift - 使用导航条和导航条控制器来进行页面切换

通过使用导航条（UINavigationBar）与导航条控制器（UINavigationController）可以方便的在主页面和多层子页面之间切换。下面通过一个简单“组件效果演示”的小例子来说明如何通过代码来进行页面的切换。

功能如下：

1，在AppDelagete.swift入口文件中把首页ViewController做了导航控件的封装

2，首页是一个表格列出几个Swift控件的名称

3，点击表格项即切换到对应组件展示页面，顶部的导航条标题变为该控件的名称，同时导航条左侧还有返回按钮

4，在展示页中，给导航条右侧添加了“效果/代码”切换的按钮，点击分别展示组件的效果和代码

效果图如下：

     

代码如下：

--- 入口文件 AppDelegate.swift ---

import UIKit

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?

    func application(application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: NSDictionary?) -> Bool {
        // Override point for customization after application launch.

        // 把起始ViewController作为导航控件封装，我们在ViewController里就能调用导航条进行页面切换了
        var rootViewController = ViewController()
        var rootNavigationController = UINavigationController(rootViewController: rootViewController)
        self.window!.rootViewController = rootNavigationController

        return true
    }

    func applicationWillResignActive(application: UIApplication) {
    }

    func applicationDidEnterBackground(application: UIApplication) {
    }

    func applicationWillEnterForeground(application: UIApplication) {
    }

    func applicationDidBecomeActive(application: UIApplication) {
    }

    func applicationWillTerminate(application: UIApplication) {
    }
}

--- 主页面 ViewController.swift ---

import UIKit

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

    // 表格加载
    var tableView:UITableView?

    // 控件类型
    var ctrls = [ "UILabel" , "UIButton" , "UIImageView" , "UISlider" , "UIWebView" ]

    override func viewDidLoad() {
        super .viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.

        self.title = "Swift控件演示"
        self.tableView = UITableView(frame:self.view.frame, style:UITableViewStyle.Plain)
        self.tableView!.delegate = self
        self.tableView!.dataSource = self
        self.tableView!.registerClass(UITableViewCell.self, forCellReuseIdentifier: "SwiftCell" )
        self.view.addSubview(self.tableView!)
    }

    override func didReceiveMemoryWarning() {
        super .didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    // UITableViewDataSource协议方法
    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int
    {
        return self.ctrls.count
    }

    // UITableViewDataSource协议方法
    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath)
        -> UITableViewCell
    {
        let cell = tableView.dequeueReusableCellWithIdentifier( "SwiftCell" , forIndexPath:indexPath)
            as UITableViewCell
        cell.accessoryType = UITableViewCellAccessoryType.DisclosureIndicator
        cell.textLabel?.text = self.ctrls[indexPath.row]

        return cell
    }

    // UITableViewDelegate协议方法，点击时调用
    func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath!)
    {
        // 跳转到detailViewController，取消选中状态
        self.tableView!.deselectRowAtIndexPath(indexPath, animated: true )
        // 创建DetailViewController
        var detailViewController = DetailViewController()
        // 传递控件的title，在detailView里用于判断生成响应的控件
        detailViewController.title = self.ctrls[indexPath.row]
        // navigationController跳转到detailViewController
        self.navigationController!.pushViewController(detailViewController, animated: true )
    }
}

--- 子页面 DetailViewController.swift ---

import UIKit

class DetailViewController: UIViewController {

    override func viewDidLoad() {
        super .viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.

        //设置背景色
        self.view.backgroundColor = UIColor.whiteColor()
        //按title加载控件
        loadControl(self.title!)

        //设置代码和控件展示切换按钮，增加到导航条的右侧
        //这里采用了navigationController不能增加navigationItem
        let btn = UIBarButtonItem(title: "代码" , style: UIBarButtonItemStyle.Bordered,
            target: self, action: "btnCodeClicked:" )
        self.navigationItem.rightBarButtonItem = btn
    }

    override func didReceiveMemoryWarning() {
        super .didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    //构建控件并加载到界面
    func loadControl(ctrl: String ) {
        switch (ctrl) {
        case "UILabel" :
            let label = UILabel(frame: self.view.bounds)
            label .backgroundColor = UIColor.clearColor()
            label .textAlignment = NSTextAlignment.Center
            label .font = UIFont.systemFontOfSize( 36 )
            label .text = "Hello, Ucai"
            self.view.addSubview( label )
        case "UIButton" :
            var button = UIButton(frame: CGRectMake( 110 , 120 , 100 , 60 ))
            button.backgroundColor = UIColor.blueColor()
            button.setTitleColor(UIColor.redColor(), forState: UIControlState.Normal)
            button.setTitleColor(UIColor.whiteColor(), forState: UIControlState.Highlighted)
            button.setTitle( "点击我" , forState: .Normal)
            button.addTarget(self, action: "buttonClicked:" ,
                forControlEvents: UIControlEvents.TouchUpInside)
            self.view.addSubview(button)
        case "UIImageView" :
            var image     = UIImage(named: "swift.png" )
            var imageView = UIImageView(frame:
                CGRectMake((CGRectGetWidth(self.view.bounds) - image!.size.width) / 2.0 , 120.0 ,
                    image!.size.width, image!.size.height))
            imageView.image = image!
            self.view.addSubview(imageView)
        case "UISlider" :
            let slider = UISlider(frame:CGRectMake( 60.0 , 120.0 , 200.0 , 30.0 ))
            self.view.addSubview(slider)
        case "UIWebView" :
            var webView = UIWebView(frame:self.view.bounds)
            var url = NSURL(string: "http://hangge.com" )
            var request = NSURLRequest(URL: url!)
            webView.loadRequest(request)
            self.view.addSubview(webView)

        default :
            println( "control name: \(ctrl)" )
        }
    }

    //显示控件的代码
    func loadCode(ctrl: String ) {
        var str: String
        switch (ctrl) {
        case "UILabel" :
            str = "let label = UILabel(frame: self.view.bounds)\n"
            str += "label.backgroundColor = UIColor.clearColor()\n"
            str += "label.textAlignment = NSTextAlignment.Center\n"
            str += "label.font = UIFont.systemFontOfSize(36)\n"
            str += "label.text = \"Hello, Ucai\"\n"
            str += "self.view.addSubview(label)"
        case "UIButton" :
            str = "UIButton"
        case "UISlider" :
            str = "let slider = UISlider(frame:CGRectMake(60.0, 120.0, 200.0, 30.0))\n"
            str += "self.view.addSubview(slider)"
        default :
            str = "other ctrl"
        }

        //在导航条下方位置显示源代码
        var txt = UITextView(
            frame: CGRectMake( 0 , 60 , self.view.bounds.size.width, self.view.bounds.size.height - 60 ))
        txt.text = str
        self.view.addSubview(txt)
    }
    //清空所有子视图
    func clearViews() {
        for v in self.view.subviews as [UIView] {
            v.removeFromSuperview()
        }
    }

    func buttonClicked(sender:AnyObject) {
        println( "you clicked button" )
    }

    //显示控件的代码
    func btnCodeClicked(sender:AnyObject) {
        println( "title: \(self.title)" )
        clearViews()
        if self.navigationItem.rightBarButtonItem!.title == "代码" {
            loadCode(self.title!)
            self.navigationItem.rightBarButtonItem!.title = "效果"
        }
        else {
            self.navigationItem.rightBarButtonItem!.title = "代码"
            loadControl(self.title!)
        }
    }
    /*
    func btnBackClicked(sender:AnyObject) {
        self.navigationController.navigationBar.popNavigationItemAnimated(true)
    }
    */
}

如果使用StoryBoard实现更加简单

AppDelegate.swift都不需要修改。打开Main.storyboard。

（1）点击首页的Scene，选择Editor -> Embed In -> Navigation Controller 即可。

（2）从首页单元格拖“show”的关联Segue到详细页，或从首页View Controller拖手动关联Segue到详细页，并定义这个Segue的Indentifier（比如detail）

这样，点击单元格跳转的代码有所改变，是根据刚才定义Segue的Indentifier来跳转

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

// UITableViewDelegate协议方法，点击时调用 func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath!) { // 跳转到detailViewController，取消选中状态 self.tableView!.deselectRowAtIndexPath(indexPath, animated: true ) //更具定义的Segue Indentifier进行跳转 self.performSegueWithIdentifier( "detail" , sender: self.ctrls[indexPath.row]) } //在这个方法中给新页面传递参数 override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) { if segue.identifier == "detail" { let controller = segue.destinationViewController as ! DetailViewController controller.title = sender as ? String } }