需要准备:
QQ气泡图片 下载地址 链接：/s/1qYlLgb6 密码：wii0
安卓SDK下的tools文件夹下的draw9patch.bat
首先用eclipse新建一个安卓项目,我选择的是线性布局.
然后每行我用了一个线性布局 代表每行是一个人说的话 互相说话嘛.
这里这个气泡如何实现呢?如果直接给textview增加背景就会出现拉伸严重的情况. 这时候就可以用draw9patch.bat来对图片进行处理.让背景只被拉伸部分,其余部分不被拉伸.
打开这个bat文件稍等后会出现Draw 9-Path主界面然后载入个气泡.如下
右边是结果 左边是要修改的操作.
我们仔细看可以发现在左边图片边框距离灰色线有一点点距离.那里就是添加拉伸标识的地方.
左和上是控制拉伸 右和下是控制文字区域.
//勾选 Show lock 和 Show Pathes
然后拖动上下方灰线 和 左右方向虚线 就可以看到右边的图片有些部分没有被拉伸了.
其中 与黑色块对齐的部分就是要被拉伸的部分 其余的则不是.
然后就可以看到 如右边显示的. 是不是和QQ那个贱贱气泡发消息的一样了?
然后 勾选掉那两个
勾选Show content 可以在右边看到文字所要显示的区域 .这时候拖动左边图片的左右和上下两边的虚线就可以控制文字区域.结果如下图
结果就是这样了.那个淡紫色区域就是文字要显示的区域.
这个黑线是不能有中断的.不然可能又问题.
如果选多了 或者 点错了 可以点住Shift+鼠标右键 点击黑点 就可以取消此处标记.
不行的话就试一试 鼠标右键点击.如果点不中 就用下面的放大滑动条 放大图片 这样好调整一点.
然后保存文件.(记住这个文件一定是 文件名.9.png 格式的文件!!!)
同理 做一个反向的气泡.
现在我们就开始撸代码
<LinearLayout xmlns:android="/apk/res/android"xmlns:tools="/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:background="#F2F2F2"android:orientation="vertical"tools:context="cn.imxz.qqpaopao.MainActivity" ><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="right"android:layout_marginRight="5dp"android:layout_marginTop="10dp"android:orientation="horizontal" ><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:background="@drawable/niuniu"android:text="哈哈 你好" /><cn.imxz.view.XCRoundImageViewandroid:layout_width="60dp"android:layout_height="60dp"android:layout_gravity="right"android:src="@drawable/headimg_z" /></LinearLayout><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="left"android:layout_marginLeft="5dp"android:layout_marginTop="10dp"android:orientation="horizontal" ><cn.imxz.view.XCRoundImageViewandroid:layout_width="60dp"android:layout_height="60dp"android:layout_gravity="right"android:src="@drawable/headimg_m" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:background="@drawable/jianjian"android:text="你也好啊" /></LinearLayout><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="right"android:layout_marginRight="5dp"android:layout_marginTop="10dp"android:orientation="horizontal" ><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:background="@drawable/niuniu"android:text="能做个朋友么?" /><cn.imxz.view.XCRoundImageViewandroid:layout_width="60dp"android:layout_height="60dp"android:layout_gravity="right"android:src="@drawable/headimg_z" /></LinearLayout><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="left"android:layout_marginLeft="5dp"android:layout_marginTop="10dp"android:orientation="horizontal" ><cn.imxz.view.XCRoundImageViewandroid:layout_width="60dp"android:layout_height="60dp"android:layout_gravity="right"android:src="@drawable/headimg_m" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:background="@drawable/jianjian"android:text="好呀" /></LinearLayout><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="right"android:layout_marginRight="5dp"android:layout_marginTop="10dp"android:orientation="horizontal" ><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:background="@drawable/niuniu"android:text="你叫什么名字?" /><cn.imxz.view.XCRoundImageViewandroid:layout_width="60dp"android:layout_height="60dp"android:layout_gravity="right"android:src="@drawable/headimg_z" /></LinearLayout><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="left"android:layout_marginLeft="5dp"android:layout_marginTop="10dp"android:orientation="horizontal" ><cn.imxz.view.XCRoundImageViewandroid:layout_width="60dp"android:layout_height="60dp"android:layout_gravity="right"android:src="@drawable/headimg_m" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:background="@drawable/jianjian"android:text="我叫曉莊" /></LinearLayout></LinearLayout>
其中用到了Android开发之自定义圆形的ImageView的实现 地址/JczmDeveloper/p/3873043.html
其实主要的是学习 Draw 9-Path的用法.挺好玩的.
有看到了这个图片圆形化的代码 66哒
