安卓android APP切图规范和.9png制作教程

我们都知道android平台有多种不同的分辨率，很多控件的切图文件在被放大拉伸后，边角会模糊失真。

而且在整个android开发的过程中，经常会因为没有处理好切图文件，使整个APPUI界面看起来很变扭，因为很多图片都被拉伸和压缩，比例极不协调！

一般负责的安卓程序员会想在drawable-hdpi,ldpi,mdpi下放不同分辨率的图片，这样虽然可以有效避免图片失真，但是这样一是麻烦而是图片资源似的整个项目太大。所以有时候我们想要是有些图片可以拉伸而不失真多好啊，这时候我们就要想起android安卓为我们提供的9.png格式的图片。

9.png格式的图片是安卓平台上新创的一种被拉伸却不失真的好办法。也是解决Android平台多种分辨率适配的最佳方案。

我们通俗点来解读下 什么是“.9png” 中文名字“点九” 哈哈 之前25学堂也有介绍《APP设计和切图基本知识点》

.9PNG，其实相当于把一张png图分成了9个部分(九宫格)，分别为4个角，4条边，以及一个中间区域，4个角是不做拉升的，所以还能一直保持圆角的清晰状态，而2条水 平边和垂直边分别只做水平和垂直拉伸，所以不会出现边会被拉粗的情况，只有中间用黑线指定的区域做拉伸。这样的处理的界面显示结果才是最完美的。使用9.png图片的时候，你还会惊奇的发现一个几KB或者几十KB的图片，变得非常的小，一般只有几百个字节那么大， 让安卓系统加载起来当然会更加的流畅。

总的来说：.9png它可以将图片横向和纵向随意进行拉伸，而保留像素精细度、渐变质感和圆角的原大小，实现多分辨率下的完美显示效果，同时减少不必要的图片资源，可谓切图利器。

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

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