天天看点

点九图学习与制作

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

1. 点九图概述

1.1 点九图是什么?

Android平台里有一种特殊的图片形式,文件扩展名 ​

​xxx.9.png​

​,为了方便记忆,所以称其为点九图,英文是 Nine Patch。

1.2 为什么使用点九图

先来看下下面的场景:

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

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

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

点九图学习与制作

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

点九图学习与制作

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

点九图学习与制作

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

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

1.3 点九图的优势

点九图对标的是 ​

​.png​

​格式的图片。

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

点九图学习与制作

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

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

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

2. 使用Android Studio制作点九图

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

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

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

​ic_lancher.png​

​吧。

我们找到该图片,右键点击 Create 9-Patch file:

点九图学习与制作

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

点九图学习与制作

点击之后,我们就可以对图片进行操作了。

点九图学习与制作

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

点九图学习与制作

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

​Shift​

​,做橡皮檫态。

一顿操作下来,绘制的黑边如下:

点九图学习与制作

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

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

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

3. 参考资料