点九图相信大家在入门 UI 的时候就开始接触过,只要涉及到Android开发,就会被广泛运用在很多场景。本次将结合我在实际工作中碰到的问题,详细介绍下「点九图」的具体应用方法。
1. 什么是点九图
在Android开发中,常用到的一种特殊格式的图片,它具有可拉伸的特性,官方学名叫NinePatchDrawable,简称「点九图」。 点九图是一种可拉伸的位图,安卓会自动调整它的大小,来使图像在充当背景时可以在界面中自适应。 点九图是标准PNG格式的图像,并包含了多出来的1像素宽的边界。保存点九图时要以
.9.png
结尾,放置在项目中【res/drawable/】路径之下。
从官方的解释我们可以知道以下几点:
- 首先是安卓设备才被支持
- 其特征主要是在原本很小的元素上进行定位拉伸序列表项
- 必须以
.9.png
结尾,才能被识别到序列表项序列表项
2. 为什么需要
Android 机型适配
Android有很多不同尺寸的屏幕,从720p,1080p,再到2k,还有现在的全面屏,固定尺寸的图片在这些屏幕上呈现会各不相同。 文案长度自适应
在点九图充当背景,上面承载文案时,因为文案的长短会根据实际需求动态调整,无法固定长度。所以一张图片无法适配这些复杂的场景。 提升性能
点九图不需要全尺寸输出图片,加上文案自适应,从而减小了安装包大小,降低了用户下载安装时长并提升性能。
3. 使用场景
聊天气泡
聊天气泡是最普遍的应用场景,包括特殊的样式,动态的文案长度,以及不同分辨率的适配。
小Tips提醒
我们经常看到的促销引导,功能说明,也可以根据产品运营需要动态调整大小,长度。
特殊背景的按钮
一些特殊的背景样式,高级投影的按钮,也可以用点九图输出,达到效果。
4. 实现原理
通过在图片四周添加「黑线」标记,达到信息传达和定义的目的。
当图片在程序中被编译并最终生成Apk程序时,程序会将「黑线」所代表的信息提取并实现图片拉伸,然后再把这部分去除,因此图中的「黑线」不会影响到图片的最终展示。
黑线的含义
- 纵向拉伸区域,控制图片高的拉伸
- 横向拉伸区域,控制图片宽的拉伸
- 纵向内容显示区域,文字在这个高度内显示
- 横向内容显示区域,文字在这个宽度内显示
5. 点9图的切图方法
下面以聊天气泡为例
- 在设计软件(Sketch/Figma/PS)将图片的展示区域缩到最小(预留出标注拉伸的空间,尽量让图片大小为偶数), 输出png资源
- 导入PS,选择图像->画布大小,宽和高各增加2px(上下左右各需要多出1px)
- 打开参考线显示,水平和垂直各拉几条对齐和居中的参考线(参考线的辅助可以帮助我们更准确画出「黑线」,不影响到特殊的边角)
- 用【选框工具】,选择纯黑色#000,分别在四周合适区域填充1px宽/高的 纯黑色线条。
- 完成后将图片保存为png格式,并将文件后缀名改成【.9.png】,输出给开发。
6. 需要注意的点
- 导出的文件必须是png格式,文件名必须以「.9.png」结尾
- 「黑色线条」一定是纯黑色#000的1px宽/高的线条,且在画的过程中要注意拉伸的位置
- 点九图只能被拉伸变大变长,不能被压缩变小变短,所以原图要尽量缩小范围
- 切图若有投影,要保证投影完整输出,且要在「黑色线条」范围内