相似微信的ChattingUi

2022-09-06 15:29:54

先看主页面布局

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:// 发送button点击事件

			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>

码农公寓

相关文章