Drawable之Ninepatch

在面试中，多次被问到9Patch各个区域的含义，才发现自己语焉不详，实在是没有好好研究它。所以做什么事都要注重细节。

Ninepatch的作用

接下来这段话是翻译的英文：（读起来有点怪怪的）

Ninepatch图像是可改变大小的特殊的背景图像。当我们对View内容的准确大小不清楚时，可以使用它。NinePatchDrawable 绘画的是一个可以伸缩的位图图像，Android会自动调整大小来容纳显示的内容。Android提供了一个工具来帮助我们创建这种图像。这个工具位于tools目录下。

我再用自己的理解重述一下：比如我需要一个View，然后它的背景正好是一张图片。我们不能一开始就能确定这张图片就正好适合这个View，有可能在适配的过程中被拉伸，拉伸就很容易导致图片变形，就不美观了。那么通过9Patch这个工具，我们就可以很好的对图片的拉伸区域以及图片上的内容与图片之间的Padding做预设，避免图片变形和文字显示不规范的情况。经过Ninepatch制作的图片的后缀名为*.9.png。

Ninepatch工具选项

运行Ninepatch后，该工具分两个栏目，左边是编辑区域，右边是预览区域。

Zoom:用来缩放左边编辑区域的大小。

Patch scale:用来缩放右边预览区域的大小。

Show lock:当鼠标放在图片上方时，显示不可编辑区域。

Show patches:在编辑区域显示图片拉伸的区域（红色表示可拉伸区域，蓝色表示不可拉伸区域）

Show content:在预览区域显示图片的内容区域（使用紫色来表示，一般内容区域都是显示文字的）

Show bad patches:在拉伸区域用红色的边框显示可能会对拉伸后的图片产生变形的区域。如果通过编辑，完全消除该红色边框，则图片被拉伸后是不会变形的。

为什么叫Ninepatch?

我们可以看出，上方的黑线和左边的黑线将这个图片划分为了9个区域。

怎么用Ninepatch呢？

我们看见图片的最外层是透明的，也注意到边界上有四条黑色的线段。他们是我们自己画的。

1这条线段（上面的黑色线段）它对应下面的区域代表水平方向拉伸，会被缩放的区域。

2这条线段（左边的黑色线段）它对应水平的区域代表垂直方向拉伸，会被缩放的区域。

3、4线段则表示的是图片中内容区域。也就是说如果有文字的话，只会显示在3和4这个线段表示的区域中

其实就相当于设定了内容与图片之间的Padding。可以通过选中show content选项，在预览区查看紫色区域。

实例，假设我们定义一个Button控件的背景。button的大小可能会随着button上面文字的多少而发生改变，这个时候，我们就需要Ninepatch图像来自动调整大小容纳Button的大小。

1）运行draw9patch.bat对图片进行调整。左边是工作区域，右边显示最后的结果

将show content和show patches打上对号，在进行相应的调整。

保存结果

2）使用该图片作为button的背景与正常的图片对一个对比。

在Layout文件中定义两个button如下所示

<Buttonandroid:id="@+id/btn1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:background="@drawable/stdbox"android:text="This is a standard background with red border" /><Buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_below="@id/btn1"android:layout_marginTop="10dp"android:background="@drawable/box"android:text="This is a 9 patch background with red border" />

运行结果如下：