美文网首页
XCode中根据UI图,使用XIB适配屏幕

XCode中根据UI图,使用XIB适配屏幕

作者: 蓝色的风 | 来源:发表于2018-07-24 15:34 被阅读108次

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 是我们想设置的上边距

但是这样有个问题 在上面的设置中我们看一下控件在视图中的y值的变化, 变化的y值

这是由于我们没有添加状态栏的高度,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轴上的比例约束 x轴设置
添加左边距的比例约束 修改约束比例
接下来我们切换设备看一下在不同设备上的控件的x值
约束值

通过计算 iPhone 8 plus 414/375x20 = 22.08, iPhone X 375/375x20=20,iPhone SE 320/375x20 = 17,跟视图中显示的基本一致。

总结:在xib和SB中我们也可以通过这种方式去给控件添加比例约束适配不同的屏幕。

相关文章

网友评论

      本文标题:XCode中根据UI图,使用XIB适配屏幕

      本文链接:https://www.haomeiwen.com/subject/sjwemftx.html