Android之QQ聊天气泡对话实现

需要准备:

QQ气泡图片 下载地址  链接:http://pan.baidu.com/s/1qYlLgb6 密码:wii0

安卓SDK下的tools文件夹下的draw9patch.bat


首先用eclipse新建一个安卓项目,我选择的是线性布局.

然后每行我用了一个线性布局 代表每行是一个人说的话 互相说话嘛.


这里这个气泡如何实现呢?如果直接给textview增加背景就会出现拉伸严重的情况. 这时候就可以用draw9patch.bat来对图片进行处理.让背景只被拉伸部分,其余部分不被拉伸.


打开这个bat文件稍等后会出现Draw 9-Path主界面然后载入个气泡.如下
Android之QQ聊天气泡对话实现_第1张图片

右边是结果 左边是要修改的操作.

我们仔细看可以发现在左边图片边框距离灰色线有一点点距离.那里就是添加拉伸标识的地方.

左和上是控制拉伸   右和下是控制文字区域.

//勾选 Show lock 和 Show Pathes 

然后拖动上下方灰线 和 左右方向虚线 就可以看到右边的图片有些部分没有被拉伸了.

Android之QQ聊天气泡对话实现_第2张图片

其中 与黑色块对齐的部分就是要被拉伸的部分 其余的则不是.

然后就可以看到 如右边显示的. 是不是和QQ那个贱贱气泡发消息的一样了?

然后 勾选掉那两个

勾选Show content 可以在右边看到文字所要显示的区域 .这时候拖动左边图片的左右和上下两边的虚线就可以控制文字区域.结果如下图

Android之QQ聊天气泡对话实现_第3张图片

结果就是这样了.那个淡紫色区域就是文字要显示的区域.

这个黑线是不能有中断的.不然可能又问题.

如果选多了 或者 点错了  可以点住Shift+鼠标右键 点击黑点 就可以取消此处标记.

不行的话就试一试 鼠标右键点击.如果点不中 就用下面的放大滑动条 放大图片 这样好调整一点.

然后保存文件.(记住这个文件一定是 文件名.9.png 格式的文件!!!)

同理 做一个反向的气泡.


现在我们就开始撸代码



    

        

        
    

    

        

        
    

    

        

        
    

    

        

        
    

    

        

        
    

    

        

        
    


其中用到了 Android开发之自定义圆形的ImageView的实现 地址 http://www.cnblogs.com/JczmDeveloper/p/3873043.html


其实主要的是学习 Draw 9-Path的用法.挺好玩的.

有看到了这个图片圆形化的代码  66哒

你可能感兴趣的:(Android)