在公司做項(xiàng)目一直使用Storyboard,雖然有時(shí)會(huì)遇到團(tuán)隊(duì)合作的Storyboard沖突問(wèn)題,但是對(duì)于Storyboard開(kāi)發(fā)效率之高還是比較劃算的。在之前的博客中也提到過(guò),團(tuán)隊(duì)合作使用Storyboard時(shí),避免沖突有效的解決方法是負(fù)責(zé)UI開(kāi)發(fā)的同事最好每人維護(hù)一個(gè)Storyboard, 公用的組件使用輕量級(jí)的xib或者純代碼來(lái)實(shí)現(xiàn)。這樣不但提高了開(kāi)發(fā)效率,而且可以有效的避免Storyboard的沖突。如果每個(gè)人維護(hù)一個(gè)Storyboard, 遇到?jīng)_突了就以你自己的為準(zhǔn)就OK了。
言歸正傳,接下來(lái)就介紹一下如何使用Storyboard來(lái)預(yù)覽UI在不同那個(gè)分辨率屏幕上的運(yùn)行效果,這就很好的避免了每次調(diào)整約束都要Run一下才能看到不同平面上運(yùn)行的效果,今天的博客就來(lái)詳述一下如何使用Storyboard來(lái)進(jìn)行PReview運(yùn)行效果。接下來(lái)就一步一步的來(lái)看一下如何進(jìn)行效果的預(yù)覽。
一、創(chuàng)建工程添加測(cè)試使用的UIImageView
創(chuàng)建一個(gè)測(cè)試工程,在ViewController上添加4個(gè)不同尺寸的UIImageView, 并且添加上不同的約束,最后添加上不同的文藝小清新的圖片,最終Storyboard上的控件和約束如下所示。

二、打開(kāi)預(yù)覽界面
1.點(diǎn)擊Storyboard上左上角的按鈕 -> 點(diǎn)擊Preview -> 按著potion + shift鍵 點(diǎn)擊相應(yīng)的Storyboard, 具體操作如下圖所示:

2.經(jīng)過(guò)上面的操作后, 你會(huì)看到如下操作界面,在這個(gè)界面中你可以點(diǎn)擊右邊的加號(hào)按鈕來(lái)添加預(yù)覽窗口,如下圖所示:

三、添加預(yù)覽設(shè)備
1.雙擊上面加號(hào)的按鈕回出現(xiàn)預(yù)覽窗口,在預(yù)覽窗口左下方有一個(gè)加號(hào)按鈕,通過(guò)加號(hào)按鈕你可以添加不同尺寸的屏幕進(jìn)行預(yù)覽,從3.5到ipad應(yīng)有盡有,添加是的截圖如下所示。

2.把上述所有設(shè)備添加上以后的預(yù)覽效果如下圖所示,這種預(yù)覽效果僅限于使用Storyboard實(shí)現(xiàn)的控件,然而用純代碼寫(xiě)的UI就沒(méi)有這么幸運(yùn)了。預(yù)覽效果如下:

Storyboard的還是蠻強(qiáng)大的,類(lèi)似這種小的技巧,Storyboard還有許多,在這就不做一一贅述了,以后有機(jī)會(huì)回慢慢的介紹的,在博客的最后呢給大家分享一下我萌萌的桌面吧~然而這個(gè)桌面對(duì)于你的技術(shù)的提高并沒(méi)有什么卵用~,愿大家天天快樂(lè),工作開(kāi)心呢!
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注