一分钟学会使用9-patch

背景

之前项目开发一般都是写逻辑，UI方面的操作用的比较少。

图片也是直接使用设计师提供的。

因此一般情况下不需要用到9-patch图。

然而，最近项目中分配给我的功能用到了。

因此，记录一下以便给其他没有接触过的开发者参考。

什么是9-patch

引用官方的一段描述

Draw 9-patch 工具是 Android Studio 中包含的一种 WYSIWYG（所见即所得）编辑器，利用此工具，您可以创建能够自动调整大小以适应视图内容和屏幕尺寸的位图图像。图像的选定部分可以根据图像内绘制的指示器在水平或竖直方向上调整比例。

根据上面的描述我们可以知道，当我们要求我们的图片能够自动调整大小以适应视图内容时，我们才需要用到9-patch图。

如何绘制9-patch

这边以Android Studio为例，进行实际说明如何绘制9-patch图。

1. 确定要创建9-patch的图片，这里以下面图片中的chat_bg.png为例。

   
   

2. 右键点击您想要用来创建 NinePatch 图像的 PNG 图像，然后点击 Create 9-patch file。

   
   

3. 点击之后会弹框，如果名字保持不变，结果如下。

   
   

4. 这个时候如果运行，会提示资源重复。所以我们要删除非9patch的原图。

   
   

好了，到这里前期准备就结束了。

接下来就需要做两个操作：
1.确定横向和纵向拉伸。
2.确定横向和纵向显示内容。

我们看下官网的一张图片说明

从图中可以得出如下结论：

左边控制纵向拉伸伸展区域。
上边控制横向拉伸伸展区域。
下边控制横向内容padding（可选）
右边控制纵向内容padding（可选）

具体操作通过下面的gif图来说明：

gif图的操作可以归结如下：

1. 点击Show patches，进行拉伸处理。
2. 左边选取一块作为纵向拉伸伸展区域。
3. 上边选取一块作为横向拉伸伸展区域。
4. 点击Show content。
5. 右边选取纵向内容区域。
6. 下边选取横向内容区域。

通过gif图可以很方便的看到所谓的画线操作其实是拖拉操作。

并不是说要像画笔那样去画出来。