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搜索“觅知音”或“天涯何处”，下载安装。