在android中创建一个chatView布局 [英] create a chatView layout in android

问题描述

我正在创建一个聊天应用程序，我正在考虑如何创建实际的聊天视图.

I'm creating a chat application and I'm thinking on ways to create the actual chat view.

我已经有了聊天窗口本身的布局，但我正在考虑如何实现聊天消息.

I already have the layout for the chat window itself but I was thinking about how to implement the chat messages.

我正在考虑创建一个 TableLayout 并且每一行都将是用户图像和聊天消息(或气泡或其他内容).

I was thinking of creating a TableLayout and each row will be the users image and the chat message (or bubble or what not).

有人知道如何设计和创建这些行吗?

Does anyone have an idea on how to design and create these rows?

这是我目前所做的:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/background_light"
    android:orientation="vertical"
    android:weightSum="10" >

    <ScrollView
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_weight="1" >

        <TableLayout
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:stretchColumns="1" >

            <TableRow
                android:id="@+id/tableRow1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" >

                <!-- insert chat message here !-->

            </TableRow>

            <View
                android:layout_height="2dip"
                android:background="#000" />

            <TableRow
                android:id="@+id/tableRow2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" >

                 <!-- next chat message --!>

            </TableRow>
        </TableLayout>
    </ScrollView>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:layout_weight="9"
        android:orientation="horizontal" >

        <EditText
            android:id="@+id/chatLine"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:hint="Say:"
            android:imeOptions="actionSend"
            android:singleLine="true" />
    </LinearLayout>

</LinearLayout>

---

我正在尝试实现这种外观

---

and I'm trying to achieve a this look

推荐答案

下面的代码怎么样 -

How about below code -

Main.xml

<LinearLayout android:id="@+id/list_layout"
    android:layout_height="fill_parent" 
    android:layout_width="fill_parent"
    android:background="@drawable/background"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <ListView android:id="@+id/myList" 
        android:layout_height="fill_parent"
        android:layout_width="wrap_content"/>

</LinearLayout>

list_row_layout_even.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/even_container"
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content">

    <ImageView android:id="@+id/user_img"
        android:layout_height="wrap_content" 
        android:layout_width="wrap_content"
        android:layout_marginTop="80dip"
        android:src="@drawable/sample_image"/>

    <ImageView android:id="@+id/even_bubble"
        android:layout_height="wrap_content" 
        android:layout_width="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_margin="5dip"
        android:src="@drawable/even"/>

    <TextView android:id="@+id/text" 
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_alignParentRight="true"
        android:textColor="#000000" 
        android:textSize="16dip"
        android:layout_marginRight="8dip"
        android:layout_marginLeft="120dip"
        android:layout_marginTop="10dip" />

</RelativeLayout>

list_row_layout_odd.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/even_container"
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content">

    <ImageView android:id="@+id/user_img"
        android:layout_height="wrap_content" 
        android:layout_width="wrap_content"
        android:layout_marginTop="80dip"
        android:layout_alignParentRight="true"
        android:src="@drawable/sample_image"/>

    <ImageView android:id="@+id/odd_bubble"
        android:layout_height="wrap_content" 
        android:layout_width="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_margin="5dip"
        android:src="@drawable/odd"/>

    <TextView android:id="@+id/text" 
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_alignParentLeft="true"
        android:textColor="#ffffff" 
        android:textSize="16dip"
        android:layout_marginRight="120dip"
        android:layout_marginLeft="8dip"
        android:layout_marginTop="10dip" />

</RelativeLayout>

这是我的输出 -

只需根据您的需要自定义此示例.

这篇关于在android中创建一个chatView布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！