学习 | android studio 如何制作.9图片_android .9图片制作

纯纯的一边开发一边学习，是小白是菜鸟，单纯的记录和学习，大神勿喷，理解有错望指正～

前言

前几天接触到了android studio 中的.9格式的图片制作，详细记录一下我所理解的吧～

---

问题

我们经常会遇到某个图片被拉伸，变形，失真这些问题。

那么如何在图片可以被拉伸的情况下，依然不影响四个角落与中间的图案呢？

.9图片就可以帮助解决这个问题。

---

举例

如下所示，这个图片是一个正方形的图片，但由于它容器里的textView文本偏长，导致这张图片就被拉伸的不忍直视，我们要做的就是：让它的四个角以及中间的图片不被拉伸
在这里展示一下对比的结果，效果还是很明显的吧，那接下来我们就来制作.9图片。

设置前：

设置后：

---

制作

新建.9图片：

1、可以让公司的UI设计师针对你的图片画一份；

2、右击图片重命名直接在后面加上.9；

3、右击图片选择create 9-Patch file 直接生成一张新的，不过记得要把旧的png的删掉，否则编译会报错；

---

查看.9图片：

创建好后打开，左下角图片预览那一栏下面多了两个 tab 栏：9-Patch 和 ImageFileEditor；

选中 9-Patch 栏，我们可以看到如下界面：

• 左边的是我们的原图；
  • 原图图片很小的话，可以用下方工具栏的Zoom放大查看。
• 右边可以看到有3张图：
  • 代表竖直方向拉伸后的图片
  • 代表水平方向拉伸后的图片
  • 代表竖直方向和水平方向都拉伸后的图片
• 可以看到，拉伸后四个角都已经变形，里面的数字1也被拉伸了，如果你预览的时候右边的图片很小的话，可以用下方工具栏的patch scale 放大查看。

将鼠标移到左边原图上，这个时候会看到边界显示的有好几条线，通过移动这几条线，就可以给图片绘制1px宽度的黑线。

这里就必须说一下四条边上黑线的含义了，也是制作的秘诀。

• 上边：控制图片水平方向可拉伸的区域
• 左边：控制图片竖直方向可拉伸的区域
• 右边：控制图片内包裹内容的竖直显示区域
• 下边：通知图片内包裹内容的水平显示区域

也就是左上两条边控制图片本身的拉伸，右下两条边控制图片包裹内容的显示区域。

---

编辑.9图片：

那这张图片就可以这样制作：

这里说一下这些线条的意思：

• 上边：代表水平可拉伸区域，在水平方向设置一条黑线，也可以是一个点，或者几条或几个点（不用设置很长，因为黑线区域就表示可无限拉伸）
• 左边：代表竖直方向可拉伸的区域，同样也是为了避免中间的1被拉伸，而且上下拉伸距离一样，所以选择了在圆角部分和1的部分不做拉伸。
• 右边，内容竖直方向区域是要充满的，但不能到圆角部分
• 下边，内容水平方向区域是要充满的，但是不能到圆角部分

设置完后，就可以看到这图的效果了，然后我们设置一下scale参数，发现就算被放大到很大，图片依然没有失真，那我们的 .9 就算成功了。

这里再说一下上图中几个可勾选内容的意思：

• show lock :暂时不知道什么意思，只是注意到如果勾选，鼠标放到原图上会出现一块红黑色区域
• show content ：图片包裹内容的显示区域，也就是上图右边部分图偏蓝色部分
• show patches：显示图片被拉伸的区域，也就是左边原图中间那几个红色小区域
• show bad patches: 显示做的不好的可拉伸的区域。比如，我们的消息气泡的那个尖尖我们肯定不想被拉伸，如果我们照如下图设置左边黑线让尖角也是可拉伸的区域，就会显示 bad patches。

到此， .9 图就制作完毕了。

---

参考链接：android studio 制作.9 图片