关于iOS10 SizeClasses应用横屏各型号适配

2017-01-13 14:57:08来源:http://www.jianshu.com/p/9af0e77de002作者:KoreaHappyend人点击

首先提供下Demo的地址,持续更新

:GitHubDemo地址



Gif动画.gif

恩,从iOS8 SizeClasses出来之后横屏适配变简单了许多。但是变成XCode8的时候下面的视图变了找不到上哪里改变SizeClasses。在这里写一个整个过程的日记,方便自己和道友们记下。
现在的Xib的样子



Xib整体截图.png


首先复习一下SizeClasses的知识点。



SizeClasses概念模型.png


SizeClasses之所以能够适配所有型号,就是因为三个属性Compact(紧凑),Any(所有),Regular(常规)。
屏幕的宽度和高度的这三个属性的变化能够让我们在特定的尺寸下进行控件的位置不同布局,当然布局还是需要AutoLayout,SizeClasses只是帮助我们在一个Xib中建立起了多个模型平台。
首先竖屏的时候就是Width Compact(C) Height Regular(R)



iPhone竖屏.png

横屏不带Plus是Width Compact(C) Height Compact(C)



iPhone不带PLUS横屏.png

iPhonePlust为Width Regular(R) Height Compact(C)



iPhonePlus横屏.png

我的Xib刚刚进来的就想第一个图一样是widthC Height R 也就是竖屏状态下的状态,但是如果直接编辑会发现这个状态下不过是横屏竖屏啊Pad啊都是会出现的,所以其实现在的编辑模式为Width Any 和Height Any 也就是所有适配的意思。那么怎么才能进入编辑模式呢点击下图中的Vary for Traits 弹出了Width和Height选项,前面打对号就以为这这个属性为Compact 也就是说你选取Width不选取Height 就是竖屏,选取Height不选取Width就是Plus横屏,两个都选取 就是不带Plus横屏。



点击Vart for Traits 选择选项.png

选取确定之后整个SizeClasses选项框就变成蓝色的,也就是进入了编辑模式。点击空白处观点introduce 选项栏。



进入编辑模式.png

恩,需要注意的一点是,如果想要在横竖屏之间空间拥有不同的位置摆放的话,一定要先进入编辑模式也是是选择框变蓝,然后在添加约束,比如Demo中的NewButton在竖屏的时候是在右上方,进入横屏的编辑模式之后也就是W C H C变蓝之后要按住Command+Delete键来删除竖屏时候的约束。


结尾:

来啊~ 互相伤害啊~ 这篇文章我会慢慢改的,只不过好长时间都没有写点笔记了,总感觉欠别人什么一样,就先大概写了一点~ 希望道友们支持~




最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台