仿微信、QQ聊天界面私信对话效果

我们大家可能都看到过在自己使用社交Android软件的时候,会发现聊天页面的效果;有人说是气泡效果,也很像,是吧?那我们该怎么去实现那种效果呢??

点击这里进入她的姊妹篇

点击这里下载源码

这个就是效果:有人物头像、聊天的当时时间、聊天内容、发送信息等;其实呢,她的思路很简单,我也弄了几个小时!恩,那我们就简单详细的聊聊吧!先看源代码:项目入口MainActivity.java:

public class MainActivity extends Activity {

	private LinkedList<PeopleStudentBean> sList = null;
	private LinkedList<PeopleTeacherBean> tList = null;
	private LinkedList<Bean> beans = null;

	/** 聊天message 格式 */
	private ListView listView;
	/** 信息编辑框 */
	private EditText edt;
	/** 信息发送按钮 */
	private Button btnEnter;

	private CustomAdapter adapter;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		sList = new LinkedList<PeopleStudentBean>();
		tList = new LinkedList<PeopleTeacherBean>();
		beans = new LinkedList<Bean>();
		String[] msg = new String[] { "你好!", "你也在金象工作吗?", "我在天安门扫大街呢,这里可舒服了!",
				"原来你也细化这个工作啊,我这里还招人呢,你来不?来的话,我一句话的事儿!", "呵呵,你好!", "是的,你在哪里呢?",
				"吼吼,这么便宜的事儿?!,我怎么没有遇到呢。", "恩,好啊 好啊。那等着我。。。" };

		// 0 是教师; 1 是学生
		for (int i = 0; i < 4; i++) {
			sList.add(new PeopleStudentBean(msg[i], R.drawable.you,"", 1));
			tList.add(new PeopleTeacherBean(msg[i + 4], R.drawable.me,"", 0));
		}

		// 归放到 同一个 类集合Bean中
		for (int j = 0; j < sList.size(); j++) {

			beans.add(sList.get(j));
			beans.add(tList.get(j));
		}

		setContentView(R.layout.activity_main);
		initViewsMethod();
		onHandleMethod();
	}

	/** 处理listView 的 item方法  */
	private void initViewsMethod(){
		listView = (ListView) findViewById(R.id.lvMessages);
		edt = (EditText) findViewById(R.id.edt);
		btnEnter = (Button) findViewById(R.id.enter);

		listView.setOnCreateContextMenuListener(new OnCreateContextMenuListener() {

			@Override
			public void onCreateContextMenu(ContextMenu menu, View v,
					ContextMenuInfo menuInfo) {
				// TODO Auto-generated method stub

				menu.setHeaderTitle("提示:");
				menu.setHeaderIcon(android.R.drawable.stat_notify_error);
				menu.add(0, 0, 1, "删除");
				menu.add(1, 1, 0, "取消");

			}
		});

	}

	/** 处理发送信息的方法  */
	public void onHandleMethod(){
		adapter = new CustomAdapter(this, beans);
		listView.setAdapter(adapter);
		btnEnter.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				String txt = edt.getText().toString();
				if(null == txt)
					Toast.makeText(getApplicationContext(), "发送内容不能为空 !", Toast.LENGTH_SHORT).show();
				adapter.addItemNotifiChange(new Bean(txt, R.drawable.me, new Date()+"", 0));
				edt.setText("");
		        listView.setSelection(beans.size()-1);
			}
		});
	}

	@Override
	public boolean onContextItemSelected(MenuItem item) {
		// TODO Auto-generated method stub
		switch (item.getItemId()) {
		case 0:
			Toast.makeText(getApplicationContext(), "删除成功", Toast.LENGTH_SHORT).show();
			AdapterContextMenuInfo info = (AdapterContextMenuInfo) item.getMenuInfo();
			Bean bean = (Bean) adapter.getItem(info.position);
			beans.remove(bean);
			adapter.notifyDataSetChanged();
			break;
		}
		return super.onContextItemSelected(item);

	}

填充效果内容对应的自定义适配器CustomAdapter.java:

public class CustomAdapter extends BaseAdapter {

	private LinkedList<Bean> beans = null;
	private LayoutInflater li;
	private final int ITEM_TYPES = 2, TYPE_0 = 0, TYPE_1 = 1;

	public CustomAdapter(Context context, LinkedList<Bean> beans) {
		// TODO Auto-generated constructor stub
		this.beans = beans;
		li = LayoutInflater.from(context);

	}

