android 仿微信聊天界面

一些IM聊天软件我们发现,他的展现形式,是左右分开的形式,而我们的listview很多时候是显示同一个布局,其实BaseAdapter中有2个重要的方法在大多数情况下我们并未使用到,一个是public int getViewTypeCount(),它是显示listview中有多少种布局,默认是显示是1,像微信那样聊天界面,是有2种布局方式,;另外一个getItemViewType(),它是在那些item条目中显示那种布局,下面就简单的模拟下微信的聊天界面做法:

MainActivity.java

package com.example.weixin;

import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ListView;
import android.widget.TextView;

public class MainActivity extends Activity {
	private ListView listview;
	private List<Person> persons;
	private int TYPE_COUNT = 2;
	private int LEFT = 0;
	private int RIGHT = 1;
	private LayoutInflater inflater;
	private MyAdapter adapter;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		listview = (ListView) findViewById(R.id.listview);
		inflater = LayoutInflater.from(this);
		initData();
		adapter = new MyAdapter();
		listview.setAdapter(adapter);
	}
	private void initData() {
		persons = new ArrayList<Person>();
		for(int i=0;i<40;i++){
			Person p = new Person();
			p.setAge(i);
			p.setName("张三");
			if(i%2==0){
				p.setType(0);
			}else{
				p.setType(1);
			}
			persons.add(p);
		}
	}

	class MyAdapter extends BaseAdapter{

		@Override
		public int getCount() {
			return persons.size();
		}

		@Override
		public Object getItem(int position) {
			return persons.get(position);
		}

		@Override
		public long getItemId(int position) {
			return position;
		}
		@Override
		public int getItemViewType(int position) {
			if(persons.get(position).getType()==0){
				return LEFT;
			}
			return RIGHT;
		}
		@Override
		public int getViewTypeCount() {
			return TYPE_COUNT;
		}
		@Override
		public View getView(int position, View convertView, ViewGroup parent) {
			ViewHolder holder;
			Person p = persons.get(position);
			if(getItemViewType(position)==LEFT){
				if(convertView==null){
					holder = new ViewHolder();
					convertView =inflater.inflate(R.layout.item_left, null);
					holder.tv_username = (TextView) convertView.findViewById(R.id.tv_username);
					holder.tv_age = (TextView) convertView.findViewById(R.id.tv_age);
					convertView.setTag(holder);
				}else{
					holder = (ViewHolder) convertView.getTag();
				}

				holder.tv_username.setText(p.getName());
				holder.tv_age.setText(String.valueOf(p.getAge()));
			}else{
				if(convertView==null){
					holder = new ViewHolder();
					convertView =inflater.inflate(R.layout.item_right, null);
					holder.tv_username = (TextView) convertView.findViewById(R.id.tv_username);
					holder.tv_age = (TextView) convertView.findViewById(R.id.tv_age);
					convertView.setTag(holder);
				}else{
					holder = (ViewHolder) convertView.getTag();
				}
				holder.tv_username.setText(p.getName());
				holder.tv_age.setText(String.valueOf(p.getAge()));
			}

			return convertView;
		}
		class ViewHolder{
			TextView tv_username;
			TextView tv_age;
		}
	}
}

Person.java

package com.example.weixin;

public class Person {
    private String name;
    private int age;
    private int type;
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public int getAge() {
		return age;
	}
	public void setAge(int age) {
		this.age = age;
	}
	public int getType() {
		return type;
	}
	public void setType(int type) {
		this.type = type;
	}
}

item_left.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#ffffff"
    >
    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="45dp"
        >
    <TextView
        android:id="@+id/tv_username"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="16sp"
        android:textColor="#123456"
        android:layout_centerVertical="true"
        android:layout_alignParentLeft="true"
        />
	<TextView
        android:id="@+id/tv_age"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="16sp"
        android:textColor="#123456"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@id/tv_username"
        android:layout_marginLeft="20dp"
        />
	</RelativeLayout>
</RelativeLayout>

