博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Swift - 使用导航条和导航条控制器来进行页面切换
阅读量:5343 次
发布时间:2019-06-15

本文共 8135 字,大约阅读时间需要 27 分钟。

通过使用导航条(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
    
}
}

转载于:https://www.cnblogs.com/Free-Thinker/p/4838287.html

你可能感兴趣的文章
kosaraju求强连通分量
查看>>
Block作为返回值时的使用
查看>>
文件管理之文件后缀名识别
查看>>
android 表情,软键盘冲突解决方案(仿微博等SNS应用)
查看>>
ASP.NET MVC随想录——锋利的KATANA
查看>>
20155303 2016-2017-2 《Java程序设计》第五周学习总结
查看>>
selenium爬取网易云
查看>>
开始学习Angular Mobile UI
查看>>
浅谈C语言中的联合体
查看>>
Photoshop独立安装包下载页面
查看>>
使用git获取远程分支
查看>>
.Net开发之Request处理
查看>>
看了才知道!伊朗黑客组织原来这么牛
查看>>
杂七杂八的一些板子
查看>>
读入优化模板
查看>>
linux 查看网络流量命令
查看>>
十分钟读懂:Java并发——CSP模型
查看>>
d3 选择器
查看>>
javascript基础学习七
查看>>
C#环境datagidview添加删除操作
查看>>