创建于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?

这是我做过什么到现在：

this is what I did up to now:

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

推荐答案

如何低于code -

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屋！