本文会分析三个厂家的图片放置策略,希望可以给大家一些参考。
1. 淘宝
mdpi:
mdpi中存留了一些android原始的icon,这个从命名和前缀就能看出来。通过图片大小分析,这个目录下面都是一些很小的icon,还有一些没有用到的icon。(这个launcher图片也很好的说明了淘宝的历史)。
hdp:
hdp中分为两部分:表情和其他图片。f+数字的图片都是表情图片,淘宝仅仅有一套表情图片,并且都放在这个目录下。除了少量的图片和mdip的图片一致(比如用户头像的place_holder)外,其余的图片和mdpi的图片完全不同。顺便说一下,此目录下除了表情之外,其余的都是一些小icon,绝对属于尺寸很小的那类。
xhdpi:
xhdpi又和hdpi不同了,它里面有大量的国家icon。除此之外就是一些对清晰度要求较高的icon。
xxhdpi:
xxhdpi就没什么东西了,几张图而已。
其他:
有后缀的文件夹中除了5张左右的淘宝自己的icon外,其余都是系统的图片,均以abc开头。我不清楚淘宝到底有没有使用到这些图片,但我可以肯定地说其中有着冗余图片,或许有着进一步优化的方案。
总结:
淘宝的放置图片策略是大量的图片在hdpi,xhdpi中,比如表情图在hdpi中,国家图在xhdpi中,大多数图片都仅有一套,少数全局的icon是会有多张的情况(极少,估计只有十几张)。xxhdpi和mhdpi仅仅作为补充,没有太大的作用。
淘宝最令人好奇的点在于它的资源文件很小,但是so文件相当大:
2. 微博
微博是一个典型的android风格的app,它的drawable全都是有后缀的,完全符合安卓标准的默认打包策略,它还有根据像素密度的图片,甚至有ldpi的目录。
mdpi-v4
mdpi中有大量的小icon,里面有个叫做share_wx的,从名字一下子就知道是微信分享的icon,但实际是微博的logo,比较有趣。其余的都是一些边边角角的图标,量不大,所以主力图肯定不在这里。
hdpi-v4
这是微博图片存放的主要目录,有很多大背景和表情,微博的表情图片和淘宝一样都是在hdpi中的,它以lxh,emoji等前缀开头,用来区分不同风格的表情。
xhdpi-v4和xxhdpi-v4*
这里放了一些背景大图,我也发现了大量和hdpi中一样的图片,所以可以大胆的假设微博是做了不同像素的图片的。这也证实了我的想法——微博是很标准的android应用。
ldpi-v4
这个目录的确没什么用,微博自身也不会维护这个目录,这全都是第三方库和应用商店给的图片,微博开发者只需要放进来就好。
sw400dp和sw32dp-400dp
这些目录放了一些为不同分辨率准备的长得相同的icon,当然还有微博自己的logo。
3. 微信
通过上面的分析,我们是不是可以得出一些经验了呢?
- 大量的图片都在hdpi和xdpi中
- 表情图片在hdpi中
- anim目录中都是xml文件
- drawable目录中有大量的xml和少量的png和.9图
- layout文件中是全部的xml
- raw中放置音频
- svg图片在raw、drawable或assets中
- 最大的文件夹是图片文件
- layout文件较小
- 相同的图片,高分屏的肯定比低分屏的大
ok,现在咱们就可以来看微信的资源了,混淆怕啥,友盟混淆的abcd代码都能看懂,微信的adcd资源也应该不难。
raw(a9)
这个目录中放置了大量的svg图片和mp3文件,从专业的角度来想,drawable目录下肯定不会放mp3,所以这个肯定是raw文件了。这个目录下有大量的svg,所以可以看出微信已经实现了全svg化,并且已经在线上稳定运行了。这点在微信早期的公众号上也可以得到佐证,详细请看Android微信上的SVG。
文中提到了:
第一步,拿到.svg后缀的资源文件(UI很容导出这种图片),放在raw目录下而不是drawable目录。
第二步,把 R.drawable.xxx 换成 R.raw.xxx;把 @drawable/xxx 换成 @raw/xxx。
layout(f)
现在有了两个线索,那么初步估计上面的三个目录肯定是我们常见的目录,否则不会那么大。
打开f后发现这个就是layout文件,所以其余的肯定就是图片文件了。
hdpi(y)
y是2.9m,里面有大量的表情,所以我判断它是hdpi,为了更加证实这个猜测,我找到了两张相同的图片。
a2中:
y中:
y中图片是11kb,a2中图片是76kb,这明显说明y是hdpi,a2是xhdpi。
xhdpi(a2):
xhdpi中的图片和hdpi中的图片相同的不多,微信在这里放的是一些大图。
drawable(k)
drawable本身没啥可以说的,但是微信的drawable中.9图份额很少,所以我在想是否svg可以在一定的程度上完成一些.9的工作呢?
总结:
- 微信的表情都在hdpi中,仅有一套图片,这点几乎已经成为了标准
- 微信已经实现了svg化,svg图片在raw中
- 微信倾向于把较大的图片放在xhdpi中,仅出一套图
- 微信和淘宝一样都是尽量选择一套图来完成需求