Xcode 8之Trait Variations横竖屏布局,屏幕尺寸适配

横竖屏布局效果如下:

横竖屏不同布局和约束.gif

在inspector中可以看到Trait Variation取代了之前的sizeclass(关于sizeclass这篇文章不错 sizeclass介绍),和sizeclass一样默认选中状态(以下截图都是Xcode8.2环境)

D6D7AEAD-0590-4650-A67E-E64A70E0FBB2.png

用Trait Variations实现横竖屏不同约束

之前sizeclass 的compact,regular,any位置有所改变,如下:

1.png

准备工作##############

在storyBoard上拖入任意view,设置颜色

2.png

1.竖屏

a.先选中竖屏图标(横屏时选中横屏图标)

2385DFA8-EAD6-42EF-B9DE-2BA740E82B45.png

b.点击右侧的Vary for Traits,在弹出的小提示框选择width和height(观察左侧图标横竖屏的变化),竖屏时选中height,width选不选都可以,区域变蓝
c.选中view添加约束,填完后点击"Done Varing"
2.横屏
操作步骤同竖屏,如下:
选中横屏--->点击Vary for Traits--->选择width(height选不选都可以)--->添加约束--->点击Done Varing

4BA68577-C7CC-4E51-84E6-ECDE4C6BC8F8.png

效果如图:

横竖屏不同约束添加.gif

(在我敲这个粗体"竖屏"的时候,发现原来字体是这么调节的,用#号来控制,文字前面一个#应该是最大的字体,#越多字越小#,6个#最小;重启一行才有效果,应该是为标题之类的专门设置的哇,个人总结欢迎指正)

一个井

前六个井的效果

文字划线:前后两个波浪线的效果
斜体:前后三个星号的效果

2BD481AF-EDF8-4963-8A10-2BE88458207E.png