类似微信的ChattingUi

先看主页面布局

activity_imitate_weixin_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#f0f0e0" >

    <RelativeLayout
        android:id="@+id/rl_bottom"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="@drawable/weixin_layout_bg1" >

        <Button
            android:id="@+id/btn_send"
            android:layout_width="60dp"
            android:layout_height="40dp"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginRight="10dp"
            android:text="发送" />

        <EditText
            android:id="@+id/et_sendmessage"
            android:layout_width="fill_parent"
            android:layout_height="40dp"
            android:layout_centerVertical="true"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_toLeftOf="@id/btn_send"
            android:background="@drawable/weixin_edittext1"
            android:singleLine="true"
            android:textSize="18sp" />
    </RelativeLayout>

    <ListView
        android:id="@+id/listview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_above="@id/rl_bottom"
        android:layout_marginLeft="10.0dip"
        android:layout_marginRight="10.0dip"
        android:layout_marginTop="10.0dip"
        android:cacheColorHint="#00000000"
        android:divider="@null"
        android:dividerHeight="5dp"
        android:scrollbars="none" />

</RelativeLayout>

再看入口WeixinChatDemoActivity

package com.example.weixindemo;

import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ListView;
/**
 * 仿微信主页面
 */
public class WeixinChatDemoActivity extends Activity implements OnClickListener {

	private Button mBtnSend;// 发送btn
	private EditText mEditTextContent;
	private ListView mListView;
	private ChatMsgViewAdapter mAdapter;// 消息视图的Adapter
	private List<ChatMsgEntity> mDataArrays = new ArrayList<ChatMsgEntity>();// 消息对象数组

	private final static int COUNT = 1;// 初始化数组总数

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_imitate_weixin_main);
		initView();
	}

	public void initView() {
		mListView = (ListView) findViewById(R.id.listview);
		mBtnSend = (Button) findViewById(R.id.btn_send);
		mEditTextContent = (EditText) findViewById(R.id.et_sendmessage);
		initData();// 初始化数据

		mBtnSend.setOnClickListener(this);
		mListView.setSelection(mAdapter.getCount() - 1);
	}

	/**
	 * 模拟加载消息历史，实际开发可以从数据库中读出
	 */
	public void initData() {
		for (int i = 0; i < COUNT; i++) {
			ChatMsgEntity entity = new ChatMsgEntity();
			entity.setDate("2012-09-22 18:00:02");
			if (i % 2 == 0) {
				entity.setName("他人");
				entity.setMsgType(true);// 收到的消息
			} else {
				entity.setName("本人");
				entity.setMsgType(false);// 自己发送的消息
			}
			entity.setMessage("今晚去网吧包夜吧？");
			mDataArrays.add(entity);
		}

		mAdapter = new ChatMsgViewAdapter(this, mDataArrays);
		mListView.setAdapter(mAdapter);
	}

	@Override
	public void onClick(View v) {
		switch (v.getId()) {
		case R.id.btn_send:// 发送按钮点击事件
			send();
			break;
		}
	}

	/**
	 * 发送消息
	 */
	private void send() {
		String contString = mEditTextContent.getText().toString();
		if (contString.length() > 0) {
			ChatMsgEntity entity = new ChatMsgEntity();
			entity.setName("本人");
			entity.setDate(getDate());
			entity.setMessage(contString);
			entity.setMsgType(false);

			mDataArrays.add(entity);
			mAdapter.notifyDataSetChanged();// 通知ListView，数据已发生改变

			mEditTextContent.setText("");// 清空编辑框数据

			mListView.setSelection(mListView.getCount() - 1);// 发送一条消息时，ListView显示选择最后一项
		}
	}

	/**
	 * 发送消息时，获取当前事件
	 *
	 * @return 当前时间
	 */
	private String getDate() {
		SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd hh:mm:ss");
		return format.format(new Date());
	}

}

再看适配器

ChatMsgViewAdapter

package com.example.weixindemo;
import java.util.List;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;
/**
 * 消息ListView的Adapter
 */
public class ChatMsgViewAdapter extends BaseAdapter {

	private List<ChatMsgEntity> coll;// 消息对象数组
	private LayoutInflater mInflater;

	public ChatMsgViewAdapter(Context context, List<ChatMsgEntity> coll) {
		this.coll = coll;
		mInflater = LayoutInflater.from(context);
	}

	/*****************************************************/
	//得到Item的类型，是对方发过来的消息，还是自己发送出去的
	public int getItemViewType(int position) {
		return coll.get(position).getMsgType()?1:0;
	}
	//Item类型的总数
	public int getViewTypeCount() {
		return 2;
	}
	/******************************************************/
	public int getCount() {
		return coll.size();
	}

	public Object getItem(int position) {
		return coll.get(position);
	}

	public long getItemId(int position) {
		return position;
	}

