NinePatch图（9-Patch图，.9图）

NinePatch图（9-Patch图，.9图）

https://www.uisdc.com/about-draw9patch

一. 什么是点九图

点九图其实就是安卓系统中特有的一种图片格式，为了让大家更好的记住，我们只要知道，后缀名是「.9.png」的图片，就是点九图。

二. 点九图的作用是什么

每个事物都有其存在的价值，所以先弄清楚点九图能为我们解决什么问题，这样后面理解起来就会容易很多。

其实点九图的用处就是帮助我们拉伸切图的，比如这个切图：

如果它需要纵向拉伸，直接拉会变成下面这个样子：

而用了点九图就可以让切图局部拉伸，而不是整体拉伸，这样就可以把容易变形的地方保护起来：

是不是拉伸的很完美！有黑线不用怕，那只是告诉安卓系统：嘿，大兄弟，这是张点九图，特殊对待一下！

三. 点九图的原理

点九图最大的原则就是四个边必须各有一条纯黑的线（或一像素的点），如下图：

如果四条线少任何一条，或者线不是纯黑的（#000000），安卓系统就不认你！

其中这四条线，左上两条线掌管可拉伸区域，右下两条线掌管内容显示区：

先说左上两条线，因为两条线原理是一样的，所以我们单独拿左边这条线来举例吧，当我们没有左边那条黑线时，纵向拉伸是这样的：

圆角是不是变形了，如果左边加一条黑线，就相当于把原来的图形分为三个部分：

当再次纵向拉伸的时候，只有标记了黑线的部分可以被拉伸，而上下两部分是完好无损的，想象一下，无论你拉伸到多高，是不是都不会变形了：

当然，你左边画一个点也可以起到相同的效果：

左边这条线是控制纵向拉伸的，所以上面那条黑线就是控制横向拉伸的，原理是一样的！

接下来我们来说右下两条线，是控制内容区域的，单独拿右边那条线来举例，如果没有右边那条黑线，在这个切图上输入内容，比如文字，是没有限制的，内容会撑满整个背景图：

当有了右边那条黑线后，切图相当于在纵向上又被分开了：

而这次是右边有黑线哦，别忘了右边的黑线是控制显示区域的，所以只有带黑线的部分才可以显示内容。

当然，文字不会这样被切断一半显示的，这里只是方便大家观看哪里可以显示内容！

同样的原理，当我下面也画一条线后，横向上也是只有带黑线的部分可以显示内容（红线是辅助示意的哈）：

这就是点九的基本原理了！

四. 总结

最后总结几个要点：

• 点九切图四周必须要有四条一像素纯黑的线或点。
• 左上两条线控制拉伸区，右下两条线控制内容区。
• 输出的图片后缀必须是「.9.png」。

至于用插件还是自己手动切点九图，看自己习惯吧，我一般都是自己画，比较放心一点。

==================

说明

本文部分技术相关内容主要供Android开发者阅读；大部分内容设计人员也可以学习。

谷歌官方文档 https://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch

本文配套工程源码 https://github.com/jzj1993/NinePatch

基本介绍

NinePatch图（9-Patch图，.9图）是一种可拉伸的图片(stretchable bitmap image)。

1. NinePatch图片的文件名应为xxx.9.png

2. 在png图片基础上，上下左右四个方向各留出一个像素的边缘，使用黑色像素点定义拉伸和内容区域，其他像素点应该是白色或透明。

3. 左、上两边的黑色像素点，分别表示水平、垂直方向的缩放区域（stretchable area）。缩放区域可以有多段，缩放时会按比例进行缩放。

   You can have as many stretchable sections as you want: their relative size stays the same, so the largest sections always remain the largest.

4. 右、下两边的黑色像素点，分别表示水平、垂直方向的内容区域（padding lines）。内容区域相当于设置Padding，应该是一段连续区域，且9-Patch图的内容区域是可选的。

5. 如果NinePatch图没有定义内容区域，则使用左、上定义的缩放区域作为内容区域

   If the padding lines are not included, Android uses the left and top lines to define this drawable area.
   如图，实际测试发现，内容区域为白框中的区域
   

6. 代码开发相关

   • 可以通过代码设置Padding，覆盖9-Patch图的内容区域。
   • 当文字等内容小于内容区域时，可通过gravity属性指定内容的对齐方式。

• NinePatch图可以设置给任意View的background属性。如果要设置给ImageView的src属性，则需要设置成fitXY模式。

以一个文本框（TextView）为例：

• 文字会显示到矩形内容区域（PaddingBox），显示不下就会进行拉伸，文字比内容区域小时不会压缩。
• 拉伸时，水平和垂直方向，会分别按照定义的一个或多个拉伸区域，按比例均匀拉伸。

基本示意图如下：

典型示例

下面有几个示例，NinePatch切图，以及实际显示效果如下。

1. 常规文字气泡
   

2. 椭圆气泡。将整个区域设置成拉伸区域
   

3. 半圆气泡。如果希望文字较高时仍然是半圆，直接使用代码实现会更容易。

    

4. 多个拉伸区域。顶部的箭头左边有10像素拉伸控制点，右边有5像素，会按2:1缩放。
   

   需要等比拉伸的情况，拉伸像素最好多一些，例如10个:5个，尽量避免只有一两个像素，否则在低版本Android设备上可能会出现较大误差。

   

5. 没有定义内容区域。右下两侧边框是全透明的
   

6. 最终显示效果
   

7. 注：例4中的2:1，指的是拉伸区域，即下图中的红框区域为2:1
   

减小切图尺寸

由于9-patch图能缩放，因此可以利用这个特点减小切图尺寸，从而减少APK文件大小，减小内存、CPU消耗，提高APP性能。例如下面的左图，可以压缩成右图。

NinePatch图与代码实现形状

一些常见的形状可以直接使用代码实现（ShapeDrawable、GradientDrawable），实现容易，而不需要用切图，且性能更好、清晰度更高。例如直线、矩形、圆形、椭圆形、圆角矩形等。

Draw9Patch工具

Draw9Patch是Android开发包中提供的NinePatch查看和调整工具，文件位于<android-sdk>/tools/lib/draw9patch.jar，安装Java环境后可双击运行。

Draw9Patch工具可在此下载： https://github.com/jzj1993/NinePatch/blob/master/draw9patch.jar
Java环境可在Java官网下载安装：https://www.java.com

在Draw9Patch工具中

1. 单击边缘可以添加黑点，Shift+单击可以删掉黑点，拖动可以调整黑点长度。
2. 勾选Show Content等选项可以查看内容、缩放等区域
3. 右侧可预览不同拉伸情况下的效果，拖动Patch scale可以调整预览的拉伸比例

Android Studio的文件预览中也集成了Draw9Patch

Draw9Patch工具官方文档 https://developer.android.com/studio/write/draw9patch.html

Android Studio的缓存问题

在较高版本的Android Studio中，为了提高XML预览性能，会建立一些缓存，导致新的图片替换后并不一定能刷新显示，因此可以尝试使用File-Invalidate Caches/Restart…重启并刷新缓存。

================== End