关于类微信时间戳的实现

最新推荐文章于 2025-04-19 13:51:40 发布

原创最新推荐文章于 2025-04-19 13:51:40 发布 · 6.2k 阅读

4 ·

CC 4.0 BY-SA版权

Android 从零开始专栏收录该内容

15 篇文章

订阅专栏

本文介绍了如何实现类似微信的时间戳功能。当短时间内回复聊天内容时不显示时间戳，超过一定时间间隔则显示。通过布局文件（in.xml, out.xml）设置ListView，其中包含发送和接收的消息item。关键在于Adapter中判断时间，若当前输入与上一条消息间隔超过10秒，显示时间戳。在getViewTypeCount()中返回4，对应四种不同ViewType，在getItemViewType()中确定具体类型，以确保正确显示。" 124701255,10350762,微信小程序封装指示点组件,"['微信小程序', '前端开发']

类为微信的时间戳的实现：

短期内回复聊天内容，则不会出现时间戳；长时间后回复，则出现时间戳。贴图如下：

大家如果对本人的应用感兴趣的话，可以去小米应用市场，或者豌豆荚下载“小黄鸡” ，认准开发者的账号：UstcLin

下面进入正题，如何实现时间戳。

说说我的主要思路。

首先layout一个文件，里边放置一个listview。同时还有两个xml，即发送出去的listitem和一个接收的listitem

in.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="wrap_content"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/chat_from_createDate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="2012-09-01 18:30:20"
        style="@style/chat_date_style"
        android:visibility="gone"
       />

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:orientation="vertical" >

            <ImageView
                android:id="@+id/chat_from_icon"
                android:layout_width="49dp"
                android:layout_height="49dp"
                android:src="@drawable/icon" />

            <TextView
                android:id="@+id/chat_from_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="小黄鸡"
                android:textSize="18sp" />
        </LinearLayout>
        
        <TextView 
            android:id="@+id/chat_from_content"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:minHeight="50dp"
            android:background="@drawable/chat_from_msg"
            android:text="Hello Master。。。"
            android:textSize="18sp"
            android:textColor="#000"
            android:gravity="center_vertical"
            android:focusable="true"
            android:clickable="true"
            android:lineSpacingExtra="2dp"
            />
    </LinearLayout>

</LinearLayout>

显示效果：

out.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="wrap_content"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/chat_send_createDate"
        style="@style/chat_date_style"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="2012-09-01 18:30:21"
        android:visibility="gone"
         />

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >

        <LinearLayout
            android:id="@+id/ly_chat_icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_marginLeft="10dp"
            android:orientation="vertical" >

            <ImageView
                android:id="@+id/chat_send_icon"
                android:layout_width="49dp"
                android:layout_height="49dp"
                android:src="@drawable/my" />

            <TextView
                android:id="@+id/chat_send_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="主人"
                android:textSize="18sp" />
        </LinearLayout>

        <TextView
            android:id="@+id/chat_send_content"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toLeftOf="@id/ly_chat_icon"
            android:background="@drawable/chat_send_msg"
            android:clickable="true"
            android:focusable="true"
            android:gravity="center_vertical"
            android:lineSpacingExtra="2dp"
            android:minHeight="50dp"
            android:text="Hi Little bird。。。"
            android:textColor="#000"
            android:textSize="18sp" />
    </RelativeLayout>

</LinearLayout>

显示效果：

注意：这两个xml中其实都有一个textview，只不过它的属性被设置成不可见：

android:visibility="gone"

最重要的是，在Adapter中判断时间。

大体的思路如下：

1. 本次输入的文本，是否显示时间戳的判断依据：跟上一个item的时间比，如果超出10秒钟，则显示时间戳

2.接收来的文本是否显示时间戳同理。

需要注意的是：

adapter中，重写的getViewTypeCount() 中return的值应该是4 ，因为in.xml 有两种情况（有时间戳、无时间戳），out.xml同样也有两种情况。

然后就是在getItemViewType(int position) 中判断需要返回的ViewType是具体哪一种。只有返回类型对了，在getView()中才能显示正确。

废话不多少，直接上代码：

package com.ustclin.petchicken;

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;

import com.ustclin.petchicken.bean.ChatMessage;
import com.ustclin.petchicken.utils.MyDateUtils;
import com.ustclin.robot.R;

public class ChatMessageAdapter extends BaseAdapter
{
	private LayoutInflater mInflater;
	private List<ChatMessage> mDatas;
	/**
	 * 所有的Type
	 */
	private final static int TYPE_COUNT = 4;
	/**
	 * in  : with date
	 */
	private final static int TYPE_1 = 0; //
	/**
	 * in  : without date
	 */
	private final static int TYPE_2 = 1; //
	/**
	 * out : with date
	 */
	private final static int TYPE_3 = 2; //
	/**
	 * out : without date 
	 */
	private final static int TYPE_4 = 3; //
	
