Xcode8新功能Trait Variations

Xcode8.1界面

顯然Trait Variations替換了以前Xcode7的Size Class(尺寸分類,也叫做自適應布局)〕粢希可以看到下面機型與自適應的尺寸匹配起來,變得更加直觀讯赏。

一開始接觸自適應時沒有辦法理解(wC hR)這些緊湊、標準有什么用。其實是給不同的機型和設備在進行UI布局時用的殿怜,這個概念暫時放一放睬澡。

試著選擇設備iPhone7(wC hR),在里面放一個標簽如下圖:

在iPhone7設備視圖中隨意添加一個標簽

然后現(xiàn)在選擇其他設備瀏覽一下(注意現(xiàn)在什么約束也沒有添加)

iPhone SE
iPhone7 Plus
iPad Pro 9.7’’

橫屏情況:

iPhone SE
iPhone7 Plus
iPad Pro 9.7’’

我們只為iPhone7里的設備添加標簽磕谅,然后其他設備也都被添加上了標簽私爷。

現(xiàn)在我就考慮,有沒有辦法做到:只在iPhone設備上添加標簽膊夹,而不在iPad設備添加衬浑。非常可以放刨,而且非常簡單工秩。

我們先刪掉原來的標簽,至于你想在哪臺設備里刪隨你进统,因為都一樣助币。然后再次回到選擇iPhone7設備上,點擊一個非常神奇的按鈕:


設備分類按鈕

選中Width(下文說有什么用)螟碎,然后在界面添加一個標簽:

?截圖

添加完之后點擊Done Varying:

截圖

再看其他設備:

iPhone SE豎屏
iPhone SE橫屏
iPhone7 Plus豎屏
iPhone7 Plus橫屏
iPad Pro9.7’’豎屏
iPad Pro9.7’’橫屏

看到?jīng)]有眉菱?!所有iPhone設備的橫豎屏都有標簽抚芦,而iPad沒有倍谜。等等,好像哪里不對叉抡,iPhone7 Plus橫屏時并沒有標簽啊

圖片源于網(wǎng)絡

這個問題下面繼續(xù)?探討尔崔,先回來說這個按鈕的作用

設備分類按鈕

它實質上是一個過濾器。一旦你選中了復選框褥民,背景會變成深藍色季春,如下圖


設備分類按鈕
?設備分類按鈕

選擇完畢后,其文本是這樣“Done Varying”

設備分類按鈕

選中了Width消返,意味著選取與你正在布局的設備具有相同Width的設備载弄,Height同理耘拇。
現(xiàn)在無法回避尺寸分類了。給出3個例子進一步說明:
(1)如果我們正在使用iPhone7 (wC hR)UI布局宇攻,且分類按鈕選了Width惫叛,那么如果對iPhone7的UI進行修改,會使同為wC的設備比如(wC hC)逞刷、(wC hR)的UI產(chǎn)生改變嘉涌。
(2)如果我們正在使用iPhone7 (wC hR)UI布局,且分類按鈕選了Height夸浅,那么如果對iPhone7的UI進行修改仑最,會使同為hR的設備比如(wR hR)、(wC hR)的UI產(chǎn)生改變帆喇。
(3)如果我們正在使用iPhone7 (wC hR)UI布局警医,且分類按鈕選了Width和Height,那么如果對iPhone7的UI進行修改坯钦,會使同為(wC hR)的設備的UI產(chǎn)生改變预皇。

因此記住設備的尺寸分類就能很好地使用自適應布局了。
w和h都只有C和R兩種尺寸選擇婉刀。(原來還有一個Any深啤,但在Xcode8已經(jīng)不用了)
那么會數(shù)數(shù)的朋友都知道組合起來就有4種結果
**(1)(wC hC)
(2)(wR hR)
(3)(wC hR)
(4)(wR hC) **

  • 最常用的是第三種(wC hR),它適用于一切尺寸的豎屏iPhone路星。
  • 比較常用的是第二種(wR hR)溯街,適用所有iPad的所有橫屏豎屏。
  • 剩下的第一種和第四種都只會用在iPhone的橫屏上洋丐,而第一種(wC hC)適用于除了iPhone x Plus以外的所有橫屏呈昔,第四種(wR hC)適用于iPhone x Plus的橫屏。(其中x為6友绝、6s堤尾、7、7s... 遞增序列)迁客。

?再提醒一句郭宝,如果你修改完畢后,記得點擊"Done Varying"掷漱。對于沒有用習慣的人來說粘室,比如我,使用它是很容易會犯錯誤的卜范。

</br>

說了這么多衔统,來幾道送分題:
(1)為什么上面iPhone 7 Plus橫屏中沒有標簽?
(2)如果我們正在使用iPad Pro9.7’’進行UI布局,如果分類按鈕選了Width和Height锦爵,那么對UI進行修改舱殿,請問會使哪些設備的UI產(chǎn)生改變?
(3)如果我們正在使用iPad Pro12.9’’(wR hR)進行UI布局险掀,如果分類按鈕選了Height沪袭,那么對UI進行修改,請問會使哪些設備的UI產(chǎn)生改變樟氢?
(4)如果我們正在使用iPhone SE進行UI布局枝恋,如果分類按鈕選了Width,那么對UI進行修改嗡害,請問會使哪些設備的UI產(chǎn)生改變?

