Android中AS创建点9图片与使用

软件环境：Android  Studio 2.1.2、win10家庭版电脑

.9图片，对于Android开发者而言，想必并不陌生。只是偶尔开发中涉及，难免因搁置太久，已忘却。今有重拾此知识，现亲测汇总，望于其他人有所助益！

一、.9概述

.9图片是andriod app开发里一种特殊的图片形式，文件的扩展名为：.9.png；

作用：就是在图片拉伸的时候保证其不会失真。具体则是通过设置其四个“边框”处，是图片在指定位置进行水平/垂直拉伸并且指定其图片被覆盖内容的显示位置，从而使得图片的边角处不致失真而影响美观；

二、.9图片制作详解

（1）打开AS，选择需要.9操作的图片，右击，Create 9-Patch file

AS将默认生成至当前文件夹中，如下图

双击打开，如下图

如果仅是如此，不对此.9图片做任何操作，其与一般图片无异。

下面是我的测试页面同布局，

（2）将原图片（icon_dialog.png）作为TextView的背景，运行之后你会发现两个问题：

其一，你会发现右下角变得很模糊，影响美观

其二，就是“灯火辉煌”这几个文字显示的位置不对

此处不做运行结果截图展示。

（3）了解AS单击.9图片之后的页面属性（*）

标识1：“Zoom”选项，是来放大或缩小“1号区域”中我们的图片，方便大家编辑；

标识2：“patch scale”选项，是来放大或缩小“2号区域”中我们的.9示例图片；

标识3：“Show lock”选中该选项，把鼠标放到我们编辑过的图片上就会发现，在图片上显示了一个类似于对角线的东西，那个是锁，锁住了不可编辑的区域；

标识4：“Show content”选项是在右边的查看区域中的图片显示我们需要拉伸的地方；

标识5：，“Show patches”选项是将降级过的图片的区域用其他颜色表示出来，方便我们查看；

标识6：“Show bad patches” 选中该选项就会出现红色的线条将我们需要拉伸的区域，圈起来，方便我们查看自己编辑过的需要拉伸的区域；

标识7：顶部：在水平拉伸的时候，保持其他位置不动，只在这个点的区域做无限的延伸；

标识8：左边：在竖直拉伸的时候，保持其他位置不动，只在这个点的区域做无限的延伸；

标识9：底部：在水平拉伸的时候，指定图片里的内容显示的区域；

标识10：右边：在竖直拉伸的时候，指定图片里的内容显示的区域；

（4）制作流程

进入.9图片的操作界面，右边则是实时的显示界面。接下来，我们要对图片进行描边了，描边之前一定要清楚四条边的含义，上左控制拉伸位置，下右控制内容显示位置。

4.1描边时，按下鼠标左键，然后放在图片边界移动就能描边了，要是想要去掉黑边，可以按下Shift键，然后点击鼠标左键。

我们先绘制左上两边，控制拉伸位置，如下绘制完成了之后，可以看右边的阅览图，明显比没有绘制时边角的清晰度更高。

此时为了防止右下角被拉伸，划线的时候，特意将右下角处空出来。

4.2绘制完了图片的拉伸区域之后，我们还需要绘制图片包裹的内容的显示区域，如果没有绘制的话，里边的内容是会从左到右依次显示，这样有时达不到我们想要的效果。

Demo中的图片我想要图片里面的文本显示在中央区域，即不显示在文本区域，所以我的黑色描边可以这样描。

通过对四条边的描黑边处理，我们就成功了避免了上述我们遇到的两个问题，拉伸的都是我们设置的区域，显示的也是我们想要显示的位置。

4.3对不同情况下描边的远行结果运行测试

4.3.1上诉四边描述成功下的运行界面展示

4.3.2四边都不描的的运行界面展示（编译出错）

4.3.3只描顶边的运行界面展示（编译出错）

4.3.4只描顶边与左边的运行界面展示

 

运行结果是右下角没有拉伸变形，但是文字位置没有处于正中间。

4.3.5只描底边与右边的运行界面展示（编译出错）

4.3.6只描底边与右边，还有顶边的运行界面展示（编译出错）

（5）综上所述

其一、AS 2.1.2对于.9图片的编译，至少需要描两条边——顶边与左边；

其二、AS制作.9图，一定要分清楚左上边，与右下边的作用；

其三、AS对于解决边角拉伸与内容位置只是基于一些简单的操作，对于一些比较复杂的图片需求，可能就不会那么容易了。

其四、.9.png图片放在 drawable目录下引用，放在mipmap目录下回报错

总之，技术路漫漫兮，吾将上下而求索！