聊天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>