全屏宽度的图片设置、@2x或@3x高倍图片设置原理

场景:

启动页面需要全屏宽度的图片,如何设定该imageView的约束
要求ImageView的宽度=屏幕宽度,而ImageView的长宽比固定为4:3,如何做?

约束该view的宽度:

左右间距设为0、或者宽度等于 父View的宽度;
在加上宽高约束,如下所示:
全屏宽度的图片设置、@2x或@3x高倍图片设置原理_第1张图片

关于适配,各屏幕尺寸:

全屏宽度的图片设置、@2x或@3x高倍图片设置原理_第2张图片

为了自动适应分辨率,系统会根据设备实际分辨率,自动给UIScreen.scale赋值,加载1x,2x,3x对应的图片,该属性对开发者只读。

UIScreen.scale和手机分辨率有关

4之前的都是1倍图
4到6的是2倍图2x
6之后的用的是3倍图3x
现在1倍图几乎不用了,一般都是2倍图,一般UI给你的图片名字上的有@2x,@3x,这才代表的是2倍图和3倍图

为什么需要@2x图片,原理?

文字,颜色等是矢量数据,放大不会失真。
假设图片 example.png,大小为 30 x 40像素(这里的单位是像素,数字图片的单位通常都为像素)。当这张example.png在iPhone 3GS和iPhone 4中使用时候,都占据屏幕上30 x 40个点。

而因为iPhone 4中1个点等于2个像素,也就是30 x 40像素的图片,占据了60 x 80像素的屏幕,因此这图片在iPhone 4中看起来就会模糊。

开发的时候,为使得图片清晰,需要进行图片适配。
这时需要准备两张内容相同的图片,放在同一目录下。

example.png // 30 x 40像素
[email protected] // 60 x 80像素

当程序中使用example.png的时候,会根据屏幕模式自动选择对应的图片。
屏幕1x模式,就会选择example.png, 2x模式就会优先选择[email protected],假如[email protected]不存在,就选择example.png。在iPhone 6 Plus中,还出现3x模式,原理是一样的。当iPhone 4选中[email protected]的图片,就会生成一张大小为30 x 40个点,2x模式的图片。这个时候,图片看起来就会很清晰了。

你可能感兴趣的:(UI布局,基本控件,ios,适配,全屏宽度图片,oc,2x)