iOS開發之使用Storyboard預覽UI在不同螢幕上的運行效果_IOS

來源:互聯網
上載者:User

        在公司做項目一直使用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還有許多,在這就不做一一贅述了,以後有機會回慢慢的介紹的,在部落格的最後呢給大家分享一下我萌萌的案頭吧~然而這個案頭對於你的技術的提高並沒有什麼卵用~,願大家天天快樂,工作開心呢!


以上介紹就是本文的全部內容,希望對大家有所協助。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.