聊天ListView，

聊天ListView，

我們知道，在或者QQ聊天的時候，會出現至少兩種布局，即收到的訊息和自己發送的訊息，這種效果可以用listView來實現。類似於下面這樣的介面。

主要在Adapter的getView()裡面下筆。

package com.example.chatting.chatting.adapter;import android.content.Context;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.BaseAdapter;import android.widget.ImageView;import android.widget.TextView;import com.example.chatting.chatting.R;import com.example.chatting.chatting.bean.Chat;import org.w3c.dom.Text;import java.util.List;/** * Created by Administrator on 2017/11/9. */public class ChattingAdapter extends BaseAdapter{    private List<Chat> list;    private LayoutInflater inflater;    private Context mContext;//    private Drawable mDefaultHeadImage;    public ChattingAdapter(List<Chat> list, Context context){        this.list = list;        inflater = LayoutInflater.from(context);        mContext = context;//        mDefaultHeadImage = mContext.getResources().getDrawable(R.drawable.image_head);    }    @Override    public int getCount() {        return list.size();    }    @Override    public Object getItem(int position) {        return list.get(position);    }    @Override    public long getItemId(int position) {        return position;    }    @Override    public int getItemViewType(int position) {        return list.get(position).getType();    }

    //一定得重寫該方法，否則只會出現一種布局    @Override    public int getViewTypeCount() {        // TODO Auto-generated method stub        return 2;    }    @Override    public View getView(int position, View convertView, ViewGroup parent) {        Chat chat = (Chat) getItem(position);        int type = getItemViewType(position);        ViewHolder viewHolder;        if(convertView == null){            if(type == 0) {       // 我說的訊息                System.out.println("****type0");                viewHolder = new ViewHolder();                convertView = inflater.inflate(R.layout.list_chat_out, null);                viewHolder.tvName = (TextView)convertView.findViewById(R.id.tv_name_out);                viewHolder.tvMsg = (TextView)convertView.findViewById(R.id.tv_msg_out);                viewHolder.headImage = (ImageView)convertView.findViewById(R.id.image_head_out);            }else{                System.out.println("****type1");                viewHolder = new ViewHolder();                convertView = inflater.inflate(R.layout.list_chat_in, null);                viewHolder.tvName = (TextView)convertView.findViewById(R.id.tv_name_in);                viewHolder.tvMsg = (TextView)convertView.findViewById(R.id.tv_msg_in);                viewHolder.headImage = (ImageView)convertView.findViewById(R.id.image_head_in);            }            convertView.setTag(viewHolder);        }else{            viewHolder = (ViewHolder)convertView.getTag();        }        viewHolder.tvName.setText(chat.getNickName());        viewHolder.tvMsg.setText(chat.getMessage());        return convertView;    }    private class ViewHolder{        public TextView tvName, tvMsg;        public ImageView headImage;    }}

  通過

  @Override

    public int getItemViewType(int position) {

        return list.get(position).getType();    }

來決定執行個體化哪個布局，

通過
@Override

    public int getViewTypeCount() {        // TODO Auto-generated method stub        return 2;    }
來決定布局的類型個數。

chat為封裝聊天內容的java類：

package com.example.chatting.chatting.bean;import java.io.Serializable;/** * Created by Administrator on 2017/11/9. */public class Chat implements Serializable{    private String message;    private int type;    private String NickName;    private String imgURL;    public String getMessage() {        return message;    }    public void setMessage(String message) {        this.message = message;    }    public int getType() {        return type;    }    public void setType(int type) {        this.type = type;    }    public String getNickName() {        return NickName;    }    public void setNickName(String nickName) {        NickName = nickName;    }    public String getImgURL() {        return imgURL;    }    public void setImgURL(String imgURL) {        this.imgURL = imgURL;    }}

 

 接下來是兩個布局的代碼：
1、

list_chat_out：發送訊息的布局

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:minHeight="80dp" >              <ImageView          android:id="@+id/image_head_out"          android:layout_width="45dp"          android:layout_height="45dp"          android:src="@mipmap/me_press"          android:layout_alignParentRight="true"/>             <TextView        android:id="@+id/tv_name_out"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_toLeftOf="@id/image_head_out"        android:layout_alignTop="@id/image_head_out"        android:layout_marginRight="5dp"        android:textColor="@color/colorTheme"        android:textSize="14sp"        android:text="name"/>            <LinearLayout         android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:minHeight="40dp"        android:layout_toLeftOf="@id/image_head_out"        android:layout_below="@id/tv_name_out"        android:layout_marginRight="10dp"        android:background="@color/colorTheme"        android:gravity="center_vertical">        <TextView            android:id="@+id/tv_msg_out"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_marginLeft="15dp"            android:layout_marginRight="15dp"            android:textColor="@color/colorBlack"            android:textSize="18sp"            android:text="content"/>       </LinearLayout></RelativeLayout>

2、list_chat_in：接收訊息的布局

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:minHeight="80dp" >              <ImageView        android:id="@+id/image_head_in"        android:layout_width="45dp"        android:layout_height="45dp"          android:src="@mipmap/me_press"          />             <TextView          android:id="@+id/tv_name_in"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_toRightOf="@id/image_head_in"        android:layout_alignTop="@id/image_head_in"        android:layout_marginLeft="5dp"        android:textColor="@color/colorTheme"        android:textSize="14sp"        android:text="name"/>            <LinearLayout         android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:minHeight="40dp"        android:layout_toRightOf="@id/image_head_in"        android:layout_below="@id/tv_name_in"        android:layout_marginLeft="10dp"        android:background="@color/colorGray"        android:gravity="center_vertical">        <TextView            android:id="@+id/tv_msg_in"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_marginRight="15dp"            android:layout_marginLeft="15dp"            android:textColor="@color/colorBlack"            android:textSize="18sp"            android:text="content"/>       </LinearLayout></RelativeLayout>