通过使用导航条(UINavigationBar)与导航条控制器(UINavigationController)可以方便的在主页面和多层子页面之间切换。下面通过一个简单“组件效果演示”的小例子来说明如何通过代码来进行页面的切换。
功能如下:
1,在AppDelagete.swift入口文件中把首页ViewController做了导航控件的封装
2,首页是一个表格列出几个Swift控件的名称
3,点击表格项即切换到对应组件展示页面,顶部的导航条标题变为该控件的名称,同时导航条左侧还有返回按钮
4,在展示页中,给导航条右侧添加了“效果/代码”切换的按钮,点击分别展示组件的效果和代码
效果图如下:
代码如下:
--- 入口文件 AppDelegate.swift ---
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | 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 ---
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | 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 ---
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 | 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: "" ) 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 } } |