需要准备:
QQ气泡图片 下载地址 链接:http://pan.baidu.com/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="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#F2F2F2"
android:orientation="vertical"
tools:context="cn.imxz.qqpaopao.MainActivity" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginRight="5dp"
android:layout_marginTop="10dp"
android:orientation="horizontal" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/niuniu"
android:text="哈哈 你好" />
<cn.imxz.view.XCRoundImageView
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_gravity="right"
android:src="@drawable/headimg_z" />
</LinearLayout>
<LinearLayout
android: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.XCRoundImageView
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_gravity="right"
android:src="@drawable/headimg_m" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/jianjian"
android:text="你也好啊" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginRight="5dp"
android:layout_marginTop="10dp"
android:orientation="horizontal" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/niuniu"
android:text="能做个朋友么?" />
<cn.imxz.view.XCRoundImageView
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_gravity="right"
android:src="@drawable/headimg_z" />
</LinearLayout>
<LinearLayout
android: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.XCRoundImageView
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_gravity="right"
android:src="@drawable/headimg_m" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/jianjian"
android:text="好呀" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginRight="5dp"
android:layout_marginTop="10dp"
android:orientation="horizontal" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/niuniu"
android:text="你叫什么名字?" />
<cn.imxz.view.XCRoundImageView
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_gravity="right"
android:src="@drawable/headimg_z" />
</LinearLayout>
<LinearLayout
android: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.XCRoundImageView
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_gravity="right"
android:src="@drawable/headimg_m" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/jianjian"
android:text="我叫曉莊" />
</LinearLayout>
</LinearLayout>
其中用到了 Android开发之自定义圆形的ImageView的实现 地址 http://www.cnblogs.com/JczmDeveloper/p/3873043.html
其实主要的是学习 Draw 9-Path的用法.挺好玩的.
有看到了这个图片圆形化的代码 66哒