	public ChatMessageAdapter(Context context, List<ChatMessage> datas)
	{
		mInflater = LayoutInflater.from(context);
		mDatas = datas;
	}

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

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

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

	/**
	 * 接受到消息为1，发送消息为0
	 */
	@Override
	public int getItemViewType(int position)
	{
		ChatMessage msg_current = mDatas.get(position);
		ChatMessage msg_before ;
		if(position > 0){
			msg_before = mDatas.get(position-1);
		}
		else{
			msg_before = mDatas.get(position);
		}
		
		if(position == 0)
		{
			return TYPE_1;
		}
		int duration = 10; // 10秒
		if (MyDateUtils.isLarger(msg_current.getDate(), msg_before.getDate(),duration)
				&& msg_current.getType().equals(ChatMessage.MESSAGE_IN)) {
			System.out.println("this is getItemViewType : TYPE_1");
			return TYPE_1;
		}
		else if (!MyDateUtils.isLarger(msg_current.getDate(),msg_before.getDate(), duration)
				&& msg_current.getType().equals(ChatMessage.MESSAGE_IN)) {
			System.out.println("this is getItemViewType : TYPE_2");
			return TYPE_2;
		}
		if (MyDateUtils.isLarger(msg_current.getDate(), msg_before.getDate(),duration)
				&& msg_current.getType().equals(ChatMessage.MESSAGE_OUT)) {
			System.out.println("this is getItemViewType : TYPE_3");
			return TYPE_3;
		}
		else if (!MyDateUtils.isLarger(msg_current.getDate(),msg_before.getDate(), duration)
				&& msg_current.getType().equals(ChatMessage.MESSAGE_OUT)) {
			System.out.println("this is getItemViewType : TYPE_4");
			return TYPE_4;
		}
		// 上面的例子已经都cover到，这个return是默认的
		return 0;
	}

	@Override
	public int getViewTypeCount()
	{
		return TYPE_COUNT;
	}

	@Override
	public View getView(int position, View convertView, ViewGroup parent)
	{
		
		ChatMessage chatMessage = mDatas.get(position);
		int type = getItemViewType(position);
		ViewHolder viewHolder = null;
		if (convertView == null){
			viewHolder = new ViewHolder();
			// 按照所需样式，确定布局
			switch (type) {
			case TYPE_1:
				// in : with date
				convertView = mInflater.inflate(R.layout.main_chat_from_msg,
						parent, false);
				viewHolder.createDate = (TextView) convertView
						.findViewById(R.id.chat_from_createDate);
				viewHolder.content = (TextView) convertView
						.findViewById(R.id.chat_from_content);
				convertView.setTag(viewHolder);
				break;
			case TYPE_2:
				// in : without date
				convertView = mInflater.inflate(R.layout.main_chat_from_msg,
						parent, false);
				/*viewHolder.createDate = (TextView) convertView
						.findViewById(R.id.chat_from_createDate);*/
				viewHolder.content = (TextView) convertView
						.findViewById(R.id.chat_from_content);
				convertView.setTag(viewHolder);
				break;
			case TYPE_3:
				// out : with date
				convertView = mInflater.inflate(R.layout.main_chat_send_msg,
						null);
				viewHolder.createDate = (TextView) convertView
						.findViewById(R.id.chat_send_createDate);
				viewHolder.content = (TextView) convertView
						.findViewById(R.id.chat_send_content);
				convertView.setTag(viewHolder);
				break;
			case TYPE_4:
				// out : without date
				convertView = mInflater.inflate(R.layout.main_chat_send_msg,
						null);
				/*viewHolder.createDate = (TextView) convertView
						.findViewById(R.id.chat_send_createDate);*/
				viewHolder.content = (TextView) convertView
						.findViewById(R.id.chat_send_content);
				convertView.setTag(viewHolder);
				break;
			}
		} 
		else{
			viewHolder = (ViewHolder) convertView.getTag();
			
			switch(type){
			case TYPE_1:
				viewHolder.createDate.setText(chatMessage.getDate());
				viewHolder.createDate.setVisibility(View.VISIBLE);
				break;
			case TYPE_2:
				break;
			case TYPE_3:
				viewHolder.createDate.setText(chatMessage.getDate());
				viewHolder.createDate.setVisibility(View.VISIBLE);
				break;
			case TYPE_4:
				break;
			}
			
		}
		
		viewHolder.content.setText(chatMessage.getMsg());
		//如果位置是第一个的话，显示时间
		if(position == 0){
			viewHolder.createDate.setVisibility(View.VISIBLE);
		}
		return convertView;
	}

	private class ViewHolder
	{
		public TextView createDate;
		public TextView name;
		public TextView content;
	}

}

geiView()中用上了contentView 和 ViewHolder来提高listview的性能，这个应该没有必要多说了。

如果有不对的地方，希望大家多多包涵，并且不吝赐教，谢谢。