有没有觉得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...
}
至此,一个简单的聊天界面就完成了,以后有时间,我会做一个漂亮的聊天界面给大家。