【知识总结】sizeclass使用

作用:

1,仅仅对屏幕进行分类,真正排布UI元素还得使用autolayout;
2,不再有横竖屏的概念,只有屏幕尺寸的概念;
3,不再有具体尺寸的概念,只有抽象尺寸的概念。

属性介绍:

把宽度和高度分为3中情况:
1,Compact:紧凑(小)
2,Any:任意
3,Regular: 宽松(大)

【知识总结】sizeclass使用_第1张图片
屏幕快照 2015-10-12 下午10.39.37.png
 符号代表:
                -:Compact
                *:Any
                +:Regular
 继承性:
                * * :能被其他8种情况继承
                * - :能被 + - \  - - 继承
                + *:能被 + - \ + + 集成
                以此类推。

使用:

1,需求

一个控件(比如switch)在不同的屏幕尺寸的情况下,现在在不同的位置。

2,实现

拖入一个switch

拖入switch控件.png

在右边的工具栏第三项中,勾选 Installed,说明可以显示

勾选Installed显示.png

通过点击 “ + ”按钮添加显示的情况

【知识总结】sizeclass使用_第2张图片
添加需要显示的屏幕情况.png
例如:

只勾选了如图所示的情况

勾选的为需要显示的屏幕.png

那么switch控件只有在对应的屏幕下才可以显示,其他屏幕下是看不见的


【知识总结】sizeclass使用_第3张图片
可显示的情况.png

不同屏幕下实现不同的autolayout约束

如果想要设置不同屏幕下的自动布局,就可以通过例子中的方法,切换到不同的屏幕下,通过autoLayout设置对应的约束

########例如
添加不同的Installed,选择不同的屏幕,进行布局

【知识总结】sizeclass使用_第4张图片
wCompapct hCompact屏幕下设置约束.png

添加约束:

【知识总结】sizeclass使用_第5张图片
添加约束.png

观察运行结果:

【知识总结】sizeclass使用_第6张图片
竖屏情况.png
【知识总结】sizeclass使用_第7张图片
横屏情况.png

最后,介绍一下如何查看不同屏幕下的显示情况

【知识总结】sizeclass使用_第8张图片
查看步骤

添加需要查看的屏幕尺寸

【知识总结】sizeclass使用_第9张图片
添加不同尺寸的屏幕

你可能感兴趣的:(【知识总结】sizeclass使用)