聊天界面之ListView

有没有觉得QQ和微信的聊天界面做得非常好看？对于初学者，有没有想过它是用什么布局做的呢？

虽然我们没有QQ和微信的源码，但聊天界面，大致上是一样的。但在ListView中，明显会有多个Item的布局，最熟悉的是自己发送的消息和对方接受的消息，聊天的时间我们暂时不考虑，这样，我们模仿一个聊天列表的界面。

聊天列表和我们平时用到的ListView最大的不同就是有多个布局，要实现这样的效果，其实不是很难，聪明的你一定已经想到，要在自定义Adapter里做手脚了。

在定义Adapter的时候，要重写它的方法getView()方法，在获取布局的时候，判断一个该获取哪一种布局，然后加载布局就OK了。

在ListView里提供了两种方法，代码如下：

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

@Override
publicint getViewTypeCount()
{
	return number;
}

第一个方法，用来返回第position的Item是何种类型，直接点儿说，就是用来区别第position的Item是接受方的Item还是发送方的Item

getViewTypeCount用来返回不同布局的总数。结合这几个方法，就可以设计出一个聊天界面了。

首先，需要写两个布局，item_chat_me和item_chat_you，两个布局，根据字面意思可以知道，第一个布局是发送方的布局，第二个布局是接收方的布局。布局只有左右区分，下面只写一个：

<LinearLayout
	android:orientation="horizontal"
	android:gravity="center_vertical"
	android:padding="10dp"
	android:width="match_parent"
	android:height="match_parent">
<ImageView
	id = "@+id/item_chat_iv_head"

<span style="white-space:pre">	</span><!--宽高我就不写了，电脑坏了，用别人的电脑写的，敲代码略累，sorry-->
	/>
<TextView
	id = "@+id/item_chat_tv_text"
	background
	gracity="center"

<pre name="code" class="java"><!--宽高我就不写了，电脑坏了，用别人的电脑写的，敲代码略累，sorry-->

/></LinearLayout>

同时，要有一个Bean，封装我们的信息：

public class ChatContent
{
	private int type;
	private String text;
	private Bitmap head;
	
	publiuc ChatContent()
	{
	}
}

然后get、set方法，接下来解释一下，我们要在getView方法中进行布局类型的判断，根据返回的值确定加载那一套Item，然后显示至ListView中：

public class ChatItemLayout entends Activity
{
	private ListView mLv;

	//对不起，由于只能用记事本写代码，基本的那些我就省略理了
	ChatContent cc1 = new ChatContent();
	cc1.setType(0);
	cc1.setText("这是他发送的哟");
	cc1.setBitmap(BitmapFacoty.decpdeResource(getRespurces(),R.drawable.xxx));
	//模拟两条假数据
	ChatContent cc2 = new ChatContent();
	cc1.setType(1);
	cc1.setText("这是我发送的哟");
	cc1.setBitmap(BitmapFacoty.decpdeResource(getRespurces(),R.drawable.xxx));

	List<ChatContent> list = new ArrayList<ChatContent>();
	list.add(cc1);
	list.add(cc2);
	
	mLv.setAdapter...
}

至此，一个简单的聊天界面就完成了，以后有时间，我会做一个漂亮的聊天界面给大家。