达芬奇密码

除了技术，无它

439篇博客

最新博客

最新资源下载

编辑推荐

网易数帆开源API网关与容器云项目，让云原生生产落地“多快好网易汪源：统一负载与多云环境的“开放姿态”，才是云原生网易数帆如何用 Kubernetes“原语”搞定云原生中间件快手打新挤爆券商系统，网易数帆推出券商稳定性保障方案探索智慧校园新模式，网易有数在教育行业的实践分享金融行业大数据治理之路——数据模型篇

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


 新的管理流程

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


推荐博客