UI设计常识：安卓当中的点九切图你真的懂吗？

">

Android开发中，常用到一种特殊格式的图片，它具有可拉伸的特性，官方学名叫NinePatchDrawable graphic，俗称“点九图”。

官当文档：

A NinePatchDrawable graphic is a stretchable bitmap image, which Android will automatically resize to accommodate the contents of the View in which you have placed it as the background. An example use of a NinePatch is the backgrounds used by standard Android buttons — buttons must stretch to accommodate strings of various lengths.

A NinePatch drawable is a standard PNG image that includes an extra 1-pixel-wide border. It must be saved with the extension.9.png , and saved into the res/drawable/ directory of your project.

笔者翻译：

点九图是一种可拉伸的位图，安卓会自动调整它的大小，来使图像在充当背景时可以在界面中自适应。点九图的一个典型使用场景，就是用作标准Android按钮的背景图，因为按钮必须通过拉伸，来适应不同程度的字符。

点九图是标准PNG格式的图像，并且包含了多出来的1像素宽的边界。保存点九图时要以”.9.png”为结尾，放置在项目中“res/drawable/”的路径之下。

它的功能性在于可以告诉程序图片的哪一部分要被拉伸，哪一部分不被拉伸，运用方法得当的甚至可以控制拉伸的比例。

图片拉伸最常见的应用场景，比如：

总的来说，图片拉伸能用则用，弊少利多。

以最常见的对话气泡来举例，因为对话文本的长度会有变化，因此对话气泡也要根据文本的长度来适应。

如果那某一小图直接拉伸，则会出现模糊或变形的情况。

如果直接全尺寸输出，则会增加程序负荷，别说程序猿不干，产品也是不会答应的。

于是就需要应用“点九图”来解决问题。

它的具体实现方式就是通过在图片四周添加“黑边”标记，来达到信息传达和定义的目的。当图片在程序中被编译生成最终apk程序时，程序会将“黑边”所代表的信息提取并实现图像拉伸，然后再把这部分去除，因此这些“点九图”中的“黑边”不会影响图像的显示。事实上，任意的apk文件解压后，其中的“点九图”都不再包含“黑边”。

四个黑边代表什么含义？

参考官当文档：

Use the border to define the stretchable and static areas of the image. You indicate a stretchable section by drawing one (or more) 1-pixel wide black line(s) in the left and top part of the border (the other border pixels should be fully transparent or white). You can have as many stretchable sections as you want. The relative size of the stretchable sections stays the same, so the largest section always remains the largest.

You can also define an optional drawable section of the image (effectively, the padding lines) by drawing a line on the right and a line on the bottom. If a View object sets the NinePatch graphic as its background and then specifies the view's text, it stretches itself so that all the text occupies only the area designated by the right and bottom lines (if included). If the padding lines aren't included, Android uses the left and top lines to define this drawable area.

To clarify the difference between the lines, the left and top lines define which pixels of the image are allowed to be replicated in order to stretch the image. The bottom and right lines define the relative area within the image that the contents of the view are allowed to occupy.

笔者翻译：

你可以使用边界来定义图像的“可拉伸区域”和“静态区域”（不可拉伸区域）。在图像的左边界、上边界画出一个（或多个）1像素宽的黑线，则表示你指定这些区域为“可拉伸区域”（其他边界上的像素必须全部为透明或白色）。你可以有尽可能多的“可拉伸区域”。它们的相对长宽将保持相同，因此最大的区域将总是被拉伸得最大。

你还可以在图像右边、底部划线，来指定图像的填充区域（实际上是内边距线）。如果一个View对象将点九图设置为它的背景，并设定了文本，则图像会自拉伸，来将所有的文本都包含在右边线、底边线（如果有的话）所划定的区域内。如果没有内边距线，Android则会用左边线、上边线来指定填充区域。

明确一下几条线的不同：左边线、上边线定义了图像中，可以自我复制来做拉伸的像素；下边线、右边线定义了图像中，可以来填充界面内容的相对区域。

上图文字：“可拉伸区域”；下图文字：“内容盒（可选）”

参考官当文档：

This NinePatch graphic defines one stretchable area with the left and top lines, and the drawable area with the bottom and right lines. In the top image, the dotted grey lines identify the regions of the image that are replicated in order to stretch the image. The pink rectangle in the bottom image identifies the region in which the contents of the view are allowed. If the contents don't fit in this region, then the image is stretched to make them fit.

笔者翻译：

点九图用左边线和上边线定义了可拉伸区域，用下边线和右边线定义了填充区域。上方的图中，灰色虚线所指定的区域，可以通过自我复制来拉伸图像。下方的图中，粉色矩形所指定的区域，则允许放置界面内容。如果内容与区域不能适应，图像会通过拉伸来适应内容。

Figure 2 shows the two buttons rendered from the XML and NinePatch image shown above. Notice how the width and height of the button varies with the text, and the background image stretches to accommodate it.

上方的图像展示了前文的点九图在XML中渲染的两个按钮，可以观察到按钮如何改变宽和高、背景图像如何进行拉伸，来适应文本内容。

拉伸区域对应着左边线、上边线

填充区域对应着右边线、下边线

实际应用中往往根据内容来进行图像拉伸

它有以下几个绝对要遵循的规则：

最后，有两个理解上要注意的点