Android 项目图片资源管理的那点小事

达芬奇密码2018-06-19 11:21

 背景

凡是涉及界面的移动端开发,必要会和各种资源文件打交道,如颜色、文本、尺寸、图片等。对于图片资源,一般的开发流程如下:

常规图片管理使用流程

  1. 开发不修改图片文件的命名,全部图片文件完全由视觉定义由于图片名称名不能反应该图片在 app 中的位置或功能,因此当项目工程进展到一定程度,图片数量变多,图片的维护就容易变的混乱,如出现重复图片、图片不合理的复用等问题
  2. 开发根据模块、功能等修改图片文件的命名开发接收到图片之后,人肉修改图片名,自己维护一份资源,而视觉们也需要维护一份资源,容易造成 2 份资源的不同步


实践

  • 保证图片资源只存在一份

    视觉维护一份图片资源,开发不允许人肉重命名。

  • 如何保证视觉后期维护

    为保证视觉保证图片和功能模块对应,则视觉通过文件夹的方式管理图片。相关模块的文件,放置在对应模块名的文件夹下。如地址模块的图片放置在 address 文件夹下,购物车模块的图片放置在 shoppingcart 文件夹下,全局图片放置在 all 文件夹下。另外不同倍率的图片分别放置在 mipmap-xhdpi、mipmap-xxhdpi 等文件夹下。

  • 视觉通过什么途径给开发资源

    为避免单对单的 popo 传输和邮件发送,我们为图片资源建立了 git 仓库,视觉们上传 git,开发拉取图片(不允许上传)。同时,使用 git 仓库,也使得图片的增删改,有记录可查。

  • 开发如何使用图片

    android 工程中,图片资源是平铺放置的,而视觉维护的图片是分别放置在对应模块名的文件夹下(不同文件夹内可能存在同名文件)。然后,我们也规定了不允许人肉修改文件名。那么,开发该如何将图片集成到工程中呢?很简单,写个脚本程序,将文件夹内的图片拼接上文件夹名,再拷贝出来就能解决了,如 address/back.png → address_back.png


优化

到这里,已经基本解决以往图片维护的各种问题了,不过上述流程还是存在不便利的地方:

  1. 脚本程序拷贝出来的文件,程序员需要人肉选择出里面需要的图片,并移动到工程中

  2. 视觉删除的不用的图片,开发需要根据 git 记录人肉地删除工程中的文件

  3. 由于存在人肉才做难免还是会出现图片 git 仓库和工程中的图片存在不一致的情况,如项目工程中存在冗余图片未删除的情况

对于上述问题,我们开发了个小插件,将人肉的步骤改成了程序执行

插件安装界面

插件操作示例


程序流程:

  1. 指定图片仓库目录(mac git 路径默认指定,window 设置 git 环境变量也能默认指定)

  2. 拉取图片仓库最新资源

  3. 遍历仓库文件,若工程中不存在对应文件,执行拷贝操作,记录 add 操作到本地文件

  4. 遍历仓库文件,若工程中存在对应文件,但 md5 不相等,先删除工程文件,再执行拷贝,记录 replace 操作到本地文件

  5. 遍历工程图片文件,若仓库中不存在对应图片,删除工程文件,记录 delete 操作到本地文件

  6. 当程序执行某个文件操作失败,Android Studio 中会弹出错误提示对话框,并提示哪个文件执行什么操作失败了,并立即中止执行

Android Studio 控制台输出文本示例:

[Ljava.lang.String;@22bdb9f8
Updating a9b339b..321f2ff
Fast-forward
 android/mipmap-xhdpi/coupon/sem_circle.png   | Bin 0 -> 14966 bytes
 android/mipmap-xxhdpi/coupon/semi_circle.png | Bin 0 -> 15004 bytes
 2 files changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 android/mipmap-xhdpi/coupon/sem_circle.png
From git.mail.netease.com:yanxuan_gui/yanxuan_gui
 create mode 100644 android/mipmap-xxhdpi/coupon/semi_circle.png
   a9b339b..321f2ff  dev        -> origin/dev
===================
Wed Feb 22 19:04:30 CST 2017
add /Users/.../yanxuan_gui/android/mipmap-xhdpi/coupon/sem_circle.png to /Users/.../YanXuan/app/src/main/res/mipmap-xhdpi/coupon_sem_circle.png
add /Users/.../yanxuan_gui/android/mipmap-xxhdpi/coupon/semi_circle.png to /Users/.../YanXuan/app/src/main/res/mipmap-xxhdpi/coupon_semi_circle.png


 新的管理流程

以上流程,相比原有的图片管理方式,更加简单高效且易于维护。同样被图片资源管理困扰的同事们可以看看,一起探讨下。