IOS开发入门之七——storyboard的使用(下)

    需要iOS开发视频资料可以加我微信: 1914532832  验证信息请注明:IOS开发   

    前面已经介绍了纯代码写UI以及storyboard写UI,这两种方法各有优缺点。因此,在实际项目开发中更多采用的是综合这两种方法,取长补短。比如视图是用storyboard布置的,但是视图的点击事件用代码来写。这又牵涉到,怎么将storyboard上的视图等元素与我们的代码进行绑定? 这节就围绕这个问题展开。如果对storyboard一点都不熟悉的人可以点击下面两个链接先进行了解:

IOS开发入门之五——storyboard的使用(上)

IOS开发入门之六——storyboard的使用(中)

一、创建项目

    打开Xcode软件,创建一个"Single View App"项目,项目命名为"StoryboardDemo",不清楚怎么创建,请参看"IOS开发入门之二——第一个App"

二、删除默认页面

    先说说为什么要先删除默认的页面?在我们创建好项目后,XCode默认会在storyboard上为我们创建一个页面,而这个页面已经默认与一个ViewController类绑定了,这个ViewController类就是左侧目录下的文件ViewController.swift里定义的那个ViewController类。本节为了演示这种绑定过程,所以不使用这个默认页面,我们自己来创建一个页面。

    先点击左侧目录下的Main.storyboard文件,然后在中间的页面上点击头部(如下图红色箭头处),按键盘的“delete”键将这个默认页面删除。    

三、添加新页面

    从右下角的视图栏中将“View Controller”视图(即页面)用鼠标左键按住拉到中间,然后放开,就在storyboard上新建了一个页面。

四、绑定ViewController

    如下图所示,先点击红色方框1,选中整个页面;然后点击红色方框2,打开绑定class的面板; 接着点击红色方框3,弹出一个下拉列表,选择红色方框4的那个类,这样就将storyboard上的页面与ViewController.swift文件中的ViewController类绑定了。

    注意:这里补充一个步骤,将我们刚才添加的页面设置为storyboard的入口。如下图红色方框按照从1-3操作,确保"Is Initial View Controller"这个选项要勾上。如果不做这一步,后面App运行起来,虽然也能启动页面,但是你将会看到屏幕一片黑色,什么都没有。

五、添加按钮

    点击Main.storyboard文件,在storyboard的默认页面上加一个UILabel和一个按钮UIButton,不懂操作细节的人请点击"IOS开发入门之五——storyboard的使用(上)",结果如下图所示:

    

六、代码中引用到视图对象

    在代码中要引用到storyboard上的这两个标签和按钮视图,要怎么做呢? 首先,按照下图所示的序号顺序点击红色方框,来将ViewController代码编辑界面调出来,与storyboard上的页面一同显示。

    接着鼠标左键点击一下下图红框1中的的Label视图,这样就选中这个视图,然后将鼠标放在这个Lable视图上,等鼠标图标变成手的形状就按下鼠标右键,然后拖动到红色箭头所指的位置,这时会弹出一个对话框,在下图红色方框2中填入这个视图在代码中的对象名(在此命名为"myLable"),最后点击对话框右下角的"Connect"按钮。

    这样我们在代码中用myLabel这个对象对storyboard中的Label这个视图进行操作了。我们在代码中加入如下两行代码,改变Label视图上的文字和文字颜色,然后直接运行App。

      运行结果如下图所示:

七、代码中处理按钮点击事件

    按钮的点击事件的处理方法,也是通过与上面类似的办法来绑定到代码中,使我们能够在代码中处理点击事件。按照下图的红色方框的序号按顺序操作:首先点击红色方框1选中按钮视图;然后按照红色箭头2所示将鼠标先放到Button视图上,等鼠标图标变成手的形状时,再鼠标右键按住拖到到箭头所示的位置;接着就会弹出一个对话框,分别设置对话框上红色方框3、4、5、6处的内容,最后点击对话框7处的按钮。

    这样就在代码类中创建了一个事件处理方法(函数),这个方法已经绑定到我们storyboard上的按钮,如下图所示:

    接下来我们给这个按钮添加点击事件,要求在点击按钮button后Label视图上的文字变成"change"并且其颜色变成绿色。为此,我们在按钮事件的处理方法中加入如下代码:

    运行App后效果如下图所示:

    

    当我们点击上图中蓝色的Button按钮后,Label视图的文字及其颜色都发生改变,效果如下图所示:

 

需要iOS开发视频资料可以加我微信: 1914532832  验证信息请注明:IOS开发

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页