在android中创build一个chatView布局

我正在创build一个聊天应用程序,我正在想方法来创build实际的聊天视图。

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

我正在考虑创build一个TableLayout ,每一行将是用户图像和聊天消息(或泡沫或什么不是)。

有没有人有如何devise和创build这些行的想法?

这是我到现在为止所做的:

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


我试图达到这样的样子 所需的聊天视图

Solutions Collecting From Web of "在android中创build一个chatView布局"

下面的代码如何?

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> 

这是我的输出 –

截图

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

而不是TableLayout,我build议你为ListView创build自定义适配器 。 你只需要检查条件来改变getViews()方法内布局/视图的背景。

有些线程可能对您有所帮助:

  1. Android:像文本消息对话的ListView风格
  2. Android在ListView中实现聊天泡泡

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; } } 

Msg.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/

截图http://s10.postimg.org/4f24pmp6h/Screenshot_2015_04_01_20_34_56.png

我创build了一个创build聊天列表的库,这可能会有所帮助

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