	@Override
	public int getCount() {
		// TODO Auto-generated method stub
		return beans.size();
	}

	@Override
	public Object getItem(int position) {
		// TODO Auto-generated method stub
		return beans.get(position);
	}

	@Override
	public long getItemId(int position) {
		// TODO Auto-generated method stub
		return position;
	}

	@Override
	public int getViewTypeCount() {
		// TODO Auto-generated method stub
		return ITEM_TYPES;
	}

	@Override
	public int getItemViewType(int position) {
		// TODO Auto-generated method stub
		int tp = beans.get(position).getId();
		if (TYPE_0 == tp)
			return TYPE_0;
		else if (TYPE_1 == tp)
			return TYPE_1;
		return TYPE_0;
	}

	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		// TODO Auto-generated method stub

		PeopleView s = null;
		Bean bean = beans.get(position);
		int type = getItemViewType(position);

		if (null == convertView) {
			s = new PeopleView();

			switch (type) {
			case TYPE_0:
				convertView = li.inflate(R.layout.listview_item_teacher, null);
				break;
			case TYPE_1:
				convertView = li.inflate(R.layout.listview_item_student, null);
				break;
			}

			s.time = (TextView) convertView.findViewById(R.id.Time);
			s.message = (TextView) convertView.findViewById(R.id.Msg);
			s.portrait = (ImageView) convertView.findViewById(R.id.Img);
			convertView.setTag(s);
		} else
			s = (PeopleView) convertView.getTag();
		s.time.setText(DateFomats.getCurrentTime(new Date().getTime()));
		s.message.setText(bean.gettMessage());
		s.portrait.setImageResource(R.drawable.you);

		return convertView;

	}

	class PeopleView {
		TextView time;
		TextView message;
		ImageView portrait;
	}

	/** 添加发表私信内容,更新列表 */
	public void addItemNotifiChange(Bean bean) {
		beans.add(bean);
		notifyDataSetChanged();

	}

}

我想大家从代码中也已经看出端倪了;她的实现思路是使用ListView,在ListView中对其item布局展示做出变动。也就是说,这个Listview中item要用到两种布局,然后通过用户的   Id 进行判断 ,不同 id 对应不同的聊天布局。然后按照时间的顺序展示在界面上(当然这个是后台提供的,你不需要进行什么作为,这里只是自己添加排布的);为了实现的高效率,在创建item布局时候控件的两类布局的id使用同一套。这是关键的一点,这样的话在进行Layout布局初始化的时候可以使ListView得到优化。还要注意,要在适配器中重写方法:

getViewTypeCount()

和重写方法:

 getItemViewType(int position)

上面第一个方法表返回值多少,对应的该ListView就会有有多少种的item布局类型,即在加载适配的时候每加载一次对话信息会走getView(int
position ,View convertView ,ViewGroup parent);方法多少遍。如果按照原来的普通ListView适配器填充的话,现在的这个有两种item布局展示,为展示其对话效果在每走两次getView()方法 就相当于普通的ListView适配方法走一次,这样才能展示出我们想要的不同布局item的展示效果。第二个方法通过参数position对用户的id进行处理判断,并返回我们自定义布局类型或者说用户 id 所对应的类型数值值(这个是我们自己设置的),然后在getView()方法中通过方法获取不同布局类型对应的我们所设置的数值来进行判断此时我们应该展示那种itme布局,并来初始化该布局;

另外,ListView对应的item;如果想长按删除要实现其监听

