android .9图讲解

第一部分：下面我们来看看安卓切图前辈的心得：

1、考虑适配Android 各种复杂的分辨率，如主流的1280X720, 800X480, 640X480,480X320,以及各种非主流分辨率。
2、.9神器

3、PNG24+jpg

4、可交互控件尽量不小于最小可操作尺寸：android规范是48dp
5、图片中的可视元素尽量在文件中居中，便于对齐和标注
6、能用代码实现尽量避免用图，如单色色值、渐变、文字、分割线等
7、考虑控件的通用性。

 

第二部分：站在开发者的角度去进行安卓切图

在进行安卓切图之前，APPUI设计师一定要与安卓程序员进行必要的沟通。寻找一种方便的安卓切图规则。当我们能够不用.9png的工具切图的时候，尽量不用。因为“点九”的制作工具为“draw9patch”用起来比较繁琐。新手也未必会切好。

所以，我们尽量在理解了.9png的原理之后，在ps里面直接切就行。然后切好一个页面直接给到程序员实现。如果程序员套切图的时候，发现不对的地方也有及时反馈给你，或者app设计师及时去咨询。

APP设计元素切图示例图：

 

在切图的过程中，还会发现不同的情景，要时刻想着你要的结果，通过对此区域的仔细处理，可以更好的为图片上所承载的内容做排版。这样开发同学只要通过一些简单的属性设定，就可以实现效果图上精确的布局。同时减少不必要的开发，精简代码，提高产品的性能，积少成多，带给用户更好的体验感受。

 

第三部分：APP设计师要学会思考，选择更优的安卓切图方式

这个只能具体案例具体分析啦。多动手吧！

下面是3点算是关于安卓android APP切图规范吧。

尽可能的减小资源的大小，切图的时候尽可能减小资源的大小，为产品安装包瘦身。

1.“点九”图片拉伸1个像素与拉伸10个像素效果上是没有区别的，所以尽量缩小图片的尺寸。

2.当我们遇到有纹理的背景或有纹理的按钮时，切图原则为：找到纹理的规律，用最小的切图去平铺，可以想象中图案叠加的原理。

3、适当压缩图片质量，在单色或没有过多效果时可存储为png8位或索引模式。

 

第四部分：安卓切图进阶部分(.9png制作教程)

1、下载安装工具：  draw9patch.zip 该工具SDK中自带。

首先你需要给自己的电脑安装上java于系统的默认目录下。没有安装java的同学可以在百度搜索：jdk-6u20-windows-i586，安装包大小80M左右。draw9patch下载地址

然后使用andriod模拟器—android-sdk-windows，打开SDK/tools目录下的“draw9patch.bat”文件，出现载入窗口：

 

 

2.导入并编辑

将png图片拖拽到该窗口中.  如下图，自动进入编辑界面。图中介绍了每个区域的内容及功能注释。

预览右侧的视图发现，图片的边缘处于普通拉伸状态。

3、现在我们在图片边缘点击左键，绘制出黑线，即图片需要被拉伸的部分。如下图，对4条黑线做了注释。

如果失误多绘的部分，可按住shift键的同时点击鼠标左键擦除)。

4、如图所见，三种拉伸结果均已完美显示，已实现我们想要的拉伸效果，假设这是一个有显示文字的窗体，那么文字显示的区域，程序也会控制在黑线对应范围。

 

解释：           1号黑色条位置向下覆盖的区域表示图片横向拉伸时，只拉伸该区域
2号黑色条位置向右覆盖的区域表示图片纵向拉伸时，只拉伸该区域
3号黑色条位置向左覆盖的区域表示图片纵向显示内容的区域
4号黑色条位置向上覆盖的区域表示图片横向显示内容的区域
没有黑色条的位置覆盖的区域是图片拉伸时保持不变（比如，如果图片的四角为弧形的时候，当图片被任意拉伸时，四角的弧形都不会发生改变）
5、如果失误多选了部分，可按住shift键，点击鼠标左键去掉黑色条

6、右边3个黑色图形区域为显示当前拉伸效果

7、选择好区域后，点击左上file-》save 9-path，保存图片，后缀名为xxx.9.png。

8、解释：我们可以看见图片的周围多了4个黑色条，不要急这个图片还不能用，这就是原始的9.png图片，当我们进行下一步操作后，这个图片就变得正常了。

更多详细的方法点击：http://blog.csdn.net/pugongying1988/article/details/6938972