聊天LIstView

前言：

通常我们使用的ListView的每一项都具有相似的布局，所以展现出来的时候，除了数据不同，只要你不隐藏布局，其他的布局应该都是类似的。而我们熟知的qq，微信等聊天app，聊天界面至少展示了2种布局，就是我们收到的消息和自己发送的消息，其实这样的效果也是通过ListView来实现的，下面我们就来模仿一个聊天软件的聊天列表界面，其效果图如下所示。

    这样一个ListView与我们平时所使用的ListView最大的不同，就是他拥有两个不同的布局——收到的布局和发送的布局。要实现这样的效果，就需要拿ListView的Adapter"开刀"。在定义BaseAdapter的时候，需要去重写他的getView()方法，这个方法是用来获取布局的，那么我们只需要在获取布局的时候去判断他该获取哪一种布局就可以了。而且，ListView也已经考虑到了这种情况，所以提供了2个方法，代码如下：

 @Override
    public int getItemViewType(int position) {
        ChatItemListViewBean bean = mData.get(position);
        return bean.getType();
    }

    @Override
    public int getViewTypeCount() {
        return 2;
    }

       

       gitItemType()方法用来返回第position个Item是何种类型，而getViewTypeCount()用来返回不同布局的总数。通过这2个方法，在结合getView()，就可以很轻松的设计出布局了。 首先需要实现2个布局——chat_item_itemin和chat_item_itemout，2个布局差不多，主要是一左一右。代码如下所示。由于in和out界面内容只是方向上的差别，所以我显示了一个布局。

<?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="center_vertical"
    android:orientation="horizontal"
    android:padding="10dp">

    <ImageView
        android:id="@+id/icon_in"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher" />

    <TextView
        android:id="@+id/text_in"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/chatitem_in_bg"
        android:gravity="center"
        android:textSize="20sp" />

</LinearLayout>

同时，为了封装下聊天的内容，便于在Adapter中获取数据信息，我们封装了一个Bean类来保存聊天信息，代码如下所示。

package com.example.text2;

import android.graphics.Bitmap;

public class ChatItemListViewBean {

    private int type;
    private String text;
    private Bitmap icon;

    public ChatItemListViewBean() {
    }

    public int getType() {
        return type;
    }

    public void setType(int type) {
        this.type = type;
    }

    public String getText() {
        return text;
    }

    public void setText(String text) {
        this.text = text;
    }

    public Bitmap getIcon() {
        return icon;
    }

    public void setIcon(Bitmap icon) {
        this.icon = icon;
    }
}

非常简单的类，我们只是申明了需要的信息并提供了get和set方法。

接下来，需要完成最重要的BaseAdapter进行布局类型的判断，从而确定使用哪种布局，代码如下：

package com.example.text2;


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 java.util.List;

public class ChatItemListViewAdapter extends BaseAdapter {

    private List<ChatItemListViewBean> mData;
    private LayoutInflater mInflater;

    public ChatItemListViewAdapter(Context context,
                                   List<ChatItemListViewBean> data) {
        this.mData = data;
        mInflater = LayoutInflater.from(context);
    }

    @Override
    public int getCount() {
        return mData.size();
    }

    @Override
    public Object getItem(int position) {
        return mData.get(position);
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public int getItemViewType(int position) {
        ChatItemListViewBean bean = mData.get(position);
        return bean.getType();
    }

    @Override
    public int getViewTypeCount() {
        return 2;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder holder;
        if (convertView == null) {
            if (getItemViewType(position) == 0) {
                holder = new ViewHolder();
                convertView = mInflater.inflate(
                        R.layout.chat_item_itemin, null);
                holder.icon = (ImageView) convertView.findViewById(
                        R.id.icon_in);
                holder.text = (TextView) convertView.findViewById(
                        R.id.text_in);
            } else {
                holder = new ViewHolder();
                convertView = mInflater.inflate(
                        R.layout.chat_item_itemout, null);
                holder.icon = (ImageView) convertView.findViewById(
                        R.id.icon_out);
                holder.text = (TextView) convertView.findViewById(
                        R.id.text_out);
            }
            convertView.setTag(holder);
        } else {
            holder = (ViewHolder) convertView.getTag();
        }
        holder.icon.setImageBitmap(mData.get(position).getIcon());
        holder.text.setText(mData.get(position).getText());
        return convertView;
    }

    public final class ViewHolder {
        public ImageView icon;
        public TextView text;
    }
}

       在上面的代码中，通过getView()中判断getItemViewType(position)的值来决定具体实例化哪一个布局，从而实现在一个LIstView中多个布局的添加。最后写一个测试类

package com.example.text2;

import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.ListView;

public class MainActivity extends Activity {

	private ListView mListView;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		  mListView = (ListView) findViewById(R.id.listView_chat);
	        ChatItemListViewBean bean1 = new ChatItemListViewBean();
	        bean1.setType(0);
	        bean1.setIcon(BitmapFactory.decodeResource(getResources(),
	                R.drawable.in_icon));
	        bean1.setText("Hello how are you?");

	        ChatItemListViewBean bean2 = new ChatItemListViewBean();
	        bean2.setType(1);
	        bean2.setIcon(BitmapFactory.decodeResource(getResources(),
	                R.drawable.ic_launcher));
	        bean2.setText("Fine thank you, and you?");

	        ChatItemListViewBean bean3 = new ChatItemListViewBean();
	        bean3.setType(0);
	        bean3.setIcon(BitmapFactory.decodeResource(getResources(),
	                R.drawable.in_icon));
	        bean3.setText("I am fine too");

	        ChatItemListViewBean bean4 = new ChatItemListViewBean();
	        bean4.setType(1);
	        bean4.setIcon(BitmapFactory.decodeResource(getResources(),
	                R.drawable.ic_launcher));
	        bean4.setText("Bye bye");

	        ChatItemListViewBean bean5 = new ChatItemListViewBean();
	        bean5.setType(0);
	        bean5.setIcon(BitmapFactory.decodeResource(getResources(),
	                R.drawable.in_icon));
	        bean5.setText("See you");

	        List<ChatItemListViewBean> data = new ArrayList<ChatItemListViewBean>();
	        data.add(bean1);
	        data.add(bean2);
	        data.add(bean3);
	        data.add(bean4);
	        data.add(bean5);
	        mListView.setAdapter(new ChatItemListViewAdapter(this, data));
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
		// Handle action bar item clicks here. The action bar will
		// automatically handle clicks on the Home/Up button, so long
		// as you specify a parent activity in AndroidManifest.xml.
		int id = item.getItemId();
		if (id == R.id.action_settings) {
			return true;
		}
		return super.onOptionsItemSelected(item);
	}
}

在测试代码中，简单的添加了一些模拟聊天的内容，并将信息封装到Bean对象中，最后进行测试。