Xcode8 在 UI 設計時的橫豎屏匹配問題

資料來源 AN INTRODUCTION TO SIZE CLASSES FOR XCODE 8

為了避免屏幕尺寸碎片化帶給開發(fā)者額外的巨大工作量诱贿,使得開發(fā)者可以僅僅在一個 storyboard 做出能夠適配所有尺寸屏幕的App,Apple引入了auto Layout 搓蚪。這使得很多原本需要開發(fā)者自行處理的UI設計工作被system負責起來郭蕉,大大降低了開發(fā)者的工作量疼邀。

在iOS 8中,Apple提出了size classes ,這是一種允許我們在任何大小及方向的屏幕上依賴 auto Layout 來描述UI設計的方法召锈。Apple更改了部分 UIKit classes 旁振,使它們依賴于 size classes

size classes 包括 compactregular 兩種涨岁。因為用戶在使用不同尺寸的設備時會有不同的拿持姿勢和使用習慣拐袜,比如大多數(shù)人會單手使用iPhone SE,但很少有人會選擇單手使用一個iPad梢薪〉牌蹋基于這一點,開發(fā)者很多時候需要根據(jù)不同尺寸的屏幕給同一個view設置不同的大小和位置秉撇。Apple為了解決這一問題(我覺得...)甜攀,提出了以上兩種標準以方便開發(fā)者。

size-classes.png

在舊版本的Xcode中默認的 size classesAny 琐馆,但在最新的Xcode 8中规阀,Apple沒有再使用 Any ,而是要求storyboard對應具體的設備瘦麸,如下圖谁撼。

view_as_bar.png

在UI設計過程中,選擇不同的 DeviceOrientation滋饲,storyboard就會以對應的形式展現(xiàn)彤敛。

圖中" iPhone 7(wC hC) "就表示當前storyboard中模擬的就是水平的iPhone7屏幕。

其中" wC hC "指的是 width:Compact了赌; height:Regular ,這意味著你可以在該情況下為所有橫屏的iphone(除7plus外)設計一個可以完美適配的UI玄糟。

注意觀察你會發(fā)現(xiàn)右下方有一個 Vary for Traits 按鈕勿她。點擊它會彈出如下對話框:

varyForTraits.png

這里的 WidthHeight 其實是對應左邊所選定的設備信息。

  1. 當你只選擇Width時阵翎,如圖「注意右上角View as對應的是(wC hR)」:

    widthSelected.png

    這表示你希望對所有滿足Width:Compact且Height:Any的情況設計統(tǒng)一適配的UI界面逢并,而Xcode也用heightlight提醒你之剧,當前正在對如圖中所列出的14種情況設計獨有的通用UI。

  2. 同理砍聊,只選擇Height則代表你希望對所有滿足 Width:Any且Height:Regular 的情況單獨設計UI背稼,如圖:

    heightSelected.png

  1. 當同時選擇兩者時,如圖:
    bothSelected.png

這樣玻蝌,我們就可以根據(jù)自己的需要隨心所欲的設計自己的App了蟹肘。

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市俯树,隨后出現(xiàn)的幾起案子帘腹,更是在濱河造成了極大的恐慌,老刑警劉巖许饿,帶你破解...
    沈念sama閱讀 212,383評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件阳欲,死亡現(xiàn)場離奇詭異,居然都是意外死亡陋率,警方通過查閱死者的電腦和手機球化,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,522評論 3 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來瓦糟,“玉大人筒愚,你說我怎么就攤上這事±暌常” “怎么了锨能?”我有些...
    開封第一講書人閱讀 157,852評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長芍耘。 經(jīng)常有香客問我址遇,道長,這世上最難降的妖魔是什么斋竞? 我笑而不...
    開封第一講書人閱讀 56,621評論 1 284
  • 正文 為了忘掉前任倔约,我火速辦了婚禮,結(jié)果婚禮上坝初,老公的妹妹穿的比我還像新娘浸剩。我一直安慰自己,他們只是感情好鳄袍,可當我...
    茶點故事閱讀 65,741評論 6 386
  • 文/花漫 我一把揭開白布绢要。 她就那樣靜靜地躺著,像睡著了一般拗小。 火紅的嫁衣襯著肌膚如雪重罪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,929評論 1 290
  • 那天,我揣著相機與錄音剿配,去河邊找鬼搅幅。 笑死,一個胖子當著我的面吹牛呼胚,可吹牛的內(nèi)容都是我干的茄唐。 我是一名探鬼主播,決...
    沈念sama閱讀 39,076評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼蝇更,長吁一口氣:“原來是場噩夢啊……” “哼沪编!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起簿寂,我...
    開封第一講書人閱讀 37,803評論 0 268
  • 序言:老撾萬榮一對情侶失蹤漾抬,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后常遂,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體纳令,經(jīng)...
    沈念sama閱讀 44,265評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,582評論 2 327
  • 正文 我和宋清朗相戀三年克胳,在試婚紗的時候發(fā)現(xiàn)自己被綠了平绩。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,716評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡漠另,死狀恐怖捏雌,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情笆搓,我是刑警寧澤性湿,帶...
    沈念sama閱讀 34,395評論 4 333
  • 正文 年R本政府宣布,位于F島的核電站满败,受9級特大地震影響肤频,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜算墨,卻給世界環(huán)境...
    茶點故事閱讀 40,039評論 3 316
  • 文/蒙蒙 一宵荒、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧净嘀,春花似錦报咳、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,798評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至膜眠,卻和暖如春岩臣,著一層夾襖步出監(jiān)牢的瞬間袁翁,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,027評論 1 266
  • 我被黑心中介騙來泰國打工婿脸, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人柄驻。 一個月前我還...
    沈念sama閱讀 46,488評論 2 361
  • 正文 我出身青樓狐树,卻偏偏與公主長得像,于是被迫代替她去往敵國和親鸿脓。 傳聞我的和親對象是個殘疾皇子抑钟,可洞房花燭夜當晚...
    茶點故事閱讀 43,612評論 2 350

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