	public View getView(int position, View convertView, ViewGroup parent) {

		ChatMsgEntity entity = coll.get(position);
		boolean isComMsg = entity.getMsgType();

		ViewHolder viewHolder = null;
		if (convertView == null) {
			if (isComMsg) {
				convertView = mInflater.inflate(
						R.layout.activity_imitate_weixin_chatting_item_msg_text_left, null);
			} else {
				convertView = mInflater.inflate(
						R.layout.activity_imitate_weixin_chatting_item_msg_text_right, null);
			}

			viewHolder = new ViewHolder();
			viewHolder.tvSendTime = (TextView) convertView
					.findViewById(R.id.tv_sendtime);
			viewHolder.tvUserName = (TextView) convertView
					.findViewById(R.id.tv_username);
			viewHolder.tvContent = (TextView) convertView
					.findViewById(R.id.tv_chatcontent);
			viewHolder.isComMsg = isComMsg;

			convertView.setTag(viewHolder);
		} else {
			viewHolder = (ViewHolder) convertView.getTag();
		}
		viewHolder.tvSendTime.setText(entity.getDate());
		viewHolder.tvUserName.setText(entity.getName());
		viewHolder.tvContent.setText(entity.getMessage());
		return convertView;
	}

	static class ViewHolder {
		public TextView tvSendTime;
		public TextView tvUserName;
		public TextView tvContent;
		public boolean isComMsg = true;
	}

}

另外还辅助的bean类

ChatMsgEntity

package com.example.weixindemo;

/**
 * 一个消息的JavaBean
 */
public class ChatMsgEntity {
	private String name;//消息来自
	private String date;//消息日期
	private String message;//消息内容
	private boolean isComMeg = true;// 是否为收到的消息

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getDate() {
		return date;
	}

	public void setDate(String date) {
		this.date = date;
	}

	public String getMessage() {
		return message;
	}

	public void setMessage(String message) {
		this.message = message;
	}

	public boolean getMsgType() {
		return isComMeg;
	}

	public void setMsgType(boolean isComMsg) {
		isComMeg = isComMsg;
	}

	public ChatMsgEntity() {
	}

	public ChatMsgEntity(String name, String date, String text, boolean isComMsg) {
		super();
		this.name = name;
		this.date = date;
		this.message = text;
		this.isComMeg = isComMsg;
	}

}

另外还有聊天界面本人、他人的布局文件

activity_imitate_weixin_chatting_item_msg_text_left.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="6dp" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/tv_sendtime"
            style="@style/chat_text_date_style"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp" >

        <ImageView
            android:id="@+id/iv_userhead"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:background="@drawable/weixin_mini_avatar_shadow"
            android:focusable="false" />

        <TextView
            android:id="@+id/tv_chatcontent"
            style="@style/chat_content_date_style"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_toRightOf="@id/iv_userhead"
            android:background="@drawable/weixin_chatfrom_bg_normal" />

        <TextView
            android:id="@+id/tv_username"
            style="@style/chat_text_name_style"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_below="@id/iv_userhead"
            android:layout_toLeftOf="@id/tv_chatcontent" />
    </RelativeLayout>

</LinearLayout>

activity_imitate_weixin_chatting_item_msg_text_right.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="6dp" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/tv_sendtime"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#bfbfbf"
            android:padding="2dp"
            android:textColor="#ffffff"
            android:textSize="12sp" />
    </LinearLayout>

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp" >

        <ImageView
            android:id="@+id/iv_userhead"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_alignParentTop="true"
            android:background="@drawable/weixin_mini_avatar_shadow"
            android:focusable="false" />

        <TextView
            android:id="@+id/tv_chatcontent"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="10dp"
            android:layout_toLeftOf="@id/iv_userhead"
            android:background="@drawable/weixin_chatto_bg_normal"
            android:clickable="true"
            android:focusable="true"
            android:gravity="left|center"
            android:lineSpacingExtra="2dp"
            android:minHeight="50dp"
            android:textColor="#ff000000"
            android:textSize="15sp" />

        <TextView
            android:id="@+id/tv_username"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_below="@id/iv_userhead"
            android:layout_toRightOf="@id/tv_chatcontent"
            android:gravity="center"
            android:textColor="#818181"
            android:textSize="15sp" />
    </RelativeLayout>

</LinearLayout>

时间： 2024-11-05 08:49:46

类似微信的ChattingUi的相关文章

小功能——类似微信里，评论内容里面，点击每个人的用户名进入个人主页

项目里的朋友圈页面,每幅图片的评论内容里面,有不同的用户进行评论,起初想法是点击用户名直接进行回复,后来看微信都是点击评论内容进行回复评论的发起人,这个好做,把这个textview绑定一个监听器就ok了后来再一想,如果要实现类似微信点击用户名就进入用户的主页,怎么让用户名可以点击呢? 现在父布局下面在new一个水平布局的linearlayout,然后根据把每个用户.包括评论内容都设置进textview里面,然后通过linearlayout的addview()方法,把这些textview添加进去

