关闭

聊天界面之ListView

477人阅读 评论(0) 收藏 举报
分类:

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



0
0
查看评论

Android之ListView打造聊天界面

在上篇博客我们讲了关于RecyclerView的多布局,我之前说了ListView与RecyclerView多布局还是有区别的,下面我们来看看区别在哪个地方! 首先在adapter里面,由于我们使用adapter都是继承BaseAdapter,每次都要重新实现 getCount()、getItem...
  • SnowWitch
  • SnowWitch
  • 2016-03-03 14:40
  • 4646

使用ListView实现聊天界面

使用listview实现聊天界面如下: 实现聊天界面的的方法可以在定义baseAdapter的时候重写getItemViewType()方法返回第positon个Item是何种类型,重写getVIewTypeCount()方法来返回不同的布局总数,在获取布局的时候,判断一下该获取哪一种布局就可...
  • banbayi
  • banbayi
  • 2016-04-27 21:51
  • 898

类似微信的聊天界面ListView

微信中的ListView有一个特点就是存在许多不同的Item,即并不是平常的ListView,所有的Item布局都是一样的。针对这种情况,Google的Adapter提供了两个方法getItemViewType和getViewTypeCount。通过覆盖这两个方法就可以实现一个ListView中存在...
  • cleanness
  • cleanness
  • 2014-04-29 16:14
  • 1904

安卓入门:加深ListView学习,做一个简单的聊天界面

1,一个简单的聊天窗口也是ListView显示的 首先是Main.xml是要建立一个列ListView,下面是输入框和发送按钮 然后是单独的消息列表项的界面 接着就是要建立一个自定义的适配器,搭建列表项和ListView之间的桥梁 具体的代码如下(注意LineraLayout布局,没说方向的...
  • hll174
  • hll174
  • 2015-05-09 21:17
  • 1288

Android学习笔记之ListView聊天界面

1、界面效果 模拟一个聊天的几面右边为模拟发送消息栏,左边显示为接收消息栏。2、UI界面2.1主页面布局<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&...
  • tjkj10
  • tjkj10
  • 2016-02-06 23:52
  • 638

ListView之聊天界面的实现和ListView的动态改变布局

一,特点:两个布局界面 二,方法: (1)返回第position个Item是什么类型的 @Override public int getItemViewType(int position){ return  type ; } (2)返回布局总数 public  int getVi...
  • qq_28055429
  • qq_28055429
  • 2016-05-24 20:37
  • 3052

ListView 仿微信聊天界面

仿聊天界面效果图 1.首先页面总布局(ListView + LinearLayout(TextView+Button)) <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android&q...
  • u013219502
  • u013219502
  • 2016-03-09 18:19
  • 208

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

ListView、RecyclerView 两种方式实现聊天界面支持文字、表情、图片和语音信息,支持下拉加载更多
  • u014608640
  • u014608640
  • 2016-10-14 09:14
  • 1640

【REACT NATIVE 系列教程之十三】利用LISTVIEW与TEXTINPUT制作聊天/对话框&&获取组件实例常用的两种方式

本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自【黑米GameDev街区】 原文链接: http://www.himigame.com/react-native/2346.html本篇Himi来利用ListView和TextInput这两种组...
  • xiaominghimi
  • xiaominghimi
  • 2016-06-07 21:39
  • 3880

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

我们来通过自定义ListView的Adapter,来创建一个类似的微信聊天界面视图实现效果如下 通过对效果图的分析,我们可以看到,需要一个视图ImageView作为头像,一个TextView作为名字,一个TextView作为对话。下面,我们就创建这样的一个布局,在layout这个文件夹中,创建cha...
  • yd201430320529
  • yd201430320529
  • 2015-10-14 14:12
  • 950
    个人资料
    • 访问:61351次
    • 积分:1305
    • 等级:
    • 排名:千里之外
    • 原创:60篇
    • 转载:1篇
    • 译文:6篇
    • 评论:14条
    打赏
      感谢打赏 支付宝二维码
      支付宝
      感谢打赏 微信二维码
      微信