iOS开发入门第6节:storyboard第2讲

上节我们分享了:使用storyboard,在一个页面上添加Label视图,修改视图属性,添加视图约束。

这节我们继续分享:用storyboard实现从一个页面跳转到另一个页面。这两节都是纯图形界面的UI开发,不会涉及到任何一行代码,这是storyboard开发的不同之处。

一、创建第一个页面

如果看过上一节并创建过项目的同学,这步就可以省了。

打开Xcode软件,创建一个"Single View App"项目,项目命名为"Storyboard",不清楚怎么创建,请参看 。点击Main.storyboard文件,在storyboard的默认页面ViewController上加一个UILabel视图,不清楚细节的人请点击 ,效果如下图所示(阴影效果在这里不重要,不会设置的请忽略):

接下来我们继续在第一个页面上添加一个按钮UIButton视图,具体操作如下图所示:

最终结果如下图:

三、创建第二个页面

在添入第二个页面之前,我们要先调整一下第一个页面的大小和位置,为第二个视图腾出一点空间,方便我们查看。如下图所示,通过适当的缩放以及位置调整,使第一个页面大小适中,位置靠左一点。

接着我们在storyboard中加入第二个页面。如下图所示,点击红色方框1处,打开视图选择对话框,然后左键按住红色方框2处将新页面拉到第一个页面的旁边,这样第二个页面就创建完成了。

具体效果如下图所示:

接着,我们在第二个页面中添加一个Label视图,并将Label视图上显示的文字内容改为“这是第二个页面”。结果如下图所示:

三、设置页面跳转

鼠标放置在第一个页面的Button按钮上,等鼠标图片变成一只手形状时按住右键并拖动到第二个页面,看到第二个页面整个变成蓝色时放开鼠标按键,这时会弹出下图所示的黑色框,我们选择最上面"Show"字眼的这个选项。(没有鼠标,用触控版的人可以将光标移动到Button按钮上,等光标变成一只手的形状时,两根手指同时重按下触控板并拖动到第二个页面,其他都一样)

这时会出现如下图红色方框所示的一个图案,就说明跳转已经创建成功。

这时可以编译运行了,运行结果如下图所示,显示的是第一个页面的内容:

当我们按下上图中红色方框中的Button按钮时,就会跳转到第二个页面,如下图所示

本系列会不断更新,有兴趣的同学,可以关注我。