聊天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：发送消息的布局

<? 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='/images/loading.gif' data-original="@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：接收消息的布局

<? 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='/images/loading.gif' data-original="@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>

原标题：聊天ListView

关键词：ie