android 实现类似微信缓存和即时更新好友头像

引言使用微信时我们会发现,首次进入微信的好友列表时,会加载好友头像,但是再次进入时,就不用重新加载了,而且其他页面都不用重新加载,说明微信的好友头像是缓存在本地的,然后好友修改头像后,又会及时的更新,这个功能是如何实现的呢,我们来分析一下分析关于头像缓存的实现头像是网络图片,而且数据量较大,如果用我们常用的SharedPreferences将头像以Bitmap的形式存储,势必会造成OOM,这个方法是行不通的,我们存储的只能是图片的地址,但是如果只存储地址的话,要转化成图片,还是要通过网络

iOS开发>学无止境 - AKTabBarController：类似微信的第三方库

自从有了评论之后,就可以很方便的和大家交流.以前都是我一个人默默的发文章,看不出大家对文章的看法.评论开通之后,就可以很快速的获取大家对文章的看法. 有人会指出文章里有错误的地方,真的很感激他们,非常的认真:有人会对文章说出自己的见解,加深自己的印象,同时,也能帮助到其他的朋友:有人也会在评论里,提出一些问题,但是鉴于评论的字数限制,只能简单的回答一下. 在昨天的文章评论里面,有一个朋友提出了一个问题,关于微信导航栏的. 问题分析和解答问: 自定义导航栏怎么写?就像微信那样,tabBar的四个

Android学习--------实现增删改查数据库操作以及实现类似微信好友对话管理操作

最近的一个实验用到东西挺多,特地总结一下. 要求功能: 1.第一个页面添加歌曲名和歌手,跳到第二个页面列表显示所有记录,使用sqlite数据库 2.对于第二个页面显示的信息可以进行删除和修改操作,并自动刷新最后我做的效果: 长按列表项弹出单个管理的菜单,像微信好友对话管理一样. 删除时可以直接删除这一条并在列表中直接显示,更新时弹出对话框更新内容提交后在列表中重新显示. 做此例遇到的困难: 1.菜单获取上下文 2.获取对话框中的内容 3.对话框按钮添加监听事件-----注意包不要导错:impo

实现类似微信语音播放动画的效果

要求就是点击播放按钮,小喇叭开始动,当语音结束后,停止动画.如图: 这需要用到UIImageView的帧动画,该动画可以让一系列图片在特定的时间内按顺序显示出来.需要的素材如下: audio_icon_1 *****分割线***** audio_icon_2 *******分割线*******audio_icon_3 代码如下: // 添加播放时候的动画图片 [_audioBtn addSubview:self.animationview]; [_audioBtn setImage:[UIIma

利用html5实现类似微信的手机摇一摇功能

利用html5实现类似微信的手机摇一摇功能,并播放音乐. 1. deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度.方位.朝向等. 2. deviceMotion:封装了运动传感器数据的事件,可以获取手机运动状态下的运动加速度等数据. 不多说直接上代码, Javascript: [javascript] view plaincopy var SHAKE_THRESHOLD = 3000; var last_update = 0;

类似微信通讯录界面的排序方法及中文转拼音的方法

最近做一个类似微信的通讯录列表,因为本人也算个新手,然后呢,就遇到点问题.难点在对昵称的排序上,顺带着也就找了找中文转拼音的方法. 废话不多说,直接贴代码吧 1.首先要对昵称字符串进行中文转拼音,这个比较简单,写到NSString分类里面就行. - (NSString *)pinyin; { NSMutableString *str = [self mutableCopy]; CFStringTransform(( CFMutableStringRef)str, NULL, kCFStringT

【转】swift实现ios类似微信输入框跟随键盘弹出的效果

swift实现ios类似微信输入框跟随键盘弹出的效果为什么要做这个效果在聊天app,例如微信中,你会注意到一个效果,就是在你点击输入框时输入框会跟随键盘一起向上弹出,当你点击其他地方时,输入框又会跟随键盘一起向下收回,二者完全无缝连接,那么这是怎么实现的呢,也许你会说直接在键盘弹出的时候把输入框也向上移动不就行了?但是我使用这种方法的时候,发现效果十分不理想,会有明显的滞后现象,原因有以下几点: 键盘弹出动画并不是匀速,键盘和输入框的时间曲线不完全一致,运动不同步各种键盘的高度不一样(比如

python类似微信未读信息图片脚本

其实就是实现一个效果,给一张图片,然后再右上角给出未读的信息数目,就像我们打开微信的时候,总是看到红点就忍不住想要点击去查看一样. 类似这种效果: 可以知道,图片是给定的,那么只要随机生成一个数字,然后再在图片的右上角显示出来就好了,这里可以使用PIL,这样就比较方便的实现了, 代码: from PIL import Image,ImageDraw, ImageFont import random origin_image = "./image/test.jpg" new_image