淘宝、微博、微信的 Android 图片放置策略

3,249 阅读5分钟

本文会分析三个厂家的图片放置策略,希望可以给大家一些参考。

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的工作呢?

总结:

  1. 微信的表情都在hdpi中,仅有一套图片,这点几乎已经成为了标准
  2. 微信已经实现了svg化,svg图片在raw中
  3. 微信倾向于把较大的图片放在xhdpi中,仅出一套图
  4. 微信和淘宝一样都是尽量选择一套图来完成需求