和你一起draw9patch

前言：

在工作当中，你总会遇到制作点9图片的时候。我就在公司的新项目中遇到了。很多人说，这交给UI妹妹做就好了，为啥要烦劳我们自己动手？第一呢，作为程序员的我们，多学点东西是没错的。第二呢，UI妹妹做的点9图片产生的效果不是你想要的。

一、制作点9图片的工具

这个工具叫draw9patch,在我们Android sdk文件tools目录下,如下图：

二、制作点9图片的原理

这是一张已经做好的点9图片。

1号黑色条位置向下覆盖的区域表示图片横向拉伸时，只拉伸该区域
2号黑色条位置向右覆盖的区域表示图片纵向拉伸时，只拉伸该区域
3号黑色条位置向左覆盖的区域表示图片纵向显示内容的区域
4号黑色条位置向上覆盖的区域表示图片横向显示内容的区域
没有黑色条的位置覆盖的区域是图片拉伸时保持不变（比如，如果图片的四角为弧形的时候，当图片被任意拉伸时，四角的弧形都不会发生改变）
5、如果失误多选了部分，可按住shift键，点击鼠标左键去掉黑色条
6、右边3个黑色图形区域为显示当前拉伸效果（见后面的图）
7、选择好区域后，Ctrl+s，保存图片，后缀名为xxx.9.png
8、其实draw9patch的由来是因为画好之后的图片被分成了9块。如下：

在上面图中的下面部分大家可以看到有以下几个可以勾选的checkbox.
show lock :显示不能操作的部分，一般我们只能操作图片的四周。
show content :显示内容部分，也就是右边黑线和下边黑线覆盖的区域。
show patches : 图片的9个部分
show bad patches :显示图片的坏点。（具体为啥原因才会有坏点，等你来解答吧��）

三、制作点9图片的过程

下面是产品给的需求。要求选中按钮和输入框，都有一个蓝框背景。如果是普通图片的话，输入框的那个右边的勾勾就会变形。所以必须用点9图片解决。

找到tools目录，打开draw9patch，如下图：

直接可以把想要制作的一张普通图片拖进去，效果如下：

左边是你要去操作的图片，右边是拉伸的效果。下面是我自己制作的全过程。

因为图片大小不能超过2M,所以录制的时间不是很长。
可以看到刚开始右边的勾勾是变形的，会被拉伸，当我弄好后，勾勾就恢复原形了，不会被拉伸了。大功告成。

四、遇到的坑。

我刚开始一直以为制作点9图片，只需确定拉伸部分就好，忽略了内容部分，所以在调节布局的时候，就会出现问题。比如上面的那个需求，那个hot 图片，我开始一直不能把它放到文字的右上方，一直在文字的正右边。我就纳闷了，我明明设置了 android:layout_alignParentRight=”true” android:layout_alignParentTop=”true”这两个属性。最终发现是点9图片没画好。内容部分少画了。当时内容部分只画了这么点，右上角的那部分不在内容区域，不能放置内容。

到这就结束了，希望多多交流！