利用Photoshop制作点9图

萧清轩关注

0.7432019.02.28 01:06:53字数 703阅读 1,070

点9图（.9.png）是Android开发中一个特殊的图片格式，它能很好的解决我们的屏幕适配问题，项目中经常用到的地方就是聊天气泡，以及某些特殊形状的背景、边框等；
先来认识下.9图

 

bg_comment.9.png

 

这个就是我之前做的一个.9图，可以看到，这是一个带阴影，又带突出三角的气泡，在我的项目中，它是一个界面一些信息的背景
它有4条黑边

左边：控制垂直方向可拉伸区域；
上边：控制水平方向可拉伸区域；
右边：控制垂直方向内容可填充区域；
下边：控制水平方向内容可填充区域；
PS：.9图画黑边的区域必须没有其他任何颜色（纯透明）

下面用两张图分别介绍一下“可拉伸区域”和“可填充区域”

可拉伸区域

可拉伸区域.png

 

（绿色部分）左边上边两条黑线分别无限加宽，所占用的空间，就是.9图可拉伸的区域，四个灰色区域放大不受影响；

可填充区域

可填充区域.png

 

同样是想象两条黑线无限加宽，但这次取相交的区域，就是可填充区域
认识了.9图，具体怎么做呢？

任意图片都能做成.9图，只需四步

1、导入图片到ps
2、执行图像 - 调整画布 - 切换到分辨率 - 宽高各加2像素
3、根据需求，分别在边缘画出1像素宽的黑线，要纯黑，也就是色号#000000
4、保存图片，导出点9图

调整画布.png

 

宽高各加两像素

 

调整画布大小.png

 

将画笔设置为纯黑，大小1像素，硬度100

 

调整画笔.png

根据需求画完黑线之后，导出-存储为web所有格式，选择 PNG-24

 

导出成png24.png

 

最后一步，非常重要，这步不做，前面都白扯

手动修改文件名为 *.9.png 样式

手动修改文件名为 *.9.png 样式

手动修改文件名为 *.9.png 样式

重要的事情说三遍！！！
到此 .9图就生成完毕了
一定要把它放在 res - drawable 文件夹下(根据切图大小，选择对应尺寸的drawable文件)，然后将.9图作为背景设置在指定View上

有点人会发现，直接放在drawable文件下，图片过大，那是因为你没有放在对应尺寸的文件夹里，解决方法有两种

1、手动创建 符合切图尺寸的 drawable文件，比如 drawable-xxhdpi
2、让UI直接切drawable尺寸的.9图给你