從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搜尋“覓知音”或“天涯何處”，下載安裝。