安卓系统切九图,圆角矩形自适应拉伸的神奇魔法

你有没有发现，手机上的那些图标、按钮，还有那些圆角边框，怎么看起来那么顺眼，拉伸起来也不变形？这背后可有大秘密哦！今天，就让我带你一探究竟，揭开安卓系统中的切九图（.9.png）的神秘面纱！

切九图，名字听起来是不是有点酷炫？

想象你手中拿着一张普通的图片，想要把它变成手机应用中的图标或者背景。直接拉伸？圆角变形、边缘模糊，简直不忍直视！这时候，切九图就派上用场了。

切九图，安卓系统中的“变形金刚”

切九图，顾名思义，就是将一张图片切割成九个区域，通过特殊的处理，使得图片在拉伸时能够保持原有的形状和美观。听起来是不是很神奇？其实，它的原理很简单。

切九图的四大要求，你get了吗？

想要制作一张合格的切九图，可不能马虎。以下四大要求，你必须牢记在心：

1. 文件名格式：必须是“文件名.9.png”，别小看这后缀名，它可是切九图的身份标识哦！

2. 标识线区域：图片的上下左右各留有1px的标识线区，这个区域可是伸缩的“黄金地带”，千万不能有半透明像素，否则安卓系统可就不认你了！

3. 颜色要求：伸缩标识线要用不透明的纯黑色（000000），光学标识线要用不透明的纯红色（ff0000）。颜色不对，效果可就大打折扣了！

4. 绝对禁区：切九图的四个顶角处是绝对禁区，这1像素1像素的小区域里不能有任何内容。否则，你的切九图就变成了“四不像”。

伸缩线，拉伸的秘密武器

切九图中的伸缩线，就像是图片的“筋骨”，负责控制图片的拉伸和收缩。一般来说，点九图越小越好，但有时候，图片尺寸可能大于控件尺寸，这时候，伸缩线就发挥作用了。

伸缩线支持多段标注，可以同时拉伸/缩放切图中的多个不相邻区域。每个区域的拉伸/放缩长度与本区的伸缩标识线长度成正比。是不是很神奇？

内间距线，隐藏的“守护者”

内间距线，很多人可能有所误解。它并不是用来控制图片拉伸的，而是用来限制内容显示区域的。比如，你想要在图片上添加文字或者图标，内间距线就能保证内容不会超出显示区域。

CSS中的点九图，网页设计的小帮手

你以为切九图只是安卓系统的专属？其实，CSS中也支持点九图技术。通过border-image-slice和border-image-width属性，你可以在网页设计中轻松实现图片的拉伸和收缩。

border-image-slice: 12 34 12 34 fill;

border-image-width: 12px 34px 12px 34px;

这里的12、34分别对应着上、右、下、左四个边的距离。是不是觉得CSS中的点九图也很强大？

Duilib库中的点九图，控件贴图的变形金刚

Duilib库支持类似安卓系统中所用的点九图技术。在Duilib库中，点九图的应用有其自身特点。无需像安卓中要在图中绘制标记，Duilib库中所用点九图，就是普通的图像，其拉伸区域的定位标记是在xml的属性参数中体现。

通过查看Duilib源码项目目录中的属性列表.xml文件，xml图像属性中支持点九图功能。

这样的规则，就可利用小像素的图像，通过九宫格方式拉伸，就可形成不同大小的，而四角不变的图像。比较常用于框格的贴图应用。无须再对不同大小的框格而裁切不同大小的图像，避免徒增资源的体积。

切九图，让图片更生动

通过今天的介绍，相信你已经对切九图有了更深入的了解。它不仅让安卓系统中的图片更加美观，还让网页设计和Duilib库中的应用更加丰富多彩。下次再看到那些完美的图片效果，别忘了，背后可是有切九图的功劳哦！