iOS開發(fā)之特征變量(Use Trait Variations)

原文地址:http://www.skyfox.org/ios-use-trait-variations.html

特征變量(Trait Variations)

Trait Variations贪染,特征變量较性。

在Xcode8中刪除了size class選項苦酱,取而代之的是Use Trait Variations選項铺遂。用來聲明APP在不同設備上的不同特征热鞍。這帶給我的將是一種新的適配方式。

特征(Trait)

特征(Trait),特征是描述當前設備配置的一部分。特征包括APP可用的屏幕區(qū)域漾抬,顯示的分辨率、色域常遂,亮色或暗色的外觀纳令。您可以創(chuàng)建你的用戶界面元素的不同組合的特征變量。

特征 Trait

描述 Description

Horizontal size class你的iOS APP可用的總寬度

Vertical size class你的APP可用的總高度

Color gamutiOS設備的使用等色彩空間

Display scale屏幕的像素密度

Apple Watch sizeApple Watch的尺寸

Interface style亮色或暗色風格的tvOS用戶界面

使用不同的設備配置視圖的用戶界面

在Interface Builder(界面構建器),使用設備配置面板觀看使用不同的設備配置后的布局克胳。例如,一個iOS APP的布局可以在iPhone和iPad和使用橫向或縱向方向存在不同平绩。tvOS APP的用戶界面在使用亮色或暗色界面風格(interface style)下存在不同。你第一次打開用戶界面文件,選擇你期望大多數用戶使用你的應用程序的設備,然后創(chuàng)建用戶界面在其他設備上需要的變量(Variations)漠另。

1.打開設備配置面板,單擊在畫布下邊布局條上的“View as”按鈕捏雌。

打開設備配置面板,單擊在畫布下邊布局條上的“View as”按鈕。

2.選擇設備

在設備區(qū)域酗钞,選擇一個設備腹忽。你選擇的設備系列會出現在布局條中的"View as" 按鈕上来累。對于iOS APP, 選擇一個iOS設備系列, 對于watchOS APP, 選擇一個Apple Watch尺寸

3.選擇方向

在Adaptation適應區(qū)域,選擇一個適應窘奏,對于你的應用可用的屏幕空間數量的Variation變量嘹锁,例如,為iPad設備選擇Split View視圖。

4.選擇界面風格

在Interface Style界面風格區(qū)域着裹,選擇一個影響視覺的界面樣式领猾,例如,亮色或暗色的tvOS界面風格骇扇。

為不同的設備配置創(chuàng)建用戶界面的變量

在Interface Builder界面構建器摔竿,您可以為不同的設備配置使用設備配置面板添加、刪除和編輯用戶界面的變量少孝。在你創(chuàng)建一個變量之前继低,選擇一個你想要變化的設備配置。

1.在設備配置面板中,單擊“Vary for”按鈕稍走。設備配置面板中顯示了此配置的所有受影響的設備袁翁。

2.對于iOS APP,在彈出窗口中,選擇 Size Class(寬度、高度,或兩者)

Size Class特征定義一個抽象的或真正的iOS設備上的屏幕尺寸婿脸。在選擇特征后,點擊界面構建器任何位置關閉彈出窗口粱胜。

設備配置的窗格顯示受影響的設備。

3.修改在Interface Builder中的設備配置

在變量模式狐树,任何更改會生效在畫布上焙压,創(chuàng)建一個當前設備的配置變量或更新現有的變量。

4.點擊“Done Varying”按鈕

Interface Builder界面構建器在畫布上停止添加變量給不同視圖的屬性和約束抑钟。

使用檢查器編輯基于特征的屬性變量值

您可以為不同的設備特征使用Attributes inspector屬性檢查器和Size inspector尺寸檢查器自定義對象的屬性值涯曲。因此,創(chuàng)建用戶界面的變量類似于使用設備配置面板在塔。

1.增加基于特征的屬性值

在Interface Builder界面構建器中掀抹,選擇一個在畫布上的對象。

選擇檢查器包含的所需屬性心俗。

點擊接近屬性控制的(Add Customization)增加自定義按鈕(+)

在彈出窗口中,選擇一個設備配置傲武。對于watchOS APP,選擇一個Apple Watch設備城榛,對于tvOS APP,選擇一個界面風格揪利。對于iOS APP,從彈出框選擇一個設備配置表示為Size Class和gamut顏色范圍狠持。選擇一個設備配置后,設備配置指定的控制出現在屬性控制中疟位。

