关于android 聊天页面 类似泡泡包裹聊天内容的实现

本文 附加的代码 demo 就是实现聊天页面类似微信，陌陌等聊天信息被泡泡包裹。使得页面展示美观专业。 demo中包含了使用的切图，包含了布局，以及代码控制。本demo只是在UI上的实现，不没有实现完成的通信功能，对于聊天社交app,服务器交互很重要。比如消息的缓存，消息实时接收，延时接收，在线心跳等。

主页面就是一个listview：

---

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

>

android:orientation="horizontal"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:id ="@+id/MessageBox"

android:layout_alignParentBottom ="true"

>

android:layout_width ="200dip"

android:layout_height ="50dip"

android:layout_marginLeft ="50dip"

android:text ="输入聊天内容"

android:textSize="18dip"

android:id ="@+id/MessageText"

/>

android:layout_width ="wrap_content"

android:layout_height ="50dip"

android:layout_alignParentRight ="true"

android:text ="发送"

android:textSize="18dip"

android:id ="@+id/MessageButton"

/>

android:id="@+id/list"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_alignParentTop ="true"

android:layout_above ="@+id/MessageBox"

/>

---

然后实现item，区分接收和自己发送

接收的item布局

---

xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:orientation="horizontal"

android:layout_marginLeft="10px"

>

android:orientation="vertical"

android:layout_width="249px"

android:layout_height="wrap_content"

android:background="@drawable/outgoing"

>

android:orientation="horizontal"

android:layout_width="fill_parent"

android:layout_height="22dip"

>

android:id="@+id/messagedetail_row_name"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:textColor="#000000"

android:paddingTop="2px"

android:textSize="16dip"

/>

android:id="@+id/messagedetail_row_date"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:textColor="#000000"

android:paddingTop="2px"

android:textSize="16dip"

android:layout_marginLeft="60dip"

/>

android:id="@+id/messagedetail_row_text"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:paddingLeft="2px"

android:textColor="#0000DD"

android:textSize="16dip"

/>

android:layout_width="42px"

android:layout_height="42px"

android:layout_gravity="bottom"

android:id="@+id/messagegedetail_rov_icon"

android:background="@drawable/retouxiang"

/>

---

自己发送item:

---

xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:orientation="horizontal"

>

android:layout_width="42px"

android:layout_height="42px"

android:layout_gravity="bottom"

android:id="@+id/messagegedetail_rov_icon"

android:background="@drawable/retouxiang"

/>

android:orientation="vertical"

android:layout_width="249px"

android:layout_height="wrap_content"

android:background="@drawable/incoming"

>

android:orientation="horizontal"

android:layout_width="fill_parent"

android:layout_height="22dip"

>

android:id="@+id/messagedetail_row_name"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:textColor="#000000"

android:paddingTop="2px"

android:textSize="16dip"

/>

android:id="@+id/messagedetail_row_date"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:textColor="#000000"

android:paddingTop="2px"

android:textSize="16dip"

android:layout_marginLeft="60dip"

/>

android:id="@+id/messagedetail_row_text"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:paddingLeft="2px"

android:textColor="#0000DD"

android:textSize="16dip"

/>

---

使用的切图是.9图片：

代码控制就是acticity中代码和编写的listview 适配器。详细实现请下载demo查看。

demo 下载处