</br>

回過頭說自己寫此文的初衷畦攘,是因為當我掌握了上面的技術之后遇到了一個問題:我只打算在iPad版本上修改標簽霸妹,把字體變得大一些,卻使其他iPhone設備上的標簽也都變大了知押。這時候使用過濾器就沒有效果了叹螟,我們需要為標簽的字體Font增加一個(wR hR)的版本:

標簽屬性Font

點擊Font屬性前的加號,點擊Add Variation

標簽屬性Font
標簽屬性Font

現(xiàn)在標簽的屬性Font有2行台盯,一行是通用的Font罢绽,另一行帶有(wR hR)標簽的是針對特定尺寸的。特定會覆蓋通用静盅,需要再添加一個(wC hR)良价、(wC wC)或(wR wC)都可以。如果沒有任何指定蒿叠,就默認使用通用屬性明垢。

細心可以發(fā)現(xiàn)標簽內(nèi)有大量可以指定尺寸進行設置的屬性:

label屬性

還有更為徹底的,如果想指定尺寸選擇一個新的標簽控件市咽,可以在控件屬性最下端痊银,操作是類似的,左邊的加號指定尺寸施绎,Installed表示通用:

installed
最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末溯革,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子谷醉,更是在濱河造成了極大的恐慌致稀,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,194評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件俱尼,死亡現(xiàn)場離奇詭異豺裆,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,058評論 2 385
  • 文/潘曉璐 我一進店門臭猜,熙熙樓的掌柜王于貴愁眉苦臉地迎上來躺酒,“玉大人,你說我怎么就攤上這事蔑歌「Γ” “怎么了?”我有些...
    開封第一講書人閱讀 156,780評論 0 346
  • 文/不壞的土叔 我叫張陵次屠,是天一觀的道長园匹。 經(jīng)常有香客問我,道長劫灶,這世上最難降的妖魔是什么裸违? 我笑而不...
    開封第一講書人閱讀 56,388評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮本昏,結果婚禮上供汛,老公的妹妹穿的比我還像新娘。我一直安慰自己涌穆,他們只是感情好怔昨,可當我...
    茶點故事閱讀 65,430評論 5 384
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著宿稀,像睡著了一般趁舀。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上祝沸,一...
    開封第一講書人閱讀 49,764評論 1 290
  • 那天矮烹,我揣著相機與錄音,去河邊找鬼罩锐。 笑死擂送,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的唯欣。 我是一名探鬼主播嘹吨,決...
    沈念sama閱讀 38,907評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼境氢!你這毒婦竟也來了蟀拷?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 37,679評論 0 266
  • 序言:老撾萬榮一對情侶失蹤萍聊,失蹤者是張志新(化名)和其女友劉穎问芬,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體寿桨,經(jīng)...
    沈念sama閱讀 44,122評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡此衅,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,459評論 2 325
  • 正文 我和宋清朗相戀三年强戴,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片挡鞍。...
    茶點故事閱讀 38,605評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡骑歹,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出墨微,到底是詐尸還是另有隱情道媚,我是刑警寧澤,帶...
    沈念sama閱讀 34,270評論 4 329
  • 正文 年R本政府宣布翘县,位于F島的核電站最域,受9級特大地震影響,放射性物質發(fā)生泄漏锈麸。R本人自食惡果不足惜镀脂,卻給世界環(huán)境...
    茶點故事閱讀 39,867評論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望忘伞。 院中可真熱鬧薄翅,春花似錦、人聲如沸虑省。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,734評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽探颈。三九已至,卻和暖如春训措,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背绩鸣。 一陣腳步聲響...
    開封第一講書人閱讀 31,961評論 1 265
  • 我被黑心中介騙來泰國打工怀大, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人呀闻。 一個月前我還...
    沈念sama閱讀 46,297評論 2 360
  • 正文 我出身青樓化借,卻偏偏與公主長得像,于是被迫代替她去往敵國和親捡多。 傳聞我的和親對象是個殘疾皇子蓖康,可洞房花燭夜當晚...
    茶點故事閱讀 43,472評論 2 348

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

  • Chapter 1 構建自適應用戶界面 @(Intermediate iOS 10 Programming wit...
    劉銘iOS閱讀 1,844評論 0 1
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,737評論 1 92
  • 發(fā)現(xiàn) 關注 消息 iOS 第三方庫垒手、插件蒜焊、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,059評論 4 62
  • (本文翻譯自AppCoda創(chuàng)建者Simon Ng出版的書籍《iOS開發(fā)中級教程》,詳見:Intermediate ...
    我是喬忘記瘋狂閱讀 4,630評論 13 32
  • 午后科贬,斜陽 衣冠不整的方掌柜急匆匆的夾著個油布包裹泳梆,,從院外快步走進。 “哎呀呀优妙,不好意思乘综,不好意思,今兒鋪子里查...
    青陽卜公閱讀 253評論 0 0