iOS - 適配iPad和iPhone及其橫豎屏 (Vary For Traits)

前言

Vary For Traits 直接翻譯過來就是因設(shè)備而異, 就是專門為適配而生的.
Xcode 8 之后的適配開始使用了Vary For Traits了, Vary For Traits可以讓我們很方便的適配iPad和iPhone的各種機型龄寞、橫豎屏耽装、分屏等 (關(guān)于橫豎屏的使用,可以看我的另一篇簡書) , 下面讓我們正式開始學(xué)習Vary For Traits.

本篇的github地址

(學(xué)習這個之前最好有AutoLayout的基礎(chǔ),以便去添加約束)

1.Size Class

Vary For Traits 是基于Size Classes進化而來,我們首先得學(xué)會Size Classes.
Size Classes將屏幕抽象化,將所有屏幕的寬度和高度分為2類 : Compact-緊湊 , Regular-正常 (其實還有一個Any-任意 , Any就是Compact和Regular的任意組合)
下方的表格是各種機型的寬-高分類 , 也就是說每個機型都是Compact和Regular的組合 (例如 : iPhone X 就是Compact-Regular , 緊湊的寬度,正常的高度)
寬-高分類 iPad iPhone Plus iPhone X iPhone 4.7英寸 iPhone 4英寸 iPhone 3.5英寸
豎屏 Regular-Regular Compact-Regular Compact-Regular Compact-Regular Compact-Regular Compact-Regular
橫屏 Regular-Regular Regular-Compact Compact-Compact Compact-Compact Compact-Compact Compact-Compact


2.Vary For Traits (在Interface Builder中使用)

(1) 剛打開新IB界面時,默認是Any-Any(任意-任意)的模式, 此時添加的的約束, 在任意機型下都是通用的. (也就是給所有機型添加同樣的約束)
剛打開IB時
(2) 點擊上圖中的View as iPhone 8,就可以打開Vary For Traits,我們可以看到包含各種型號的iPad,還有5.8英寸, 5.5英寸, 4.7英寸, 4.0英寸, 3.5英寸的iPhone的代表機型,還有橫豎屏
打開后的樣子
(3) 點擊上圖中的Vary for Traits就可以啟用Vary for Traits了, 如下圖 , 啟用的時候需要選擇勾選Width和Height, 這意味著你以選中的機型的Width或者Height為基準進行適配, 這里就用到了我們上面所講的Size Classes了.

例如 : 我選擇了iPhone 8 Plus(8P的豎屏是Compact-Regular,緊湊-正常) , 并且勾選了Width和Height , 就意味著我將適配所有寬度是緊湊,高度是正常的機型,在下圖上可以看到,寬度是緊湊,高度是正常的機型有16款, 接下來我們所添加的約束, 將適用于這16款機型 , 這包括了所有iPhone的豎屏.

啟用Vary for Traits

(4) 添加完約束后, 點擊Done Varying就可以完成這次適配了.

緊接上面的例子 : 點擊Done Varying你就適配好了iPhone的所有豎屏 , 如果你想為所有的iPhone適配橫屏, 你需要選擇一款高度為緊湊的機型, 然后啟用Vary for Traits , 然后勾選高度(Baes On Height), 然后添加約束,然后Done Varying完成 . (從最上方的表格中,我們可以看出所有iPhone的橫屏的高度都是緊湊的, 所有iPhone的豎屏的高度都是正常的)


添加完約束之后
(5) 適配完成之后的效果圖如下,同一個View可以有不同的位置,不同的顏色,甚至不同的行為
Vary for Traits.gif

3.注意

如果你按上面的步驟操作了一遍,發(fā)現(xiàn)并沒有成功的給不同的機型添加了不同的約束,那么你就要注意了,這可能是Xcode的一個Bug導(dǎo)致的,在啟用Vary for Traits前,你需要把先換成橫屏,然后在換成豎屏,然后在啟用Vary for Traits , 這才能真正的添加不同的約束.

最后附上官方文檔地址, 學(xué)習新的東西還是建議去官方文檔上看, 所以學(xué)好英文還是很重要的.

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌驯妄,老刑警劉巖能耻,帶你破解...
    沈念sama閱讀 211,265評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異绕娘,居然都是意外死亡脓规,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,078評論 2 385
  • 文/潘曉璐 我一進店門险领,熙熙樓的掌柜王于貴愁眉苦臉地迎上來侨舆,“玉大人,你說我怎么就攤上這事绢陌“は拢” “怎么了?”我有些...
    開封第一講書人閱讀 156,852評論 0 347
  • 文/不壞的土叔 我叫張陵脐湾,是天一觀的道長臭笆。 經(jīng)常有香客問我,道長秤掌,這世上最難降的妖魔是什么愁铺? 我笑而不...
    開封第一講書人閱讀 56,408評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮闻鉴,結(jié)果婚禮上茵乱,老公的妹妹穿的比我還像新娘。我一直安慰自己孟岛,他們只是感情好似将,可當我...
    茶點故事閱讀 65,445評論 5 384
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著蚀苛,像睡著了一般在验。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上堵未,一...
    開封第一講書人閱讀 49,772評論 1 290
  • 那天腋舌,我揣著相機與錄音,去河邊找鬼渗蟹。 笑死块饺,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的雌芽。 我是一名探鬼主播授艰,決...
    沈念sama閱讀 38,921評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼世落!你這毒婦竟也來了淮腾?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,688評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎谷朝,沒想到半個月后洲押,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,130評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡圆凰,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,467評論 2 325
  • 正文 我和宋清朗相戀三年杈帐,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片专钉。...
    茶點故事閱讀 38,617評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡挑童,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出跃须,到底是詐尸還是另有隱情站叼,我是刑警寧澤,帶...
    沈念sama閱讀 34,276評論 4 329
  • 正文 年R本政府宣布回怜,位于F島的核電站大年,受9級特大地震影響换薄,放射性物質(zhì)發(fā)生泄漏玉雾。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,882評論 3 312
  • 文/蒙蒙 一轻要、第九天 我趴在偏房一處隱蔽的房頂上張望复旬。 院中可真熱鬧,春花似錦冲泥、人聲如沸驹碍。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,740評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽志秃。三九已至,卻和暖如春嚼酝,著一層夾襖步出監(jiān)牢的瞬間浮还,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,967評論 1 265
  • 我被黑心中介騙來泰國打工闽巩, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留钧舌,地道東北人。 一個月前我還...
    沈念sama閱讀 46,315評論 2 360
  • 正文 我出身青樓涎跨,卻偏偏與公主長得像洼冻,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子隅很,可洞房花燭夜當晚...
    茶點故事閱讀 43,486評論 2 348

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