iOS Development : Adaptive Layout -> Size Class

小編心血來潮庇谆,注冊了簡書賬號岳掐,特意來分享一下做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 橫屏

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末呕寝,一起剝皮案震驚了整個濱河市勋眯,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌下梢,老刑警劉巖客蹋,帶你破解...
    沈念sama閱讀 221,548評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異孽江,居然都是意外死亡讶坯,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,497評論 3 399
  • 文/潘曉璐 我一進店門岗屏,熙熙樓的掌柜王于貴愁眉苦臉地迎上來辆琅,“玉大人,你說我怎么就攤上這事这刷∠芽纾” “怎么了?”我有些...
    開封第一講書人閱讀 167,990評論 0 360
  • 文/不壞的土叔 我叫張陵崭歧,是天一觀的道長隅很。 經(jīng)常有香客問我,道長率碾,這世上最難降的妖魔是什么叔营? 我笑而不...
    開封第一講書人閱讀 59,618評論 1 296
  • 正文 為了忘掉前任,我火速辦了婚禮所宰,結(jié)果婚禮上绒尊,老公的妹妹穿的比我還像新娘。我一直安慰自己仔粥,他們只是感情好婴谱,可當我...
    茶點故事閱讀 68,618評論 6 397
  • 文/花漫 我一把揭開白布蟹但。 她就那樣靜靜地躺著,像睡著了一般谭羔。 火紅的嫁衣襯著肌膚如雪华糖。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,246評論 1 308
  • 那天瘟裸,我揣著相機與錄音客叉,去河邊找鬼。 笑死话告,一個胖子當著我的面吹牛兼搏,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播沙郭,決...
    沈念sama閱讀 40,819評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼佛呻,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了病线?” 一聲冷哼從身側(cè)響起件相,我...
    開封第一講書人閱讀 39,725評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎氧苍,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體泛范,經(jīng)...
    沈念sama閱讀 46,268評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡让虐,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,356評論 3 340
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了罢荡。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片赡突。...
    茶點故事閱讀 40,488評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖区赵,靈堂內(nèi)的尸體忽然破棺而出惭缰,到底是詐尸還是另有隱情,我是刑警寧澤笼才,帶...
    沈念sama閱讀 36,181評論 5 350
  • 正文 年R本政府宣布漱受,位于F島的核電站,受9級特大地震影響骡送,放射性物質(zhì)發(fā)生泄漏昂羡。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,862評論 3 333
  • 文/蒙蒙 一摔踱、第九天 我趴在偏房一處隱蔽的房頂上張望虐先。 院中可真熱鬧,春花似錦派敷、人聲如沸蛹批。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,331評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽腐芍。三九已至差导,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間甸赃,已是汗流浹背柿汛。 一陣腳步聲響...
    開封第一講書人閱讀 33,445評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留埠对,地道東北人络断。 一個月前我還...
    沈念sama閱讀 48,897評論 3 376
  • 正文 我出身青樓,卻偏偏與公主長得像项玛,于是被迫代替她去往敵國和親貌笨。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,500評論 2 359

推薦閱讀更多精彩內(nèi)容