NinePatch图(9-Patch图,.9图)使用全面介绍

说明

本文部分技术相关内容主要供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…重启并刷新缓存。