聊天界面之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打造聊天界面

在上篇博客我们讲了关于RecyclerView的多布局,我之前说了ListView与RecyclerView多布局还是有区别的,下面我们来看看区别在哪个地方! 首先在adapter里面,由于我们使用...

ListView 仿微信聊天界面

仿聊天界面效果图 1.首先页面总布局(ListView + LinearLayout(TextView+Button)) <LinearLayout xmlns:android="ht...

精选:深入理解 Docker 内部原理及网络配置

网络绝对是任何系统的核心,对于容器而言也是如此。Docker 作为目前最火的轻量级容器技术,有很多令人称道的功能,如 Docker 的镜像管理。然而,Docker的网络一直以来都比较薄弱,所以我们有必要深入了解Docker的网络知识,以满足更高的网络需求。

类似于聊天界面的ListView的设置

类似于熟知的聊天界面,至少会展示两种布局:对方发送的消息和本地发送的消息。这样的效果是通过ListView实现的,在ListView的适配器里面给予两种不同的布局 直接上代码吧,写的比较简单...

聊天界面

package com.example.mychat.chat; import java.io.BufferedReader; import java.io.BufferedWriter;...

聊天界面

1 package com.texample.chatui; import java.util.ArrayList; import java.util.List; import com.texa...

listview的一个聊天界面

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

聊天界面 使用listview和recyclerview

使用recyclerview实现聊天界面

android模拟聊天界面Listview实现

package com.example.test;import android.os.Bundle; import android.support.v7.app.AppCompatActivity; ...

使用ListView实现聊天界面

使用listview实现聊天界面如下: 实现聊天界面的的方法可以在定义baseAdapter的时候重写getItemViewType()方法返回第positon个Item是何种类型,重写getV...

聊天界面Demo

原文地址:http://www.cnblogs.com/hellovoidworld/p/4152043.html A.需求 做出一个类似于QQ、微信的聊天界面 1.每个cell...
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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