Android 最简单的聊天气泡界面布局(adapter的布局)

Android 最简单的聊天气泡界面布局

这是一个最简单的聊天界面布局,您可以在上面添加各种自己的需求。聊天气泡的背景是两个.9的图片

首先,我们来看看效果

Android 最简单的聊天气泡界面布局(adapter的布局)_第1张图片

进入正文

这是给大家提供好的轮子,再也不用自己去造轮子了。

<?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>

最后来看看真实的效果

Android 最简单的聊天气泡界面布局(adapter的布局)_第2张图片

最后,附上.9的图片资源路径,因为直接上传资源需要积分去下载,所以我上传难道有道云笔记了,直接点击这个地址就可以去下载了
http://note.youdao.com/noteshare?id=ba355c3c818113064555699d1b20af0c

你可能感兴趣的:(Android)