iOS设计和研发过程中,UI给的图都是基于iPhone6的标注图,在不同的尺寸的设备上显示控件的位置和文字大小就要根据设备的不同按比例设定,通常都是通过手写代码的方式去适配不同尺寸的设备
//视图的高度与宽度
#define kScreen_Height [UIScreen mainScreen].bounds.size.height
#define kScreen_Width [UIScreen mainScreen].bounds.size.width
//iPhone6的屏宽比例
#define kScale kScreen_Width/375
通过代码设置显而易见,只是在xib中我们可以更方便的去设置,不用再拖出一条约束的关联属性去适配屏幕。
接下来我们在xib中直接去适配不同尺寸的设备,我把x轴和y轴上的分开来做,最后做一个综合的适配。
1.随便找个xib,在上面拖几个按钮(控件想放啥就放啥),如下图

我们的设想是在iPhone6上距离上边界距离是80,那么换算在iPhone 8plus上就是414/375x80=88.32.
2.开始对
设置y轴
按钮设置约束,如下图

667是iPhone6 设备的高度,80 是我们想设置的上边距

这是由于我们没有添加状态栏的高度,xib中的80 是从屏幕最上方开始计算,包含了状态栏的20,所有实际要在添加20 的高度,即上面的80:667修改为100:667就可以了,接下来我们在模拟器中看看状态值得变化,根据我们的计算iPhone6中是距屏幕上边距为100(加上状态栏的高度) 在iPhone8 plus中就是 736/667x100 = 110.34. iPhone X中就是812/667x100=121.73,iPhone SE中就是568/667x100=85.15,我们切换模拟器得到的数据大致一样(小数在xib里面显示的不是很准确,iphone x上差距比较大),如下图


添加左边距的比例约束

接下来我们切换设备看一下在不同设备上的控件的x值

通过计算 iPhone 8 plus 414/375x20 = 22.08, iPhone X 375/375x20=20,iPhone SE 320/375x20 = 17,跟视图中显示的基本一致。
总结:在xib和SB中我们也可以通过这种方式去给控件添加比例约束适配不同的屏幕。
网友评论