今天在做毕设的时候要设计一个留言板模块,想来想去还是做成类似与微信QQ那样的聊天界面,但是在发送消息的时候遇到了聊天框无法自适应伸缩,导致界面十分难看,于是一番查找之后,发现patch9图可以自适应文字位置进行伸缩。研究了半下午,基本上是搞明白了制作过程,并制作好了聊天框的9-patch图,文末附上做好的聊天框9-patch图。
话不多说,先贴上效果图。
下面讲解一下9-patch图的制作过程。
-
先将要制作9-patch图的原图导入到res目录下的drawable文件夹下,并右键点击create 9-patch, 然后默认保存在此文件夹下。
-
打开制作好的9.png图,如下图所示,关键地方来了,图中共有上下左右四个黑色框框,将其标为1234。
其中1,2号黑色边框是用来标记可伸缩的范围,也就是在进行自适应的时候,图片可以伸缩的地方。
3,4号黑色边框是用来标记文字内容所在范围,勾选show content便可以看到文字所显示的位置。
黑色边框的绘制有一点很不方便描述,其实就是在每一个图片的边界有4个1像素的边界,鼠标进行划取进行标记,按住SHIFT+鼠标则进行取消。
- 最后将之前的原图删除,同时退出AndroidStudio再次打开,文件资源才会重新加载,否则xml文件中将一直无法识别制作的9-patch图。
(ps:我之前一直觉得前端跟其他岗位比起来技术含量不是那么的高,没想到一个小图我都得做那么久。。。唉,真是各行有各行的难,哪一块都得费大劲。)
文末附上本人已做好的聊天框9-patch图,供大家参考,聊天框9-patch(含左右),开源牛逼就完事了。