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

2017-12-13  本文已影响0人  c9a0926bb167

本文 附加的代码 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 下载处

上一篇 下一篇

猜你喜欢

热点阅读