Android 最简单的聊天气泡界面布局
这是一个最简单的聊天界面布局,您可以在上面添加各种自己的需求。聊天气泡的背景是两个.9的图片
首先,我们来看看效果
进入正文
这是给大家提供好的轮子,再也不用自己去造轮子了。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_centerVertical="true"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!--接收消息-->
<RelativeLayout
android:layout_marginTop="10dp"
android:id="@+id/left_msg"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="@+id/left_chat_time"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="15:27"
android:textSize="10dp"
android:textColor="@android:color/darker_gray"
android:gravity="center|center_vertical"/>
<ImageView
android:layout_below="@+id/left_chat_time"
android:id="@+id/left_chat_head_icon"
android:layout_width="40dp"
android:layout_height="40dp"
android:background="@mipmap/head"/>
<TextView
android:layout_marginRight="50dp"
android:layout_centerVertical="true"
android:layout_below="@+id/left_chat_time"
android:layout_toRightOf="@id/left_chat_head_icon"
android:id="@+id/left_chat_data"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@mipmap/beijing_left_text"
android:gravity="center|left"
android:padding="10dp"
android:text="接收消息测试" />
</RelativeLayout>
<!--发送消息-->
<RelativeLayout
android:layout_marginTop="10dp"
android:id="@+id/right_msg"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="@+id/right_chat_time"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="15:27"
android:textSize="10dp"
android:textColor="@android:color/darker_gray"
android:gravity="center|center_vertical"/>
<ImageView
android:layout_alignParentRight="true"
android:layout_below="@+id/right_chat_time"
android:id="@+id/right_chat_head_icon"
android:layout_width="40dp"
android:layout_height="40dp"
android:background="@mipmap/head"/>
<TextView
android:layout_marginLeft="50dp"
android:layout_below="@+id/right_chat_time"
android:layout_toLeftOf="@id/right_chat_head_icon"
android:id="@+id/right_chat_data"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@mipmap/beijing_right_text"
android:gravity="center|right"
android:text="发送消息测试"/>
</RelativeLayout>
</LinearLayout>
最后来看看真实的效果
最后,附上.9的图片资源路径,因为直接上传资源需要积分去下载,所以我上传难道有道云笔记了,直接点击这个地址就可以去下载了
http://note.youdao.com/noteshare?id=ba355c3c818113064555699d1b20af0c