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

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中我们也可以通过这种方式去给控件添加比例约束适配不同的屏幕。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Apple 在 2017 年 9 月的秋季发布会上正式发布了 iPhone X。iPhone X 与之前的 iPh...
    萌丸1014阅读 1,743评论 1 2
  • 1.尺寸适配1.原因 iOS7中所有导航栏都为半透明,导航栏(height=44)和状态栏(height=20)不...
    LZM轮回阅读 6,148评论 1 4
  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AGI阅读 16,012评论 3 119
  • Nginx 一、Nginx类似于Apache和Tomcat,也是一种服务器软件。 二、Nginx是一个高性...
    devstrongzhao阅读 361评论 0 0
  • 1、当你正式开始写的时候,无论是用笔写还是用电脑,一旦开始,最好不要停下来,所以你要提前安排好写作的时间段。在写的...
    微甜甜阅读 478评论 0 0