聊天界面之ListView

原创 2016年08月28日 20:48:59

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



版权声明:转载请注明出处。

相关文章推荐

Android学习 (二十四) 实现ListView跳转到对应页面的ViewPager

这几天因为项目需求,要实现,点击listView列表跳转到相对应的ViewPager界面。 如图:我整个测试项目的逻辑结构是这样的:项目实现后是这样的:那就分为两个部分来讲。第一部分为ListVie...
  • myGFZ
  • myGFZ
  • 2016年12月08日 09:35
  • 817

listview的一个聊天界面

聊天界面ui:首先整理一下思路,在我们平时所练习的聊天中比如QQ聊天 气泡的形式, 有接收跟发送 ,就收对方的消息一般显示在左边 自己所发送的消息一般显示在右边 所以这个用一个Listview的控件...

listview练习 简易聊天界面

  • 2015年03月20日 21:48
  • 3.06MB
  • 下载

listview聊天界面

  • 2016年03月03日 15:38
  • 2.33MB
  • 下载

聊天界面 使用listview和recyclerview

使用recyclerview实现聊天界面

ListView 仿微信聊天界面

仿聊天界面效果图 1.首先页面总布局(ListView + LinearLayout(TextView+Button)) ...

自定义一个ListView实现聊天界面

摘要   由于手机屏幕空间都比较有限,能够一次性在屏幕上显示的内容并不多,当我们的程序中有大量的数据需要展示的时候,就可以借助ListView 来实现。ListView 允许用户通过手指上下...

Android实例精讲——通过ListView构造微信聊天界面视图

我们来通过自定义ListView的Adapter,来创建一个类似的微信聊天界面视图实现效果如下 通过对效果图的分析,我们可以看到,需要一个视图ImageView作为头像,一个TextView作为名字,...

聊天界面的制作(二)——发送消息后ListView左右布局显示

基本功能1. 自定义标题栏。(标题栏不做任何功能)2. 有左右发送按钮。(这个只能自己和自己聊天哦,所以有左右发送按钮)   (1)点击左边按钮发送按钮,在ListView的左侧显示。   (2)...

ListView、RecyclerView 两种方式实现聊天界面支持文字、表情、图片和语音信息,支持下拉加载更多

ListView、RecyclerView 两种方式实现聊天界面支持文字、表情、图片和语音信息,支持下拉加载更多...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:聊天界面之ListView
举报原因:
原因补充:

(最多只允许输入30个字)