iOS开发简记(6):storyboard的使用

从xib到storyboard,iOS界面开发的方式在变化。

这里记录怎么使用storyboard来完成简单的界面开发,比如实现一个“我”的简单界面。

(1)新建storyboard

在新建文件向导中,选择storyboard并命名即可。

(2)拉入viewcontroller

storyboard以vc为载体,所以应该往storyboard中拉入viewcontroller,比如:

以上拉入了一个vc,而且还往vc的view中加了一个label。

(3)关联viewcontroller

往storyboard拉入一个vc后,接下来,让这个vc关联到代码中的vc类。

先创建一个vc类,比如这样(这里以qmuikit的QMUICommonViewController作为基类):

然后在storyboard界面,关联这个vc类,比如:

注意上面关联vc类时,还给storybaord指定了一个ID,这个在后面会用到。

操作上,也可以先创建一个vc类,再创建storyborad并关联这个vc类。

(4)使用storyboard

在关联了vc之后,就可以使用这个vc类了,也就是使用了关联的storyboard,比如这样使用这个vc类:

运行起来发现界面什么都没有,之前加的label也没有显示出来。

原因是,之前加的label并没有设置text,所以看不到文字。

一般情况下,我们需要关联这个label,并在代码中灵活地设置text的内容。跟先定义一个vc类一样,先在代码中定义一个UILabel,并加上IBOutlet关键字,比如:

@property(nonatomic, strong)IBOutlet UILabel* nickinfo;

这时,这行代码的最左边,会出现一个空的圆圈,可以拉住这个圆圈关联控件,操作如下面的截图所示(需要以new window的方式打开MeViewController.h文件):

如果圆圈无法拉动到控件,哪也有可能是xcode的问题,重启一下xcode就能正常,小程正好遇到一次这样的情况(xcode10)。

关联控件后,就可以在代码中操作它了,比如:

运行效果是这样的:

 

本文演示的APP的源码:

https://github.com/crazy0363/sound-show-zhiyin

本APP已上架AppStore,欢迎您使用。地址:https://itunes.apple.com/cn/app/%E5%A4%A9%E6%B6%AF%E4%BD%95%E5%A4%84%E8%A7%85%E7%9F%A5%E9%9F%B3/id1439297254?mt=8&from=groupmessage&isappinstalled=0

或在AppStore搜索“觅知音”或“天涯何处”,下载安装。

Categories AI