Swift小白的第五课-导航和返回(Navigation Con
我们今天的小任务:用导航和返回把计算器收纳起来
上节课我们做了一个简单的乘法器,这节课我们准备做一个“工具箱”把它收纳起来,我们用Navigation Controller去实现它....
算了,懒得解释,我就是觉得到现在讲下一个点:Navigation Controller了,顺便讲讲Enter point什么的。就这样
1. 找到Main.storyboard,打开元件库,找到Navigation Controller,把它拖到视图里
![](https://img.haomeiwen.com/i1383190/0d208a4489752063.png)
2. 然后将Storyboard Enter Point拖到Navigation Controller上,这样我们就改变了程序启动的时候,显示的页面(改变之前程序启动就访问的是“计算器”的那个Controller, 我们现在把它换成了,程序启动访问Navigation Controller的Root View Controller。
![](https://img.haomeiwen.com/i1383190/8d6759cde80625ae.png)
3. Navigation Controller默认的Root View Controller是一个UITableViewController,我们还没讲到Table View,所以我们准备移除它,把它换成UIViewController (这俩的区别我不讲,其实随着学习的进度你会有自己的认知,或者你可以自行百度)
--> 选中Root View Controller Scene, 然后删除它, 再从元件库里搜索“View Controller",把它拖到我们的视图里,我们准备把它变成我们Navigation Controller新的rootViewController.
![](https://img.haomeiwen.com/i1383190/82d9678b276c0acc.png)
4. 从Navigation Controller鼠标右键拖动到新加入的View Controller上.
![](https://img.haomeiwen.com/i1383190/eec7043b83884978.png)
5. 拖动到新的View Controller后,松手,并且选择“root view controller", 这样就让Navigation Controller与新的View Controller建立的新的关系。使新的View Controller变成了Navigation Controller的root view controller
![](https://img.haomeiwen.com/i1383190/2369a854822b2ffd.png)
6. 如下图所示,关系成功建立
![](https://img.haomeiwen.com/i1383190/a0e85e7df2486659.png)
7. 我们的Root View Controller已经有了,现在运行程序的话,我们只能看到一个空白页面(这个页面就是这个Root View Controller的页面)现在,我们需要让计算器的那个View Controller变成这个Root View Controller的下一级,我这里决定用一个按钮来实现他们的关联
- 拖动一个Button到新加的这个Root View Controller上,然后把按钮改成“计算器”
- 鼠标选中计算器,然后鼠标右键拖动到计算器的那个View Controller上,然后松手
- 然后选择“Show”, 因为选择Show可以出现返回按钮,这样我们通过点击返回按钮返回上一页面
选择Show、Show Detail、Present Modally、Present As Popover或者Custom的区别,可以参考:https://blog.csdn.net/plpldog/article/details/77866097
![](https://img.haomeiwen.com/i1383190/6ddad02944dca657.png)
8. 关系连接完成以后,我们可以看到计算器的View Controller上出现了"< Back":
![](https://img.haomeiwen.com/i1383190/554d27daee65380b.png)
9. Command + R运行一下,我们看看效果:
问题:RootViewController的导航栏没有标题,目标页面也没有标题,下边我们解决这个问题
![](https://img.haomeiwen.com/i1383190/02f7e10f4918aad7.png)
10. 找到Root View Controller的Navigation Item, 然后选择“属性编辑器”,将Title修改为”工具箱“,Prompt修改为“ToolBox"
![](https://img.haomeiwen.com/i1383190/d59d6e1c636de9e9.png)
11. 当我们想给计算器的View Controller添加导航栏标题的时候,发现他没有Navigation Item. 小事儿:从原件库里找到Navigation Item, 将它拖动到计算器的View Controller即可
![](https://img.haomeiwen.com/i1383190/40e7eb028729c5a1.png)
12. 跟步骤10一样,将计算器的Navigation Item的Title改成“计算器”,然后Command + R, 再运行一下试试; 效果不错,是不是?
![](https://img.haomeiwen.com/i1383190/6341ea2f62ac6d0c.png)