item_right.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#ffffff"
    >
    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="45dp"
        >
    <TextView
        android:id="@+id/tv_username"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="16sp"
        android:textColor="#123456"
        android:layout_centerVertical="true"
        android:layout_alignParentRight="true"
        />
	<TextView
        android:id="@+id/tv_age"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="16sp"
        android:textColor="#123456"
        android:layout_centerVertical="true"
        android:layout_toLeftOf="@id/tv_username"
        android:layout_marginRight="20dp"
        />
	</RelativeLayout>
</RelativeLayout>

界面效果:

时间: 2024-08-05 19:36:04

android 仿微信聊天界面的相关文章

android 仿微信聊天界面,以及语音录制功能

extends:http://104zz.iteye.com/blog/1709840 本例为模仿微信聊天界面UI设计,文字发送以及语言录制UI. 1先看效果图:     第一:chat.xml设计 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" an

小程序版聊天室|聊天小程序|仿微信聊天界面小程序

仿微信聊天小程序weChatRoom案例,一款基于微信小程序开发的聊天室实战项目.很早之前就有开发过一个h5版聊天室,最近又在原先思路的基础上开发了个小程序版聊天室,功能效果非常接近微信聊天,实现了消息.表情发送,小程序表情解析,图片.视频上传预览,打赏.红包等微交互场景.整体界面风格及效果挺不错哒. ◆ 先睹为快 ◆ 项目中用到的弹窗插件,是自己开发的小程序弹窗组件wcPop: <!-- <>引入弹窗模板.Start --><import src="/utils/

iOS_29仿微信聊天界面

最终效果图: 自定义cell的封装 BeyondCell // // BeyondCell.h // 29_仿微信聊天 // // Created by beyond on 14-9-4. // Copyright (c) 2014年 com.beyond. All rights reserved. // #import <UIKit/UIKit.h> @class BeyondCellFrame; @interface BeyondCell : UITableViewCell // 一行自定

HTML5仿微信聊天界面、微信朋友圈实例

这几天使用H5开发了一个仿微信聊天前端界面,尤其微信底部编辑器那块处理的很好,使用HTML5来开发,虽说功能效果并没有微信那么全,但是也相当不错了,可以发送消息.表情,发送的消息自动回滚定位到底部,另外可以对消息.图片.视频有不同的右键处理提示,还有打赏.占屏等操作. html代码片段: <!--BEGIN 打赏--> <div class="js_dialog" id="J_Dialog_dashang" style="display:

仿微信聊天界面小项目总结

从开始学习ios时,做这个小项目就卡了很久,到现在这个小项目算是我做的比较熟练的一个了.oc和swift两个版本都顺利完成了.因此总结一下曾经在这个小项目中遇到的种种问题! 微信聊天界面主要内容有三部分构成: 1.TableView部分,设置好各种必须的代理: 2.TableViewCell部分,在自定义cell中要设置好三个控件的位置,这也是整个过程中最麻烦的部分: 3.设置TextField部分发送消息时,界面消息的刷新和TextField代理的设置. 第一部分: 主要设置TableView

web版仿微信聊天界面|h5仿微信电脑端案例开发

前几天开发了一款手机端h5仿微信聊天,人唯有不停学习才能进步,这段时间倒腾着整理了下之前项目,又重新在原先的那版基础上开发了一款仿微信聊天电脑端web版本,聊天页面又重新优化了多图预览.视频播放,右键菜单menu,聊天底部编辑器模块重新优化源码,弹窗则是继续使用之前自己开发的wcPop.js,具体看项目效果图吧! 效果图: // ...表情.选择区切换 $(".wc__editor-panel").on("click", ".btn", func

仿微信聊天界面

单纯的聊天界面,只发文本:点此下载 可以语音,图片,表情,文本:点此下载

UI设计之--仿微信聊天界面

1.首先编写main.xml文件: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent

本例为模仿微信聊天界面UI设计,文字发送以及语言录制UI(转载)

首页 资讯 精华 论坛 问答 博客 专栏 群组 更多 ▼ 您还未登录 ! 登录 注册 机遇&速度 博客 微博 相册 收藏 留言 关于我 android 仿微信聊天界面,以及语音录制功能 博客分类: android 录音 android 录音android 仿微信聊天界面android 仿微信录音UIandroidandroid 语音 本例为模仿微信聊天界面UI设计,文字发送以及语言录制UI. 1先看效果图:     第一:chat.xml设计 Xml代码   <?xml version=&q