21

我正在创建一个聊天应用程序，并且正在考虑创建实际聊天视图的方法。

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

我正在考虑创建一个TableLayout，每一行将是用户图像和聊天消息（或气泡或其他）。

有没有人知道如何设计和创建这些行？

这是我到目前为止所做的：

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

我正在努力实现这种外观所需的聊天视图

4

4 回答 4

27

下面的代码怎么样 -

主.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>

这是我的输出 -

截屏

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

于 2012-06-26T07:10:16.453 回答
24

我建议您为 ListView 创建自定义适配器，而不是 TableLayout 。您只需要检查条件以更改getViews()方法内部布局/视图的背景。

一些线程可能对您有帮助：

  1. Android：ListView 样式，如短信对话
  2. Android 在 ListView 中实现聊天气泡
于 2012-06-26T07:04:40.103 回答
14

list_item_message_left.xml

<?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:gravity="left"
android:orientation="vertical"
android:paddingBottom="5dp"
android:paddingRight="10dp"
android:paddingTop="5dp" >

<TextView
    android:id="@+id/lblMsgFrom"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="5dp"
    android:textColor="#777777"
    android:textSize="12dp"
    android:textStyle="italic" />

<RelativeLayout
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/txtMsg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/bg_msg_from"
        android:paddingBottom="5dp"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:paddingTop="5dp"
        android:textColor="#ff717171"
        android:textSize="16dp"

        android:layout_toRightOf="@+id/textView27"
        android:layout_marginRight="50dp" />

    <TextView
        android:id="@+id/textView27"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/triangle_msg_from"
        android:paddingRight="10dp"
        android:textColor="#ffffff"
        android:textSize="16dp"
        android:paddingLeft="10dp"
        android:paddingTop="2dp"
        android:layout_alignParentLeft="true"
        android:layout_marginTop="3dp" />

</RelativeLayout>

</LinearLayout>

list_item_message_right.xml

<?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:gravity="right"
android:orientation="vertical"
android:paddingBottom="5dp"
android:paddingRight="10dp"
android:paddingTop="5dp" >

<TextView
    android:id="@+id/lblMsgFrom"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="5dp"
    android:textColor="#777777"
    android:textSize="12dp"
    android:textStyle="italic" />

<RelativeLayout
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/txtMsg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/bg_msg_you"
        android:paddingBottom="5dp"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:paddingTop="5dp"
        android:textColor="#ffffff"
        android:textSize="16dp"

        android:layout_toLeftOf="@+id/textView27"
        android:layout_marginLeft="50dp" />

    <TextView
        android:id="@+id/textView27"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/triangle_msg_you"
         android:paddingRight="10dp"
        android:textColor="#ffffff"
        android:textSize="16dp"
        android:paddingLeft="10dp"
        android:paddingTop="2dp"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:layout_marginTop="3dp" />

</RelativeLayout>

</LinearLayout>

bg_msg_from.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" >
    <shape
        android:shape="rectangle" >

        <solid android:color="#C0C0C0" >
        </solid>

        <corners android:radius="5dp" >
        </corners>
    </shape>
</item>
<item>
    <shape
        android:shape="rectangle" >

        <solid android:color="#D8D8D8">
        </solid>

        <corners android:radius="5dp" >
        </corners>
    </shape>
</item>
</selector>

bg_msg_you.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" >
<shape
    android:shape="rectangle" >

    <solid android:color="#007AE5" >
    </solid>

    <corners android:radius="5dp" >
    </corners>
</shape>
</item>
<item>
<shape
    android:shape="rectangle" >

    <solid android:color="#0084FF" >
    </solid>

    <corners android:radius="5dp" >
    </corners>
</shape>
</item>
</selector>

triangle_msg_from.xml

 <?xml version="1.0" encoding="utf-8"?>
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
 <item  android:state_pressed="true" >
    <rotate
        android:fromDegrees="45"
        android:toDegrees="45"
        android:pivotX="87%"
        android:pivotY="140%" >
        <shape
            android:shape="rectangle" >
            <stroke android:color="#C0C0C0" android:width="10dp"/>
               </shape>
    </rotate>

  </item>
  <item>
    <rotate
        android:fromDegrees="45"
        android:toDegrees="45"
        android:pivotX="87%"
        android:pivotY="140%" >
        <shape
            android:shape="rectangle" >
            <stroke android:color="#D8D8D8" android:width="10dp"/>

        </shape>
    </rotate>
  </item>
  </layer-list>

