tạo bố cục chatView trong android

Question

Tôi đang tạo ứng dụng trò chuyện và tôi đang suy nghĩ về cách tạo chế độ xem trò chuyện thực.

Tôi đã có bố cục cho cửa sổ trò chuyện nhưng tôi đã suy nghĩ về cách triển khai các tin nhắn trò chuyện.

Tôi đã nghĩ đến việc tạo một TableLayout và mỗi hàng sẽ là hình ảnh người dùng và tin nhắn trò chuyện (hoặc bong bóng hoặc những gì không).

Có ai có ý tưởng về cách thiết kế và tạo các hàng này không?

đây là những gì tôi đã làm cho đến nay:

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

---

và tôi đang cố gắng để đạt được một này trông

Answer 1

Làm thế nào về dưới mã -

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> 

Đây là đầu ra của tôi -

Just Customize this example with your needs.

Answer 2

Thay vì TableLayout, tôi sẽ đề nghị bạn create Custom adapter for ListView. Bạn chỉ cần kiểm tra điều kiện để thay đổi nền của bố cục/chế độ xem trong phương thức getViews().

Một số chủ đề có thể hữu ích cho bạn:

1. Android: ListView style like text messages conversations
2. Android Implementing Chat Bubble in ListView

Answer 3

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

} 

sử dụng nó như thế này, trong hoạt động của bạn

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

Dựa trên http://www.androidhive.info/2014/10/android-building-group-chat-app-using-sockets-part-1/

chụp màn hình này http://s10.postimg.org/4f24pmp6h/Screenshot_2015_04_01_20_34_56.png

Answer 4

Tôi đã tạo ra một thư viện để tạo danh sách trò chuyện, điều này có thể giúp

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