Draw 9-patch（点9图）

最新推荐文章于 2018-08-06 17:11:44 发布

原创最新推荐文章于 2018-08-06 17:11:44 发布 · 634 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#android #图片

android 专栏收录该内容

85 篇文章

订阅专栏

NinePatch图片允许指定拉伸区域，确保内容区域不变形。使用Android SDK提供的draw9patch工具，可以编辑PNG为NinePatch图片，设定拉伸、内容和不可编辑区域，并通过预览检查拉伸效果。最终将制作好的.9.png图片放入res/drawable目录，用于TextView等组件的背景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原图如此

如上图所示，左边那条黑色线代表图片垂直拉伸的区域，上边的那条黑色线代表水平拉伸区域，右边的黑色线代表内容绘制的垂直区域，下边的黑色线代表内容绘制的水平区域，右边和下边的线是可选的，左边和上边的线不能省略。

采用NinePatch图片做背景，可使背景随着内容的拉伸（缩小）而拉伸（缩小）。那么如何将普通的PNG图片编辑为NinePatch图片呢，Android SDK/tools目录下提供了编辑器draw9patch.bat，双击即可打开，使用起来很简单了，主要有以下选项：

 Zoom: 用来缩放左边编辑区域的大小
 Patch scale: 用来缩放右边预览区域的大小
 Show lock: 当鼠标在图片区域的时候显示不可编辑区域
 Show patches: 在编辑区域显示图片拉伸的区域（使用粉红色来标示）
 Show content: 在预览区域显示图片的内容区域（使用浅紫色来标示）
 Show bad patches:在拉伸区域周围用红色边框显示可能会对拉伸后的图片产生变形的区域，如果完全消除该内容则图片拉伸后是没有变形的，也就是说，不管如何缩放图片显示都是良好的。（实际试发现NinePatch编辑器是根据图片的颜色值来区分是否为bad patch的，一边来说只要色差不是太大不用考虑这个设置。）

当垂直拉伸时候的效果

当水平拉伸的时候效果

当垂直，水平一起拉伸时候的效果

图片中蓝色区域为内容区，表示在此图片上编辑的内容只能位于蓝色区域内

最后转载一个例子：

从上图可以看到，背景图片的中间区域会随着文字的大小进行缩放。背景图片是一张NinePatch图片。

NinePatch图片可以使用android自带的draw9patch工具来制作，该工具在SDK安装路径的tools目录下。执行该工具，然后点击“File”->“open 9-path”打开一张用于制作NinePatch图片的原来图片。在画布的上方和左方的边上画线指定缩放区域，勾选“Show patches”可显示画定的区域，绿色为固定大小区域，红色为缩放区域，文字会摆放在红色区域。制作完后，点击“File”? “save 9-path”保存图片，draw9patch工具会自动为图片加上*.9.png后缀。把制作好的图片拷贝进项目的res/drawable目录，然后编写代码。

代码如下：

<TextView

    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="退出" android:textColor="#330000"
    android:background="@drawable/button"/>