Android之QQ聊天气泡对话实现

需要准备:

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哒