05,Andorid屏幕适配(图片适配)

1,介绍:

  • 在drawable的多个目录下放置内容不同但命名相同的图片,运行程序,查看在不同模拟器上的显示效果

 

2、使用方法

【1】美工切多套图

  • 切多套图,正确的图片放入正确的文件夹下面

  • 多套切图的解决办法

 

【2】美工切一套图

  • 美工只做一套1280*720的图片,放置在drawable-xhdpi的目录下,

  • ImageView宽高指定为确定的值, 不包裹屏幕

 

【3】注意事项

  • 美工给的jpeg的图,然后命名是PNG的图

  • 正确的图,放在正确的位置,如果美工只做一套图的话,就要做比例尺最大的图片。放在对应的目录中

 

【4】理解

我们需要提供备用位图(符合屏幕尺寸的图片资源)

由于 Android 可在各种屏幕密度的设备上运行,因此我们提供的位图资源应该始终可以满足各类密度的要求:

密度类型

 代表的分辨率(px)

 系统密度(dpi)

低密度(ldpi)

240x320

120

中密度(mdpi)

320x480

160

高密度(hdpi)

480x800 

240

超高密度(xhdpi)

720x1280 

320

超超高密度(xxhdpi)

1080x1920 

480

根据以下尺寸范围针对各密度生成相应的图片。

比如说,如果我们为 xhdpi 设备生成了 200x200 px尺寸的图片,就应该按照相应比例地为 hdpi、mdpi 和 ldpi 设备分别生成 150x150、100x100 和 75x75 尺寸的图片

即一套分辨率=一套位图资源,接下来将生成的图片文件放在 res/ 下的相应子目录中(mdpi、hdpi、xhdpi、xxhdpi),系统就会根据运行您应用的设备的屏幕密度自动选择合适的图片

最后通过引用 @mipmap/id,系统都能根据相应屏幕的 屏幕密度(dpi)自动选取合适的位图。

注意:

如果是.9图或者是不需要多个分辨率的图片,放在drawable文件夹即可

对应分辨率的图片要正确的放在合适的文件夹,否则会造成图片拉伸等问题。

更好地方案解决“图片资源”适配问题

上述方案是常见的一种方案,这固然是一种解决办法,但缺点很明显:

1.每套分辨率出一套图,为美工或者设计增加了许多工作量

2.对Android工程文件的apk包变的很大

那么,有没有一种方法:

保证屏幕密度适配

可以最小占用设计资源

使得apk包不变大(只使用一套分辨率的图片资源)

下面我们就来介绍这个方法:

只需选择唯一一套分辨率规格的图片资源

Google官方给出的高清设计图尺寸有两种方案,一种是以mdpi设计,然后对应放大得到更高分辨率的图片,另外一种则是以高分辨率作为设计大小,然后按照倍数对应缩小到小分辨率的图片。

推荐使用第二种方法,因为小分辨率在生成高分辨率图片的时候,会出现像素丢失。

而分辨率可以以1280*720或者是1960*1080作为主要分辨率进行设计。

首先来理解下Android 加载资源过程

Android SDK会根据屏幕密度自动选择对应的资源文件进行渲染加载(自动渲染)

比如说,SDK检测到你手机的分辨率是320x480(dpi=160),会优先到mipmap-mdpi文件夹下找对应的图片资源;但假设你只在xhdpi文件夹下有对应的图片资源文件(mdpi文件夹是空的),那么SDK会去xhdpi文件夹找到相应的图片资源文件,然后将原有大像素的图片自动缩放成小像素的图片,于是大像素的图片照样可以在小像素分辨率的手机上正常显示。

所以理论上来说只需要提供一种分辨率规格的图片资源就可以了。

那么应该提供哪种分辨率规格呢?

如果只提供ldpi规格的图片,对于大分辨率(xdpi、xxdpi)的手机如果把图片放大就会不清晰

所以需要提供一套你需要支持的最大dpi分辨率规格的图片资源,这样即使用户的手机分辨率很小,这样图片缩小依然很清晰。

xhdpi应该是首选

原因如下:

xhdpi分辨率以内的手机需求量最旺盛

目前市面上最普遍的手机的分辨率还多集中在720X1080范围内(xhdpi),所以目前来看xhdpi规格的图片资源成为了首选。

而且很多公司为了保持App不同版本的体验交互一致,可能会以iPhone手机为基础进行设计,包括后期的切图之类的。

iPhone主流的屏幕dpi约等于320, 刚好属于xhdpi,所以选择xhdpi作为唯一一套dpi图片资源,可以让设计师不用专门为Android端切图,直接把iPhone的那一套切好的图片资源放入mipmap-xhdpi文件夹里就好,这样大大减少的设计师的工作量!

 