改變設備配置指定的屬性值。

2.移除基于特征的屬性值

在界面構建器中,選擇一個在畫布上的對象喘垂。

選擇檢查器包含的所需屬性甜刻。

單擊接近設備配置指定的控制旁邊的(Remove Customization)刪除自定義按鈕(x)自定義從屬性中移除

用戶界面的變量

用戶界面變量是基于設備配置的一個你的用戶界面變化的表示绍撞,如改變了背景顏色和其他元素時,設備設置成暗色的風格。變化可以適用于用戶界面的一個元素,例如刪除約束得院,或者一個視圖類的屬性或約束傻铣,如一個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標識可用于應用程序的高度和寬度相對數量的顯示空間。每個維度可以是compact緊湊的蜕径,例如两踏,在iPhone橫向的高度《涤鳎或者是regular不變的,例如梦染,iPad的高度或寬度。因為大部分APP的布局不需要改變任何可用的屏幕大小,有一個額外的值

一個視圖控制器的當前size class是基于三個因素:

設備的屏幕大小朴皆。

設備的方向弓坞。

對于視圖控制器屏幕的一部分可用。例如车荔,當一個分屏視圖控制器顯示master和detail控制器,控制器都沒有進入全屏戚扳。

Interface Builder界面構建器允許您自定義布局忧便、約束和基于size class的對象的屬性。布局然后通過size class自動調整大小帽借。例如珠增,,當用戶從豎屏轉換到橫屏視圖,或在iPad上打開一個split view拆分視圖砍艾。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末蒂教,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子脆荷,更是在濱河造成了極大的恐慌凝垛,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,743評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件蜓谋,死亡現場離奇詭異梦皮,居然都是意外死亡,警方通過查閱死者的電腦和手機桃焕,發(fā)現死者居然都...
    沈念sama閱讀 90,296評論 3 385
  • 文/潘曉璐 我一進店門剑肯,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人观堂,你說我怎么就攤上這事让网⊙接牵” “怎么了?”我有些...
    開封第一講書人閱讀 157,285評論 0 348
  • 文/不壞的土叔 我叫張陵溃睹,是天一觀的道長而账。 經常有香客問我,道長丸凭,這世上最難降的妖魔是什么福扬? 我笑而不...
    開封第一講書人閱讀 56,485評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮惜犀,結果婚禮上铛碑,老公的妹妹穿的比我還像新娘。我一直安慰自己虽界,他們只是感情好汽烦,可當我...
    茶點故事閱讀 65,581評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著莉御,像睡著了一般撇吞。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上礁叔,一...
    開封第一講書人閱讀 49,821評論 1 290
  • 那天牍颈,我揣著相機與錄音,去河邊找鬼琅关。 笑死煮岁,一個胖子當著我的面吹牛,可吹牛的內容都是我干的涣易。 我是一名探鬼主播画机,決...
    沈念sama閱讀 38,960評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼新症!你這毒婦竟也來了步氏?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 37,719評論 0 266
  • 序言:老撾萬榮一對情侶失蹤徒爹,失蹤者是張志新(化名)和其女友劉穎荚醒,沒想到半個月后,有當地人在樹林里發(fā)現了一具尸體隆嗅,經...
    沈念sama閱讀 44,186評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡腌且,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,516評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現自己被綠了榛瓮。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片铺董。...
    茶點故事閱讀 38,650評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出精续,到底是詐尸還是另有隱情坝锰,我是刑警寧澤,帶...
    沈念sama閱讀 34,329評論 4 330
  • 正文 年R本政府宣布重付,位于F島的核電站顷级,受9級特大地震影響,放射性物質發(fā)生泄漏确垫。R本人自食惡果不足惜弓颈,卻給世界環(huán)境...
    茶點故事閱讀 39,936評論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望删掀。 院中可真熱鬧翔冀,春花似錦、人聲如沸披泪。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,757評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽款票。三九已至控硼,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間艾少,已是汗流浹背卡乾。 一陣腳步聲響...
    開封第一講書人閱讀 31,991評論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留缚够,地道東北人幔妨。 一個月前我還...
    沈念sama閱讀 46,370評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像潮瓶,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子钙姊,可洞房花燭夜當晚...
    茶點故事閱讀 43,527評論 2 349

推薦閱讀更多精彩內容