listView.setOnCreateContextMenuListener(new OnCreateContextMenuListener() 

和监听必须实现的方法;以及重写回调的方法,对被点击的item做出处理

  @Override
public boolean onContextItemSelected(MenuItem item)

顺便提一下:

menu.add(0, 0, 1, "删除");
       第一个int类型的group ID参数,代表的是组概念,你可以将几个菜单项归为一组,以便更好的以组的方式管理你的菜单按钮。
       第二个int类型的item ID参数,代表的是项目编号。这个参数非常重要,一个item ID对应一个menu中的选项。在后面使用菜单的时候,就靠这个item ID来判断你使用的是哪个选项。
       第三个int类型的order ID参数,代表的是菜单项的显示顺序。默认是0,表示菜单的显示顺序就是按照add的显示顺序来显示。
       第四个String类型的title参数,表示选项中显示的文字。
时间: 2024-10-27 22:02:26

仿微信、QQ聊天界面私信对话效果的相关文章

Android 仿微信QQ聊天界面

一些IM聊天软件的展现形式是左右分开的形式.比如说,别人给你发的信息全部靠左显示,你自己发给别人的信息全部靠右显示. 而我们的ListView很多时候是显示同一个布局,其实BaseAdapter中有2个重要的方法在大多数情况下我们并未使用到,一个是public int getViewTypeCount(),显示ListView中有多少种布局(默认是显示是1),像微信那样聊天界面,是有2种布局方式:另外一个getItemViewType(),可以让不同item条目加载不同的布局,下面就简单的模拟下

Android仿微信语音聊天界面

有段时间没有看视频了,昨天晚上抽了点空时间,又看了下鸿洋大神的视频教程,又抽时间写了个学习记录.代码和老师讲的基本一样,网上也有很多相同的博客.我只是在AndroidStudio环境下写的. --主界面代码-- public class MainActivity extends Activity { private ListView mListView; private ArrayAdapter<Recorder> mAdapter; private List<Recorder>

转-Android仿微信气泡聊天界面设计

微信的气泡聊天是仿iPhone自带短信而设计出来的,不过感觉还不错可以尝试一下仿着微信的气泡聊天做一个Demo,给大家分享一下!效果图如下: 气泡聊天最终要的是素材,要用到9.png文件的素材,这样气泡会随着聊天内容的多少而改变气泡的大小且不失真.为了方便,我就直接在微信里面提取出来啦. 聊天的内容是用ListView来显示的,将聊天的内容封装成一个ChatMsgEntity类的对象里面,然后交给自定义的ListView适配器将聊天内容显示出来. ChatMsgEntity.java比较简单,只

C#+ html 实现类似QQ聊天界面的气泡效果

1 /**定义两个人的头像*/ 2 Myhead = "<img src=qrc:/chatdemo/Msg/Head.png width='30px'heigth='30px'>"; 3 QString strHead = QString("C:/Users/tax10_000/Desktop/ql_184555_828078.jpg"); 4 otherhead = QString ("<img src=%1 width='30px'

Android仿微信SlideView聊天列表滑动删除效果

package com.ryg.slideview; import com.ryg.slideview.MainActivity.MessageItem; //Download by http://www.okbase.net import android.content.Context; import android.util.AttributeSet; import android.util.Log; import android.view.MotionEvent; import andro

【3】QQ 聊天界面

1.说明 稍微修改了下QQ示例里面的聊天界面界面,然后把代码扣过来完成了QQ聊天界面部分,效果还可以. 2.代码部分 // QQTalk.h文件 #ifndef __QQ_TALK_H__ #define __QQ_TALK_H__ #include <DuiLib/DuiLibEnv.h> #include <DuiLib/UIlib.h> using namespace DuiLib; #define QQ_TALK_XML _T("chatbox.xml"

QQ聊天界面的输入法顶起界面底部输入框效果的实现

转载请注明:http://www.cnblogs.com/frank-zouxu/p/4127115.html 今天在公司做项目的时候遇到一个需求:需要做一个界面,效果类似QQ聊天界面,如图1,当我们点击内容输入框准备输入内容的时候,底部的表情框的那一栏会被输入法的软键盘给顶起来,默认状态下,输入法会覆盖掉我们的表情输入框.起初,百思不得解的我费尽了心思,未果,偶然看到此篇博客http://blog.csdn.net/twoicewoo/article/details/7384398.其实,欲达

【iOS基础控件 - 11】【Demo】模仿qq ,微信 UI 聊天界面

A.需求 做出一个类似于QQ.微信的聊天界面 1.每个cell包含发送时间.发送人(头像).发送信息 2.使用对方头像放在左边,我方头像在右边 3.对方信息使用白色背景对话框,我方信息使用蓝色背景对话框 4.隐藏相同的发送时间 5.底部功能按钮:语音按钮.消息输入框.表情按钮.附加按钮 6.响应键盘事件,呼出键盘.隐藏键盘时对上述的视图作出上移操作 7.键盘的发送事件处理 Code Source: B.实现点 1.底层视图搭建 上部分聊天信息框:UITableView 下部分功能区:UIButt

亲身体验用Java写的仿qq聊天界面

Java开发工具有许多种,新手用记事本写Java程序,有些人用NetBean,jbuilder,高手用eclipse,下面介绍用eclipse开发qq聊天界面. 代码如下: package Myjava_QQ; import java.awt.*; import javax.swing.*; import Myjava_QQ.truess; import java.awt.event.*; import java.applet.*; import java.io.BufferedReader;