ListView使用技巧（四）：聊天ListView

我们熟知的QQ、微信聊天界面：

我们这么来分析：

整个聊天记录是一个listview，分为两种布局：发送的消息和收到的消息。

这里就是与平时使用的ListView有一个最大的不同：拥有两个不同的布局，在Adapter上下功夫！

BaseAdapter中提供了两个方法：

	@Override
	public int getItemViewType(int position)
	{
		return type;
	}
	@Override
	public int getViewTypeCount(){
		return number;
	}

getItemViewType()方法用来返回第position个item是何种类型。

getViewTypeCount()方法用来返回不同布局的总数。

通过上述两个方法，结合getView()方法，可以完成上述聊天布局了。

首先是：发送消息的布局：

<?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:orientation="horizontal" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="right" >

        <TextView
            android:id="@+id/tv_out"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:text="TextView" />

        <ImageView
            android:id="@+id/iv_out"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/message" />
    </LinearLayout>

</LinearLayout>

接收消息的布局：

<?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:orientation="horizontal" >

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

    <TextView
        android:id="@+id/tv_in"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="TextView" />

</LinearLayout>

封装一个Bean来保存聊天信息：

public class 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;
	}

	private int type;
	private String text;
	private Bitmap icon;
	
	public ChatItemListViewBean(){
		
	}
	
	
}

接下来就是最终的BaseAdapter的方法了：同样采用ViewHolder模式提高效率：

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() {
		// TODO Auto-generated method stub
		return mData.size();
	}

	@Override
	public Object getItem(int position) {
		// TODO Auto-generated method stub
		return mData.get(position);
	}

	@Override
	public long getItemId(int position) {
		// TODO Auto-generated method stub
		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) {
		// TODO Auto-generated method stub
		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.iv_in);
				holder.text = (TextView) convertView.findViewById(R.id.tv_in);
				
			}else {
				holder = new ViewHolder();
				convertView = mInflater.inflate(R.layout.chat_item_itemout, null);
				holder.icon = (ImageView) convertView.findViewById(R.id.iv_out);
				holder.text = (TextView) convertView.findViewById(R.id.tv_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;
	}
}

下面的程序是测试代码：

public class ChatItemListViewTest extends Activity {

	private ListView mListView;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		setContentView(R.layout.chat_item_main);
		
		mListView = (ListView) findViewById(R.id.listView_chat);
		ChatItemListViewBean bean1 = new ChatItemListViewBean();
		bean1.setType(0);
		bean1.setIcon(BitmapFactory.decodeResource(getResources(), R.drawable.call));
		bean1.setText("Hello how are you?");
		
		ChatItemListViewBean bean2 = new ChatItemListViewBean();
		bean2.setType(1);
		bean2.setIcon(BitmapFactory.decodeResource(getResources(), R.drawable.message));
		bean2.setText("Fine thank you, and you?");
		
		ChatItemListViewBean bean3 = new ChatItemListViewBean();
		bean3.setType(0);
		bean3.setIcon(BitmapFactory.decodeResource(getResources(), R.drawable.call));
		bean3.setText("I am fine too");
		
		ChatItemListViewBean bean4 = new ChatItemListViewBean();
		bean4.setType(1);
		bean4.setIcon(BitmapFactory.decodeResource(getResources(), R.drawable.message));
		bean4.setText("Bye bye");
		
		ChatItemListViewBean bean5 = new ChatItemListViewBean();
		bean5.setType(0);
		bean5.setIcon(BitmapFactory.decodeResource(getResources(), R.drawable.call));
		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));
	}

}

运行结果为：