点九切图详细教程，你会切吗？

原创不易，如需转载，请附上本文链接，谢谢支持 https://editor.csdn.net/md?articleId=109488657

一、认识点九切图

点九切图只应用在安卓移动端，iOS是不需要的，点九切图法是要求UI设计师必须掌握的一个能力，但是很多时候设计师的工作不能非常饱和的去做移动端界面设计，这就导致许久不切就会忘记的情况，今天我就遇到了这样的困扰，大半年没切点九切图了，忘记了。。。。所以总结一下切点九图的规范和方法，方便我下次忘记可以方便拾起，也分享一下给大家。

点九切图是在安卓移动端为了满足图片拉伸和收缩的需求，如聊天气泡框、不规则可伸缩图形这些根据内容长度、高度变动而变动的图形等，都需要用到点九切图来保证拉伸图片效果的情况下同时限制切图大小和数量，如图所示

二、点九切图的四根线

点九切图会在四周放1px的纯黑色的四条线，上方黑线表示图形左右可拉伸的像素，左侧表示图形上下可拉伸的像素，右侧黑线表示在纵向方向上内容填充的范围，下方黑线表示在横向方向上内容填充的范围。

1. 线段大小为1px，颜色必须为纯黑色（ #000000 ），不可出现半透明像素，不可以存在四个角及不能拉伸区域；

2.文件的后缀名必须是.9.png，不能是.png或者是.9.png.png，这样的命名都会导致编译失败

三、点九切图原理

点九切图的图片四周有四根黑线，上和左控制拉伸区域，以上边的线为中心左右延伸，以左边的线为中心上下延伸，具体是上延伸还是下延伸，左延伸还是右延伸，开发小哥哥会去控制的，右线和下线则控制文本或者图片的显示区域。

四、点九切图工具

使用谷歌官方的draw9Patch.bat这个工具，（电脑要安装Java环境，比较麻烦，这个工具体验也很糟糕），也可以在PS，sketch等作图软件上进行切图，我是用ps做的，因为需求方要求psd文件，sketch做法跟ps很像，都是新建一个画板，将需要切图的图形移动过来，用矩形工具画四周的纯黑线，最后导出.9.png的图即可。

希望小伙伴帮忙点个免费的“关注”哇🌹，推荐给身边更多需要的小伙伴一起学习哇🤩，关注公众号后台回复免费获取学习资料

（ps：学习资料是我精心挑选的，都是我学习使用过觉得不错才分享给大家的，大部分都是我自掏腰包买的，绝对是行业内大佬的精品课）