web-dev-qa-db-ja.com

androidにchatViewレイアウトを作成します

チャットアプリケーションを作成していますが、実際のチャットビューを作成する方法を考えています。

チャットウィンドウ自体のレイアウトは既にありますが、チャットメッセージの実装方法について考えていました。

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

以下のコードはどうですか-

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>

これは私の出力です-

Screenshot

ニーズに合わせてこの例をカスタマイズしてください。

26
Praveenkumar

TableLayoutの代わりに、 ListView用のカスタムアダプターを作成する をお勧めします。 getViews()メソッド内のレイアウト/ビューの背景を変更するには、条件を確認するだけです。

いくつかのスレッドはあなたに役立つかもしれません：

  1. Android：テキストメッセージの会話のようなリストビュースタイル
  2. Androidの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;
}

}

あなたの活動でこのように使ってください

    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

11
Charaf Eddine Mechalikh

チャットリストを作成するためのライブラリを作成しました。これが役立つ場合があります

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

4
djhs16