5分钟教你制作.9图片

2017-01-22 本文已影响1016人代码咖啡

前情提要

.9图片

之前项目中有用到.9图片，因精力有限，一直没有去尝试着弄过。如今因公司发展问题集体裁员，赋闲在家，便抽空简单地了解了一下.9图片的使用，作文如下，以做积累。

需求概要

在Android Studio环境下将PNG图片制作成.9图片，使之实现纯色背景自适应拉伸，图案内容保持原始比例。

准备素材及工具

PNG图片一张
Android Studio

.9.png认知

PNG是一种非失真性压缩位图图形文件格式。而.9.png是基于PNG图片，对其进行进行特殊处理，使之实现局部拉伸的图片格式。.9.png可实现两种效果：

效果1

效果2

作为资源图片纯色部分进行局部拉伸，使图案部分保持原始比例
作为输入框的背景图片，使图片部分区域拉伸，部分区域实现文本内容的填充

.9图片制作

修改图片格式
首先找一张普通的png图片，将其导入到Android Studio的drawable目录下。

普通png图片
修改其后缀名，由.png改为.9.png。
.9.png图片
双击指定.9格式的png图片，Android Studio右侧显示板会显示如下图编辑面板。
.9.png编辑面板
编辑规则

图片编辑规则
由上图可知，一张图片可分为上、下、左、右四条边，其中上和左是负责编辑图片拉伸区域的，下和右是负责编辑图片内容填充区域的。那怎么理解呢？首先我们来看看文章一开始的图片《.9图片》，可以看到图片的上边界的左右两端有不太明显的黑线，放大后如下图所示。
图片上边界-放大
上边界黑线表示水平方向上，黑线覆盖的区域可以拉伸，同理左边界黑线表示垂直方向上黑线覆盖的区域可以拉伸；对应而言，右边界和下边界分别表示垂直方向上和水平方向上黑线覆盖的区域可以填充内容。那么填充内容是什么意思呢？我们先来看一张图。
图片来自手机QQ
可以从图中看到“嗯，差不多了”所占据的区域即填充内容的区域，其对应在背景图右边界和下边界的区域就是.9图片制作时需要画下的黑线，此黑线用作标记图片文本内容的填充。在水平和竖直方向上，黑线覆盖的区域用于填充文本。
绘制操作
那么如何绘制出黑线呢？在Android Studio的.9.png绘制面板中可以看到图片的上下左右区域，如下图红色框框区域。

绘制操作
点击任意红色框框区域，按住鼠标进行拖动，可实现黑线绘制。若绘制黑线后需要对黑线覆盖的区域进行调整，可将鼠标移至黑线两段的竖直方向的线，按住鼠标进行拖动可调整黑线的长度（覆盖区域）。
绘制操作
点击除黑线的其他区域，如下图红色框框中的区域，可添加新的黑线，对多个区域进行拉伸。
绘制操作
绘制完毕后，可实现图片纯色部分拉伸，图案部分保持原始比例。
绘制操作
其效果图如下：
纵向适应
横向适应
按如上操作，亦可完成之前所述效果2的实现，即：作为文本输入框的背景图片，实现填充内容区域不拉伸，其他区域适应文本内容大小。
.9.png实现QQ气泡效果