小編心血來潮庇谆,注冊了簡書賬號岳掐,特意來分享一下做UI的心得。
各位客官請隨意點評饭耳。串述。。哥攘。剖煌。
為了方便各位客官,小編創(chuàng)建了一個新的project逝淹。
1. 打開storyboard后耕姊,請客官看底下紅色尖頭指向的 wAny hAny?
**? wAny hAny 中各部分的意思為 w:width(寬),h:height(高)栅葡,Any 指任何device中有效茉兰。
當點擊wAny hAny時,一個正方形的可選框就會彈出來欣簇。當鼠標移動時规脸,相對應(yīng)的方格就會被淺藍色覆蓋坯约。相對應(yīng)地,方格下方有一行文字Base values/Final values莫鸭。Base values是后備選擇闹丐,當對應(yīng)的device的Final value沒有被選擇時,Base value就會被替補上去被因;當然卿拴,如果Final values已被選擇了,device對應(yīng)的豎屏/橫屏就被Final value鎖定梨与。
示例如下:(一下所有都是Final values堕花,一一對應(yīng)不同尺寸的iPhone和iPad)
wCompact hRegular:w(寬)設(shè)置為“窄”,h(高)設(shè)置為“正持嘈”缘挽,是所有iPhone豎屏的尺碼。
wCompact hCompact:w(寬)設(shè)置為“窄”呻粹,h(高)設(shè)置為“窄”壕曼,是所有小屏iPhone(3.5'', 4.0''. 4.7'')橫屏尺碼,針對iPhone 4s尚猿、5窝稿、5s、6凿掂、6s而設(shè)計伴榔。
wRegular hCompact: w(寬)設(shè)置為“正常”庄萎,h(高)設(shè)置為“窄”踪少,是大屏iPhone(5.5'')橫屏尺碼,針對6plus和6s plus而設(shè)計糠涛。
wRegular hRegular:w(寬)設(shè)置為“正吃荩”,h(高)設(shè)置為“正橙碳瘢”集漾,是iPad的豎屏和橫屏的尺碼。
2. 小編現(xiàn)在做一個iPhone APP砸脊,里面有一張圖片和一個label具篇,而且豎屏的時候都排成一列,但是橫屏的時候排成一行凌埂。
展示如下:
方法一:
首先選擇wCompact hRegular(針對所有iPhone豎屏)驱显,在右下方找出image view并且拖到view controller里,調(diào)整image view的大小和位置。
然后選擇圖片埃疫,小編就用小編男票的卡通自畫像了伏恐,嘿嘿
好了,在下一步前栓霜,先在6s中運行一下看看有什么東西出現(xiàn)
Bingo翠桦,iPhone豎屏中男票出現(xiàn)了;橫屏中男票沒有出現(xiàn)是因為上面所有的步驟都只是針對iPhone豎屏而設(shè)計的胳蛮,iPhone橫屏和iPad橫豎屏里面什么都沒有的秤掌,各客官可以運行確定一下。
好了鹰霍,現(xiàn)在把按鈕和label都設(shè)置一下,然后運行app茵乱。iPhone豎屏就好了茂洒,橫屏和iPad依然還是什么都沒有。
現(xiàn)在選擇wCompact hCompact(針對4s瓶竭,5督勺,5s,6斤贰,6s橫屏)智哀,和以上步驟一樣添加圖片和label,并且設(shè)置各自位置荧恍。
6plus橫屏瓷叫、6s plus橫屏 和iPad的橫豎屏的設(shè)置都一樣,主要在底下size class那里選好了就可以隨意設(shè)計控件的位置和大小了送巡,這里略過不講摹菠,各位客官請各自嘗試。
方法二:
在選擇wAny hAny后骗爆,添加image view和label次氨,不添加constrain。(在wAny hAny里添加的好處就是所有classes里都有了摘投,我們只需要在不同size class里調(diào)整constrain煮寡。)
現(xiàn)在先設(shè)置在iPhone豎屏的constrain。選擇底下的wCompact hRegular犀呼,添加控件的constrains設(shè)置image view和label的大小位置幸撕。
選擇每項constrain,添加wCompact hRegular的constrain設(shè)定圆凰。到這里為止杈帐,iPhone豎屏已經(jīng)完成。
然后設(shè)置在iPhone橫屏的constrain。類似地挑童,選擇wCompact hCompact(針對4s累铅,5,5s站叼,6娃兽,6s橫屏,*6plus 和6s plus的橫屏要在wRegular hCompact里設(shè)置*)尽楔,添加控件的constrains設(shè)置image view和label的大小位置投储。
選擇每項constrain,添加wCompact hCompact的constrain設(shè)定阔馋。到這里為止玛荞,iPhone橫屏也完成。
運行一下:豎屏 VS 橫屏