android应用开发-从设计到实现 3-10 资源的创建

资源的创建

界面原型已经设计完成了。不过离最后交付给开发人员开发还差一步：产品中使用的图片还没有准备好呢？

设计师除了产品原型还要交付哪些资源呢？开发者最关心的资源就是应用中会使用到的各种图标资源和配色方案。

在天气预报应用当中，我们已经确定好了界面的主要颜色，

颜色项目	颜色名称	颜色RGB值
Primary Color	Indigo 500	3F51B5
Primary Dark Color	Indigo 700	303F9F
Accent Color	Amber 500	FFC107

现在就剩下各种图标了。这些图标包括了，

1. 系统图标：显示更多信息时使用到的，

2. 天气图标：包括使用到的小图标，

   使用到的大图标，

3. 应用图标：应用的主图标，放在启动界面使用的图标，

图标的尺寸

不同使用场景的图标，尺寸是不同，前面的章节中我们已经讲述了系统图标 应用图标的标准尺寸。

根据屏幕像素密度的不同，需要设计对应大小的图标。这样一来，就能够确保在特定类型的密度屏幕上，图标能够显示的清晰。

像素密度类型	像素密度大小	与Baseline比值
mdpi	160	1
hdpi	240	1.5
xhdpi	320	2
xxhpi	480	3
xxxhpi	640	4

安卓使用dpi为160的数值作为一个基准－－baseline。

为了达到最优秀的显示效果，我们最理想的情况下是为每个不同的屏幕类型设计对应的图标。不过实际情况中却并不一定需要对应每个尺寸，因为

1. 如果涉及的图标很多，各种类型的图标都做全部的配套设计一定会增加应用的体积；

2. 假如缺少某个屏幕类型（例如mdpi）的图标a时，系统会去寻找a对应的高分辨率图标A，把A转化成合适的尺寸（a与A都是同一个图标的不同尺寸版本，a尺寸小，A尺寸大）。这里唯一的代价是：在使用图标时，系统需要自动做额外的尺寸转化；

系统图标

系统图标的大小是24dp*24dp，对于mdpi的屏幕，我们就需要截取24px*24px大小的图标。

Sketch导出

如果使用Sketch开发出了静态原型，那么从里面抓取系统图标就非常的方便了，

1. 点击工具栏上的insert -> S（或者按快捷键S），

2. 用小刀在要截取图标的位置切片，并将切出的片子，重新命名成ic_wind_level,

   可以看到右上方的尺寸栏显示的是24/*24的大小，设置区域下方的截取效果图也呈现了出来。

接下来就是导出图片了，

1. 选中ic_wind_level，点击Export旁的按钮，以此添加1x 2x 3x 1.5x 4x，给要导出的图片设置导出后的放大倍率。1x表示1:1导出，2x表示放大2倍导出，

   导出的格式都设置成PNG格式的图片。这种图片是安卓系统标准支持的图片格式，能够携带透明的信息。

2. 不要勾选背景颜色，让整个图片除了图案以外，都呈透明的状态；选择Export ic_wind_level，

导出结果如下，

像素密度类型	与Baseline比值	实际像素
mdpi	1	24px
hdpi	1.5	36px
xhdpi	2	48px
xxhpi	3	72px
xxxhpi	4	96px

其他图标的导出和产生这个图标的方式类似。

第三方工具导出

如果不使用Sketch也可以通过其他工具生成图标。例如Android Studio Asset的Generic icons功能。

1. 通过IMAGE方式，将事先准备好的风力.svg矢量图，加载到工具当中；
2. Size选择20dp，Padding选择2dp，这样最后的图标就是24pd*24dp的了；
3. Color选择成黑色，透明度为54%；
4. 点击DOWNLOAD .ZIP;

下载解压后，得到了对应的图标资源，

其他图标的产生和产生这个图标的方式类似。

天气图标

天气图标的导出与系统图标的导出几乎完全一样，只是尺寸和颜色稍有不同。

在导出的时候要注意天气图标有两种不同的大小，一种使用到Weather details上面，显示大的天气图标；另一种使用到forcast当中，显示小的天气图标。

图标类型	宽度	高度
大图标	120dp	100dp
小图标	30dp	30dp

两种图标都可以通过Sketch切图得到，也可以通过Android Asset Studio来生成。

应用图标

应用图标也可以通过Sketch创建，不过我这里就简化了这方面的设计，直接使用Android Asset Studio的Launcher icons，创建应用图标，

1. 通过IMAGE方式，将事先准备好的应用启动图标.svg矢量图，加载到工具当中；
2. Padding选择45%，调整到合适的比例就行；
3. Color选择成白色，透明度为100%；
4. Shape选择成SQUARE正方形；
5. Background选择成Primary Color-#3F51B5
6. 点击DOWNLOAD .ZIP;

下载解压后，得到了对应的图标资源，

至此，图片资源的导出就完成了。

本文是《从设计到实现-手把手教你做android应用开发》系列文档中的一篇。感谢您的阅读和反馈，对本文有任何的意见和建议请留言，我都会尽量一一回复。

如果您觉得本文对你有帮助，请推荐给更多的朋友；或者加入我们的QQ群348702074和更多的小伙伴一起讨论；也希望大家能给我出出主意，让这些文档能讲的更好，能最大化的帮助到希望学习开发的伙伴们。

除了CSDN发布的文章，本系列最新的文章将会首先发布到我的专属博客book.anddle.com。大家可以去那里先睹为快。

同时也欢迎您光顾我们在淘宝的网店安豆的杂货铺。店中的积木可以搭配成智能LED灯，相关的配套文档也可以在这里看到。

这些相关硬件都由我们为您把关购买，为大家节省选择的精力与时间。同时也感谢大家对我们这些码农的支持。

最后再次感谢各位读者对安豆的支持，谢谢:)