Xcode8新功能Trait Variations

Xcode8.1界面

顯然Trait Variations替換了以前Xcode7的Size Class(尺寸分類,也叫做自適應布局)??梢钥吹较旅鏅C型與自適應的尺寸匹配起來,變得更加直觀。

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

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

在iPhone7設(shè)備視圖中隨意添加一個標簽

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

iPhone SE
iPhone7 Plus
iPad Pro 9.7’’

橫屏情況:

iPhone SE
iPhone7 Plus
iPad Pro 9.7’’

我們只為iPhone7里的設(shè)備添加標簽,然后其他設(shè)備也都被添加上了標簽。

現(xiàn)在我就考慮,有沒有辦法做到:只在iPhone設(shè)備上添加標簽,而不在iPad設(shè)備添加。非??梢?,而且非常簡單。

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


設(shè)備分類按鈕

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

?截圖

添加完之后點擊Done Varying:

截圖

再看其他設(shè)備:

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

看到?jīng)]有?!所有iPhone設(shè)備的橫豎屏都有標簽,而iPad沒有。等等,好像哪里不對,iPhone7 Plus橫屏時并沒有標簽啊

圖片源于網(wǎng)絡

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

設(shè)備分類按鈕

它實質(zhì)上是一個過濾器。一旦你選中了復選框,背景會變成深藍色,如下圖


設(shè)備分類按鈕
?設(shè)備分類按鈕

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

設(shè)備分類按鈕

選中了Width,意味著選取與你正在布局的設(shè)備具有相同Width的設(shè)備,Height同理。
現(xiàn)在無法回避尺寸分類了。給出3個例子進一步說明:
(1)如果我們正在使用iPhone7 (wC hR)UI布局,且分類按鈕選了Width,那么如果對iPhone7的UI進行修改,會使同為wC的設(shè)備比如(wC hC)、(wC hR)的UI產(chǎn)生改變。
(2)如果我們正在使用iPhone7 (wC hR)UI布局,且分類按鈕選了Height,那么如果對iPhone7的UI進行修改,會使同為hR的設(shè)備比如(wR hR)、(wC hR)的UI產(chǎn)生改變。
(3)如果我們正在使用iPhone7 (wC hR)UI布局,且分類按鈕選了Width和Height,那么如果對iPhone7的UI進行修改,會使同為(wC hR)的設(shè)備的UI產(chǎn)生改變。

因此記住設(shè)備的尺寸分類就能很好地使用自適應布局了。
w和h都只有C和R兩種尺寸選擇。(原來還有一個Any,但在Xcode8已經(jīng)不用了)
那么會數(shù)數(shù)的朋友都知道組合起來就有4種結(jié)果
**(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進行修改,請問會使哪些設(shè)備的UI產(chǎn)生改變?
(3)如果我們正在使用iPad Pro12.9’’(wR hR)進行UI布局,如果分類按鈕選了Height,那么對UI進行修改,請問會使哪些設(shè)備的UI產(chǎn)生改變?
(4)如果我們正在使用iPhone SE進行UI布局,如果分類按鈕選了Width,那么對UI進行修改,請問會使哪些設(shè)備的UI產(chǎn)生改變?

</br>

回過頭說自己寫此文的初衷,是因為當我掌握了上面的技術(shù)之后遇到了一個問題:我只打算在iPad版本上修改標簽,把字體變得大一些,卻使其他iPhone設(shè)備上的標簽也都變大了。這時候使用過濾器就沒有效果了,我們需要為標簽的字體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)有大量可以指定尺寸進行設(shè)置的屬性:

label屬性

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

installed
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

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

友情鏈接更多精彩內(nèi)容