特征變量(Trait Variations)
Trait Variations，特征變量。
在Xcode8中刪除了size class選項(xiàng)，取而代之的是Use Trait Variations選項(xiàng)。用來聲明APP在不同設(shè)備上的不同特征。這帶給我的將是一種新的適配方式。
特征(Trait)
特征(Trait)，特征是描述當(dāng)前設(shè)備配置的一部分。特征包括APP可用的屏幕區(qū)域，顯示的分辨率、色域，亮色或暗色的外觀。您可以創(chuàng)建你的用戶界面元素的不同組合的特征變量。
特征 Trait | 描述 Description
| Horizontal size class | 你的iOS APP可用的總寬度 |
| Vertical size class | 你的APP可用的總高度 |
| Color gamut | iOS設(shè)備的使用等色彩空間 |
| Display scale | 屏幕的像素密度 |
| Apple Watch size | Apple Watch的尺寸 |
| Interface style | 亮色或暗色風(fēng)格的tvOS用戶界面 |
使用不同的設(shè)備配置視圖的用戶界面
在 Interface Builder（界面構(gòu)建器）,使用設(shè)備配置面板觀看使用不同的設(shè)備配置后的布局。例如,一個(gè)iOS APP的布局可以在iPhone和iPad和使用橫向或縱向方向存在不同。tvOS APP的用戶界面在使用亮色或暗色界面風(fēng)格(interface style)下存在不同。你第一次打開用戶界面文件,選擇你期望大多數(shù)用戶使用你的應(yīng)用程序的設(shè)備,然后創(chuàng)建用戶界面在其他設(shè)備上需要的變量(Variations)。
1.打開設(shè)備配置面板,單擊在畫布下邊布局條上的“View as”按鈕。
打開設(shè)備配置面板,單擊在畫布下邊布局條上的“View as”按鈕。
2.選擇設(shè)備
在設(shè)備區(qū)域，選擇一個(gè)設(shè)備。你選擇的設(shè)備系列會(huì)出現(xiàn)在布局條中的"View as" 按鈕上。對(duì)于iOS APP, 選擇一個(gè)iOS設(shè)備系列, 對(duì)于watchOS APP, 選擇一個(gè)Apple Watch尺寸
看到某個(gè)具體的機(jī)型，選擇設(shè)備，很容易被誤導(dǎo)以為特征變量會(huì)針對(duì)具體機(jī)型生效，其實(shí)并不是針對(duì)具體哪一個(gè)設(shè)備，而是相同sizeclass的一類設(shè)備，所以添加特征變量是影響一類設(shè)備。
哎..其實(shí)被誤導(dǎo)后，還是很激動(dòng)的，如果蘋果真要可以針對(duì)不同機(jī)型設(shè)置不同特征變量。那將會(huì)非常有利于屏幕適配。
![]()
dce_watchos
3.選擇方向
在Adaptation適應(yīng)區(qū)域，選擇一個(gè)適應(yīng)，對(duì)于你的應(yīng)用可用的屏幕空間數(shù)量的Variation變量，例如,為iPad設(shè)備選擇Split View視圖。
![]()
334c3405-4f44-4b96-a0f6-78259065ee1f
4.選擇界面風(fēng)格
在Interface Style界面風(fēng)格區(qū)域，選擇一個(gè)影響視覺的界面樣式，例如，亮色或暗色的tvOS界面風(fēng)格。
為不同的設(shè)備配置創(chuàng)建用戶界面的變量
在Interface Builder界面構(gòu)建器，您可以為不同的設(shè)備配置使用設(shè)備配置面板添加、刪除和編輯用戶界面的變量。在你創(chuàng)建一個(gè)變量之前，選擇一個(gè)你想要變化的設(shè)備配置。
![]()
5de0ab2a-4390-427b-bee1-08f1e6169f0d
1.在設(shè)備配置面板中,單擊“Vary for”按鈕。設(shè)備配置面板中顯示了此配置的所有受影響的設(shè)備。
2.對(duì)于iOS APP,在彈出窗口中,選擇 Size Class(寬度、高度,或兩者)
Size Class特征定義一個(gè)抽象的或真正的iOS設(shè)備上的屏幕尺寸。在選擇特征后,點(diǎn)擊界面構(gòu)建器任何位置關(guān)閉彈出窗口。
設(shè)備配置的窗格顯示受影響的設(shè)備。
3.修改在Interface Builder中的設(shè)備配置
在變量模式，任何更改會(huì)生效在畫布上，創(chuàng)建一個(gè)當(dāng)前設(shè)備的配置變量或更新現(xiàn)有的變量。
4.點(diǎn)擊“Done Varying”按鈕
Interface Builder界面構(gòu)建器在畫布上停止添加變量給不同視圖的屬性和約束。
使用檢查器編輯基于特征的屬性變量值
您可以為不同的設(shè)備特征使用Attributes inspector屬性檢查器和Size inspector尺寸檢查器自定義對(duì)象的屬性值。因此，創(chuàng)建用戶界面的變量類似于使用設(shè)備配置面板。
1.增加基于特征的屬性值
- 在
Interface Builder界面構(gòu)建器中，選擇一個(gè)在畫布上的對(duì)象。 - 選擇檢查器包含的所需屬性。
- 點(diǎn)擊接近屬性控制的
(Add Customization)增加自定義按鈕(+) - 在彈出窗口中,選擇一個(gè)設(shè)備配置。對(duì)于
watchOS APP，選擇一個(gè)Apple Watch設(shè)備，對(duì)于tvOS APP,選擇一個(gè)界面風(fēng)格。對(duì)于iOS APP，從彈出框選擇一個(gè)設(shè)備配置表示為Size Class和gamut顏色范圍。c155f1e5-74d9-44bf-a33f-1b998d034b51選擇一個(gè)設(shè)備配置后,設(shè)備配置指定的控制出現(xiàn)在屬性控制中。9806160f-3287-4400-8af5-ca4bdb4552ee - 改變?cè)O(shè)備配置指定的屬性值。
2.移除基于特征的屬性值
- 在界面構(gòu)建器中,選擇一個(gè)在畫布上的對(duì)象。
- 選擇檢查器包含的所需屬性。
- 單擊接近設(shè)備配置指定的控制旁邊的(
Remove Customization)刪除自定義按鈕(x)自定義從屬性中移除34a3285b-9aeb-4f06-b6da-d0db4cf61432
用戶界面的變量
用戶界面變量是基于設(shè)備配置的一個(gè)你的用戶界面變化的表示，如改變了背景顏色和其他元素時(shí),設(shè)備設(shè)置成暗色的風(fēng)格。變化可以適用于用戶界面的一個(gè)元素,例如刪除約束，或者一個(gè)視圖類的屬性或約束，如一個(gè)Label的字體。
你可以改變的:
- Size or position of a view (視圖的位置或大小)
- Installation of a view (視圖的裝載)
- Installation of a constraint (約束的裝載)
- Constraint constant (約束常量)
- Font (字體)
- Color for the font, tint, or background (字體顏色，色彩或背景)
- Layout margins (布局的間距)
- Image file (圖片文件)
可以改變的特定屬性取決于元素的類。
Size Class
size class 標(biāo)識(shí)可用于應(yīng)用程序的高度和寬度相對(duì)數(shù)量的顯示空間。每個(gè)維度可以是compact緊湊的，例如，在iPhone橫向的高度。或者是regular不變的,例如，iPad的高度或?qū)挾?。因?yàn)榇蟛糠?code>APP的布局不需要改變?nèi)魏慰捎玫钠聊淮笮?有一個(gè)額外的值
一個(gè)視圖控制器的當(dāng)前size class是基于三個(gè)因素:
- 設(shè)備的屏幕大小。
- 設(shè)備的方向。
- 對(duì)于視圖控制器屏幕的一部分可用。例如，當(dāng)一個(gè)分屏視圖控制器顯示
master和detail控制器，控制器都沒有進(jìn)入全屏。
Interface Builder 界面構(gòu)建器允許您自定義布局、約束和基于size class的對(duì)象的屬性。布局然后通過size class自動(dòng)調(diào)整大小。例如，,當(dāng)用戶從豎屏轉(zhuǎn)換到橫屏視圖，或在iPad上打開一個(gè)split view拆分視圖。