triangle_msg_you.xml

 <?xml version="1.0" encoding="utf-8"?>
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
 <item  android:state_pressed="true" >
    <rotate
        android:fromDegrees="45"
        android:toDegrees="45"
        android:pivotX="13%"
        android:pivotY="-40%" >
        <shape
            android:shape="rectangle" >
            <stroke android:color="#007AE5" android:width="10dp"/>
               </shape>
    </rotate>

  </item>
  <item>
    <rotate
        android:fromDegrees="45"
        android:toDegrees="45"
        android:pivotX="13%"
        android:pivotY="-40%" >
        <shape
            android:shape="rectangle" >
            <stroke android:color="#0084FF" android:width="10dp"/>

        </shape>
    </rotate>
  </item>
  </layer-list>

messageListAdapter.java

    package eddine.charef.mechalikh....;
    import java.util.List;
    import android.annotation.SuppressLint;
    import android.app.Activity;
    import android.content.Context;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.BaseAdapter;
    import android.widget.TextView;

    public class MessagesListAdapter extends BaseAdapter {

    private Context context;
    private List<Msg> messagesItems;

    public MessagesListAdapter(Context context, List<Msg> navDrawerItems) {
        this.context = context;
        this.messagesItems = navDrawerItems;
    }

   @Override
public int getCount() {
    return messagesItems.size();
}

@Override
public Msg getItem(int position) {
    return messagesItems.get(position);
}

@Override
public long getItemId(int position) {
    return position;
}

@SuppressLint("InflateParams")
@Override
public View getView(int position, View convertView, ViewGroup parent) {

    Msg m = messagesItems.get(position);

    LayoutInflater mInflater = (LayoutInflater) context
            .getSystemService(Activity.LAYOUT_INFLATER_SERVICE);

    if (messagesItems.get(position).getleMien()) {
        convertView = mInflater.inflate(R.layout.list_item_message_right,
                null);
    } else {
        convertView = mInflater.inflate(R.layout.list_item_message_left,
                null);
    }

    TextView lblFrom = (TextView)    convertView.findViewById(R.id.lblMsgFrom);
    TextView txtMsg = (TextView) convertView.findViewById(R.id.txtMsg);
    txtMsg.setText(m.getMessage()+"\n"+m.getAttach());
    lblFrom.setText(m.getDate()+" - "+m.getHeure());

    return convertView;
}
}

消息.java

package eddine.charef.mechalikh....;
public class Msg {
private String email, message;
private boolean leMien;
private String attach;
private String cle;
private  String teleAttach;
private  String heure;
private  String date;

public Msg(String cle,String email, String message,String attach,boolean leMien,String teleAttach,String heure,String date) {
    this.email = email;
    this.message = message;
    this.leMien = leMien;
    this.attach = attach;
    this.cle=cle;
    this.teleAttach = teleAttach;
    this.heure = heure;
    this.date=date;
}

public String getEmail() {
    return email;
}

public void setEmail(String email) {
    this.email = email;
}

public String getMessage() {
    return message;
}

public void setMessage(String message) {
    this.message = message;
}

public boolean getleMien() {
    return leMien;
}

public void setleMien(boolean leMien) {
    this.leMien = leMien;
}
public String getAttach() {
    return attach ;
}

public void setAttach(String attach) {
    this.attach = attach;
}
public String getCle() {
    return cle ;
}

public void setCle(String cle) {
    this.cle = cle;
}


public void setTeleAttach(String teleAttach) {
    this.teleAttach = teleAttach;
}
public String getTeleAttach() {
    return teleAttach ;
}

public void setHeure(String heure) {
    this.heure = heure;
}
public String getHeure() {
    return heure ;
}
public String getDate() {
    return date ;
}

public void setDate(String date) {
    this.date = date;
}

}

在你的活动中像这样使用它

    ListView listMsg; 
    ArrayList<Msg> listMessages;
    MessagesListAdapter adapter;
    listMessages = new ArrayList<Msg>();

    listMessages.add(new Msg(cle,email,message,attach....));
    adapter = new MessagesListAdapter(this, listMessages);
    listMsg.setAdapter(adapter);

基于此http://www.androidhive.info/2014/10/android-building-group-chat-app-using-sockets-part-1/

截屏

于 2015-04-01T20:48:17.960 回答
5

我创建了一个用于创建聊天列表的库，这可能会有所帮助

https://github.com/himanshu-soni/ChatMessageView

于 2015-12-25T18:44:02.033 回答