点九图学习与制作

点九图学习与制作

项目中一直有使用点九图，但是没咋接触，现在跟着大佬的blog来学习一下点九图的制作。

1. 点九图概述

1.1 点九图是什么？

Android平台里有一种特殊的图片形式，文件扩展名 ​​xxx.9.png​​，为了方便记忆，所以称其为点九图，英文是 Nine Patch。

1.2 为什么使用点九图

先来看下下面的场景：

当我们需要为一段文字添加图片背景，而我们并不知道这段文字的长度和宽度，该如何解决？一个图片在不同的分辨率下，边角会失真，如何解决？

比如社交IM中，我们并不知道用户聊天的字数长度，如果我们给其定死一个图片Drawable作为Background，那么在字数超过一定范围后，背景将会失真，视觉体验极差。而如果我们对图片根据实际情况进行拉伸，也会存在很多问题。

而点九图则是为了帮助我们更好的对图片进行拉伸。比如下面这个切图：

如果他需要纵向拉伸，直接拉会变成下面这个样子：

而点九图可以做到局部拉伸，而不是整体拉伸，这样就可以容易把变形的部分保护起来：

所以，从上面的保护和变形就能大致知道，点九图名称的由来，点九图一共分为九个部分：四个角、四条边和中间区域。

其中，4个角是不做拉伸的，而2条水平边和垂直边只做水平和垂直拉伸。所以可以保持圆角一直清晰、四条边不会被拉粗的情况。只有中间用黑线指定的区域做拉伸。结果是图片不会失真、走样。

1.3 点九图的优势

点九图对标的是 ​​.png​​格式的图片。

一组测试，普通png经过拉伸，会产生明显的变色横纹，而使用 .9.png图片的效果则明显更好：

这是因为Android系统对点九图有专门的优化算法，优化其在多种分辨率下的显示。总的来说下面几个优势：

点九图虽然由程序员自己制作，但是Android提供了专门的工具，所以可以减少开发工作量点九图具有极高的适配性，只需要一套切图，就可以适配多种分辨率，这样可以大幅减少Apk的大小经过大量测试表明，使用点九图在多场景的显示效果远远优于png图片

总的来说，在Android端，点九图适用于需要图片拉伸的场景，比如说聊天小气泡、各种Tip气泡等。

2. 使用Android Studio制作点九图

在制作之前，我们需要先搞懂点九图的四条黑边的意义：

顶部黑边：在水平拉伸的时候，保持其他位置不动，只在这个点的区域做无限延伸左边：在竖直拉伸的时候，保持其他位置不同，只在这个点的区域做无限延伸底部：在水平拉伸的时候，指定图片里的内容显示区域右边：在竖直拉伸的时候，指定图片里的内容显示区域

我们来制作一个聊天用的气泡，我们需要一张 png作为原图，这样的话我们就拿Android自带的 ​​ic_lancher.png​​吧。

选择好路径和名称后，会产生一个点九图：

左边的界面是操作界面，右边的是图片拉伸后的预览效果。假如我们的目标是要在下面红框中做文字的展示，那我们需要通过四条黑边画出这个区域来。

滑动的地方在四个边界上，只要按下鼠标左键，就能进行描边，如果想要去掉黑边、恢复操作，则需要按下 ​​Shift​​，做橡皮檫态。

一顿操作下来，绘制的黑边如下：

可以看到，我们把中下方的区域做为内容显示的区域，那么在内容变长后，会做一个水平、垂直的拉伸，效果如右边图片所示。

一般来说，左边和上边是一点决定了拉伸宽度，而右边和下边决定了位置

接下来我们将该图片应用到TextView中去，如下所示：

3. 参考资料

​​点九切图你知道怎么切吗？​​​​看完这篇基础科普，别再说你不会用点九图了！​​​​百度百科：点九​​​​Android studio中.9图片的含义及制作教程​​

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。