web-dev-qa-db-fra.com

créer une mise en page chatView dans android

Je crée une application de chat et je réfléchis aux moyens de créer la vue de chat réelle.

J'ai déjà la disposition de la fenêtre de discussion elle-même, mais je réfléchissais à la façon de mettre en œuvre les messages de discussion.

Je pensais créer un TableLayout et chaque ligne sera l'image des utilisateurs et le message de chat (ou bulle ou autre).

Quelqu'un a-t-il une idée sur la façon de concevoir et de créer ces lignes?

c'est ce que j'ai fait jusqu'à présent:

<?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>
the desired chat view
androidandroid-layoutandroid-custom-viewandroid-tablelayout
19
thepoosh

Que diriez-vous du code ci-dessous -

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>

Ceci est ma sortie -

Screenshot

Personnalisez simplement cet exemple avec vos besoins.

26
Praveenkumar

Au lieu de TableLayout, je vous suggère de créer un adaptateur personnalisé pour ListView . Il vous suffit de vérifier la condition pour modifier l'arrière-plan de la disposition/des vues à l'intérieur de la méthode getViews().

Certains fils de discussion peuvent vous être utiles:

  1. Android: style ListView comme les conversations par SMS
  2. bulle d'implémentation de chat Android dans ListView
24
Paresh Mayani

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

}

utilisez-le comme ça, dans votre activité

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

Sur la base de cela http://www.androidhive.info/2014/10/Android-building-group-chat-app-using-sockets-part-1/

capture d'écran http://s10.postimg.org/4f24pmp6h/Screenshot_2015_04_01_20_34_56.png

11
Charaf Eddine Mechalikh

J'ai créé une bibliothèque pour créer une liste de discussion, cela pourrait aider

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

4
djhs16