在公司做專案一直使用Storyboard，雖然有時會遇到團隊合作的Storyboard衝突問題，但是對於Storyboard開發效率之高還是比較划算的。在之前的部落格中也提到過，團隊合作使用Storyboard時，避免衝突有效的解決方法是負責UI開發的同事最好每人維護一個Storyboard, 公用的元件使用輕量級的xib或者純程式碼來實現。這樣不但提高了開發效率，而且可以有效的避免Storyboard的衝突。如果每個人維護一個Storyboard, 遇到衝突了就以你自己的為準就OK了。

言歸正傳，接下來就介紹一下如何使用Storyboard來預覽UI在不同那個解析度螢幕上的執行效果，這就很好的避免了每次調整約束都要Run一下才能看到不同平面上執行的效果，今天的部落格就來詳述一下如何使用Storyboard來進行Preview執行效果。接下來就一步一步的來看一下如何進行效果的預覽。

一、建立工程新增測試使用的UIImageView

建立一個測試工程，在ViewController上新增4個不同尺寸的UIImageView, 並且新增上不同的約束，最後新增上不同的文藝小清新的圖片，最終Storyboard上的控制元件和約束如下所示。

二、開啟預覽介面

1.點選Storyboard上左上角的按鈕 -> 點選Preview -> 按著potion + shift鍵 點選相應的Storyboard, 具體操作如下圖所示：

2.經過上面的操作後， 你會看到如下操作介面，在這個介面中你可以點選右邊的加號按鈕來新增預覽視窗，如下圖所示：

三、新增預覽裝置

1.雙擊上面加號的按鈕回出現預覽視窗，在預覽視窗左下方有一個加號按鈕，通過加號按鈕你可以新增不同尺寸的螢幕進行預覽，從3.5到iPad應有盡有，新增是的截圖如下所示。

2.把上述所有裝置新增上以後的預覽效果如下圖所示，這種預覽效果僅限於使用Storyboard實現的控制元件，然而用純程式碼寫的UI就沒有這麼幸運了。預覽效果如下：

Storyboard的還是蠻強大的，類似這種小的技巧，Storyboard還有許多，在這就不做一一贅述了，以後有機會回慢慢的介紹的，在部落格的最後呢給大家分享一下我萌萌的桌面吧~然而這個桌面對於你的技術的提高並沒有什麼卵用~，願大家天天快樂，工作開心呢！

• 作者：青玉伏案
  

• 本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段宣告，且在文章頁面明顯位置給出原文連線，否則保留追究法律責任的權利。

• 如果文中有什麼錯誤，歡迎指出。以免更多的人被誤導。