Xcode8新功能Trait Variations

Xcode8.1界面

显然Trait Variations替换了以前Xcode7的Size Class(尺寸分类,也叫做自适应布局)。可以看到下面机型与自适应的尺寸匹配起来,变得更加直观。

一开始接触自适应时没有办法理解(wC hR)这些紧凑、标准有什么用。其实是给不同的机型和设备在进行UI布局时用的,这个概念暂时放一放。

试着选择设备iPhone7(wC hR),在里面放一个标签如下图:

在iPhone7设备视图中随意添加一个标签

然后现在选择其他设备浏览一下(注意现在什么约束也没有添加)

iPhone SE
iPhone7 Plus
iPad Pro 9.7’’

横屏情况:

iPhone SE
iPhone7 Plus
iPad Pro 9.7’’

我们只为iPhone7里的设备添加标签,然后其他设备也都被添加上了标签。

现在我就考虑,有没有办法做到:只在iPhone设备上添加标签,而不在iPad设备添加。非常可以,而且非常简单。

我们先删掉原来的标签,至于你想在哪台设备里删随你,因为都一样。然后再次回到选择iPhone7设备上,点击一个非常神奇的按钮:


设备分类按钮

选中Width(下文说有什么用),然后在界面添加一个标签:

�截图

添加完之后点击Done Varying:

截图

再看其他设备:

iPhone SE竖屏
iPhone SE横屏
iPhone7 Plus竖屏
iPhone7 Plus横屏
iPad Pro9.7’’竖屏
iPad Pro9.7’’横屏

看到没有?!所有iPhone设备的横竖屏都有标签,而iPad没有。等等,好像哪里不对,iPhone7 Plus横屏时并没有标签啊

图片源于网络

这个问题下面继续�探讨,先回来说这个按钮的作用

设备分类按钮

它实质上是一个过滤器。一旦你选中了复选框,背景会变成深蓝色,如下图


设备分类按钮
�设备分类按钮

选择完毕后,其文本是这样“Done Varying”

设备分类按钮

选中了Width,意味着选取与你正在布局的设备具有相同Width的设备,Height同理。
现在无法回避尺寸分类了。给出3个例子进一步说明:
(1)如果我们正在使用iPhone7 (wC hR)UI布局,且分类按钮选了Width,那么如果对iPhone7的UI进行修改,会使同为wC的设备比如(wC hC)、(wC hR)的UI产生改变。
(2)如果我们正在使用iPhone7 (wC hR)UI布局,且分类按钮选了Height,那么如果对iPhone7的UI进行修改,会使同为hR的设备比如(wR hR)、(wC hR)的UI产生改变。
(3)如果我们正在使用iPhone7 (wC hR)UI布局,且分类按钮选了Width和Height,那么如果对iPhone7的UI进行修改,会使同为(wC hR)的设备的UI产生改变。

因此记住设备的尺寸分类就能很好地使用自适应布局了。
w和h都只有C和R两种尺寸选择。(原来还有一个Any,但在Xcode8已经不用了)
那么会数数的朋友都知道组合起来就有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产生改变?
(3)如果我们正在使用iPad Pro12.9’’(wR hR)进行UI布局,如果分类按钮选了Height,那么对UI进行修改,请问会使哪些设备的UI产生改变?
(4)如果我们正在使用iPhone SE进行UI布局,如果分类按钮选了Width,那么对UI进行修改,请问会使哪些设备的UI产生改变?

</br>

回过头说自己写此文的初衷,是因为当我掌握了上面的技术之后遇到了一个问题:我只打算在iPad版本上修改标签,把字体变得大一些,却使其他iPhone设备上的标签也都变大了。这时候使用过滤器就没有效果了,我们需要为标签的字体Font增加一个(wR hR)的版本:

标签属性Font

点击Font属性前的加号,点击Add Variation

标签属性Font
标签属性Font

现在标签的属性Font有2行,一行是通用的Font,另一行带有(wR hR)标签的是针对特定尺寸的。特定会覆盖通用,需要再添加一个(wC hR)、(wC wC)或(wR wC)都可以。如果没有任何指定,就默认使用通用属性。

细心可以发现标签内有大量可以指定尺寸进行设置的属性:

label属性

还有更为彻底的,如果想指定尺寸选择一个新的标签控件,可以在控件属性最下端,操作是类似的,左边的加号指定尺寸,Installed表示通用:

installed
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,362评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,330评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,247评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,560评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,580评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,569评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,929评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,587评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,840评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,596评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,678评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,366评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,945评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,929评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,165评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,271评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,403评论 2 342

推荐阅读更多精彩内容