3,图片适配的重要性

【1】图片适配什么意思?为什么要有图片适配?

  • 首先看一张图

05,Andorid屏幕适配(图片适配)

  • 在默认的res文件夹下面,发现有这么多mipmap文件夹,现在看到里面只是放了一个ic_launcher图片,就是应用的启动图标,为什么要有这么多张?

  • 点开之后发现每张图片的分辨率和所占用的大小都不一致

mipmap-mdpi 48x48 2.21k

mipmap-hdpi 72x72 3.42k

mipmap-xhdpi 96x96 4.84k

mipmap-xxhdpi 144x144 7.72k

mipmap-xxxhdpi 192x192 10.49k

  • 这是因为每个手机的屏幕密度都不一样,当程序运行到手机上时,系统会根据当前手机所对应的屏幕密度去找相应文件夹下面的图片。比如当我们启动一个屏幕密度为mdpi的手机时,加载的其实就是分辨率48x48大小为2.21k的ic_launcher图片,其他以此类推。我们需要按照规则将不同的图片放到相对应的文件夹下面,这样做的好处就是节省内存。下面做一个实验来验证这一结论。

  • 首先去找一张1080x1920分辨率的图片,该图片信息如下:

 

05,Andorid屏幕适配(图片适配) 

  • 可以看到,这是一张1080x1920分辨率、1.3MB的图片,我们把它放到mipmap-xxhdpi的文件夹下面,接下来启动一个1920x1080分辨率的模拟器。然后xml布局里将其设置为背景,然后运行。

  •  打开Android Studio的内存检测,检查耗费的内存,如图

 05,Andorid屏幕适配(图片适配)

  • 可以看到,这个1.3MB的图片运行到这个手机上所消耗的内存是9.53MB。

  • 接下来,咱们把这个图片移动到mipmap-hdpi文件夹下面,等于说还是原来的图片,只是换个文件夹,这样在运行的时候手机会加载mipmap-hdpi这个文件夹下面的图片。运行后,监测内存情况如下:

05,Andorid屏幕适配(图片适配) 

  • 可以看到,这个1.3MB的图片运行到这个手机上所消耗的内存是32.97MB。

  • 当我们把它放进mipmap-mdpi文件夹下面时,情况如下:

 05,Andorid屏幕适配(图片适配)

  • 可以看到,这个1.3MB的图片运行到这个手机上所消耗的内存是72.48MB。

  • 为什么都是同一张图片,什么都没改,只是换了个文件夹而已,它就有这么大的区别呢?

 

这张图片是1.3Mb,我们启动的模拟器参数如下:

屏幕尺寸:4.95英寸

分辨率  :1920x1080

根据前面所讲的屏幕像素密度计算公式可以得出该模拟器的屏幕像素密度是445,这就意味着它对应的xxhdpi,它会优先去加载此文件夹下面的图片。

因此当我们把图片放到xxhdpi文件夹下面时,系统第一优先找的是这个文件夹,这是有好处的,好处就是节省内存,从上图也可以看出,的确如此。这就是为什么我们要在对应的文件夹下面放对应分辨率图片的好处,就是占用内存小。这就是好处,至于为什么会出现这么大的差别,我们这样来分析。

还记得前面讲过,mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi的比例是2:3:4:6:8的概念不

当前图片1.3Mb,放到相应文件夹下面时占用内存不同

xxhdpi :9.53Mb

xhdpi  :19.08Mb

hdpi   :32.97Mb

mdpi :72.48Mb

首先这张图片理应消耗的内存是9.53Mb-1.3Mb=8.23Mb (在手机里占用的内存-图片自身的大小)

得出该图片大约为8Mb,分析其他几种情况:

当放到mdpi下时,按照2:3:4:6:8的比例,mdpi跟xxhdpi的比例是2:6,我们的模拟器是xxhdpi的,在去mdpi文件夹里找图片时会自动转换,转换的比例就是2:6。也就是1:3的关系,既然如此,宽是3倍,高是3倍,自然一张图就变成了9倍。

所以一张在xxhdpi文件夹下理应占据8Mb的图片跑到mdpi时无形中就变成了8Mb x 9=72Mb,也就是上面的72.48Mb

再分析hdpi的情况,跟xxhdpi的比例是3:6,也就是1:2,2 x 2=4,也就是扩大了4倍。

所以8Mb x 4=32Mb,也符合上面的情况。

xhdpi是4:6,也就是1.5x1.5=2.25

所以8Mb x 2.25 = 18Mb左右,差不多也跟上面一样。

由此可见,一张图片放到正确的文件夹里面是多么的重要,由此你是否明白Google为什么造了那么多套ic_launcher的图片了呢?