用户手中看到的产品界面，并非设计师呕心沥血创作的效果图，而是一个个独自的切图经由开发同窗技术完成。切图作为设计师与开发者之间的桥梁，它的作用很关键，适宜的切图、精准的地位可以最大限制的复原效果图的设计，精妙的切图更会有事半功倍的效果哦！

我们常常会做一个俗称“点九”的切图，什么是“点九”呢？“点九”是Android平台处置图片的一种特殊的方式，由于文件的扩展名为：“.9.png”，所以被称为“点九”。“点九”也是由于Android平台多种分辨率需适配的需求下，开展出来的一种共同的技术。它可以将图片横向和纵向随意停止拉伸，而保存像素精密度、突变质感和圆角的原大小，完成多分辨率下的完满显示效果，同时增加不用要的图片资源，可谓切图利器。

“点九”的制造工具为“draw9patch”，详细制造步骤这里不多讲了，插播小贴士第一条：舍弃这个制造工具吧，增加繁琐的步骤，不要再每张图片都拖到工具里画啦！直接用ps＋铅笔就可以画哦。

“点九”的学问当然很大，但Android切图不只需求清楚“点九”的办法，还有其他各种小技巧。上面为大家分享我在任务中总结的几个关于切图的心得。
(一)站在开发的角度来切图

理解技术完成方式，就像理解一位开发同窗，更多的理解，会让任务愈加顺畅。

如为下图按钮做“点九”图，一局部同窗能够会这样做：

这是一张高度不变左右拉伸的“点九”图片，内容显示区域为整个按钮范围。按钮效果图上看，文字是垂直居中显示的，开发同窗拿到这张“点九”图片，就会在代码里写上center的属性，此属性就是设定让文字在按钮的垂直居中地位。说到这，有没有发觉出成绩呢？先让我们看一下完成出来的效果怎样样。


拥有像素眼的设计师们，立即会发觉文字偏下了。然后找开发同窗调整文字的地位，“把文字向上n个像素吧，没有居中”等等，这是很常常发作的对话，开发同窗会添加代码微调文字的地位以到达效果图效果。事情圆满处理了吗？不然。其实是我们错了。

当我们理解开发同窗完成办法后，我们可以试试用逆推法验证这张“点九”图片能否还有进一步准确的能够。

如上图，设计效果图中白色区域是文字排版区域，是理想化的地位，1和2的高度是相等的；而完成效果图中3和4的高度是相等的。成绩呈现了！在我们画点九的时分，把投影的高度也画出来了，所以视觉上文字就偏下了。

我们通常的画法应该是：

1. 在高度不拉伸的状况下，在空白区域点一像素的点。

这是与开发同窗之间商定俗成的习气，凭着默契就晓得此按钮高度不停止拉伸，而且就是被拉伸了，拉伸的是空白区域，视觉上也不会形成影响。

比照如图所示：

2. 内容显示区域的高度要避开投影区域，这样可以保证文字视觉的居中。

“点九”图片的内容显示区域，我喜欢称为内容排版区域。在切图的进程中，还会发现不同的情形，要时辰想着你要的后果，经过对此区域的细心处置，可以更好的为图片上所承载的内容做排版。这样开发同窗只需经过一些复杂的属性设定，就可以完成效果图上准确的规划。同时增加不用要的开发，精简代码，进步产品的功能，集腋成裘，带给用户更好的体验感受。
(二)选择更优的切图方式

当我们遇到异形或较为复杂的切图时，往往需求抛开固有的思想程式，去找到更合适的切图方式。举例如为下图浮层切图的时分，我们还可以用我们的利器“点九”么？



首先剖析一下此浮层的几个特点：一是半通明突变有厚度又有投影的效果；二是有三角异形，而且地位不固定。在切图的时分先走了一下小弯路，用固有思想把浮层分红了上下两个局部，上面方形做成“点九”，下面三角形独自一个切图，用拼接的方式去完成。这是契合开发同窗的原子拆分设计形式的，把会变化的局部取出并封装起来，让其他局部不遭到影响。所以开发同窗很快做好了完成，但效果不尽人意。我们其实可以料想失掉，由于有投影效果上下拼接一定有堆叠，这样拼接处就会有一条分明的线。

那怎样办呢？经过设计师的进一步考虑，终于找到了一种更合适的切图方式：

左右联系成两个“点九”图片，这样即能保证衔接处的效果，又能灵敏三角指向的地位。考虑好如何切图的同时也要跟技术同窗沟通能否完成，权衡完成的本钱。最初值得快乐的是，完成出来的效果­跟设计效果图没有任何出入。

(三)尽能够的减小资源的大小

切图的时分尽能够减小资源的大小，为产品装置包瘦身。

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

(在下面的例子当中，为了坚持看得清楚，没有减少到最小状况，在实践任务中可以稍加留意。)

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

第一种纹理背景，如输出法多媒体中随写输出的界面，不同的信纸，我们就用了尽能够最小的切图去平铺而完成的。如下图：

这是我们输出法中信纸的切图，遵照用最小切图的准绳，依照不同纹理的规律调整到最小的切图，所以可以看出不同纹理的切图尺寸是不一样的。

第二种有纹理的按钮，我们普通会这样处置：

我们的目的是把按钮分红三段，保存左右圆角局部，找到两头纹理可复用平铺的局部，同事确保两头纹理可以与左右两张图无缝衔接，这样按钮的长度就变成可控的了，可以适用于不同的场景。

首先找到纹理的规律，这里的斜线纹理只需切宽为3px的图即可；然后用纹理图片去尝试左右圆角局部，衔接到圆角局部的纹理就成功咯。遇到其他类型纹理切图时，思绪是可以复用的。

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

这里就不做举例了。

设计师在提供设计标准后愁苦完成效果不尽善尽美的同时，可以尽能够的应用一些切图手腕，协助你的设计到达零差异的出现，同时也协助开发同窗增加了很多不用要的开发担负，关于产品自身也有进步运转速度等很多显而易见的益处。让设计师同窗与我们亲爱的开发同窗成为更贴心更默契的协作同伴吧！

以上为任务中关于Android切图的一点小经历，如有错误或缺乏的中央请大家指正，同时欢送大家分享更多的切图经历与技巧。