android - AndroidでchatViewレイアウトを作成する

Question

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

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

私は、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>

そして私はこの外観を達成しようとしています目的のチャットビュー

score 27 · Accepted Answer

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

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>

これは私の出力です -

スクリーンショット

この例を必要に応じてカスタマイズしてください。

score 24 · Accepted Answer

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

いくつかのスレッドが役立つ場合があります。

score 14 · Accepted Answer

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>

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

triple_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/に基づく

スクリーンショット

score 5 · Accepted Answer

チャットリストを作成するためのライブラリを作成しました。

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

android - AndroidでchatViewレイアウトを作成する

4 に答える 4

Related

Reference