Paincker

NinePatch图（9-Patch图，.9图）使用全面介绍

发表于 分类于 阅读次数： Valine： 本文字数： 2k 阅读时长 ≈ 2 分钟

说明

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

相关文章