安卓项目SimpleQQ——聊天界面设计

完整项目介绍看这里：安卓项目SimpleQQ概述，可下载源码。

左边布局chatting_item_msg_text_left.xml

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

    
    <LinearLayout
            android:gravity="center_horizontal"
            android:orientation="vertical"
            android:layout_width="fill_parent" android:layout_height="wrap_content">
        <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_marginTop="5dp"
            android:layout_width="fill_parent" android:layout_height="wrap_content">
        <ImageView
                android:id="@+id/iv_userhead"
                android:layout_alignParentLeft="true"
                android:layout_alignParentTop="true"
                android:focusable="false"
                android:background="@drawable/head_2"
                android:layout_width="wrap_content" android:layout_height="wrap_content"/>

        <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:background="#00ffffff"
                android:textColor="#000"
                android:layout_toRightOf="@id/iv_userhead"
        />

        <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>

右边布局chatting_item_msg_text_right.xml

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

    <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_alignParentRight="true"
                android:layout_alignParentTop="true"
                android:background="@drawable/head_3"
                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_marginRight="10dp"
                android:background="#00ffffff"
                android:textColor="#000"
                android:layout_toLeftOf="@id/iv_userhead"
        />

        <TextView
                android:id="@+id/tv_username"
                style="@style/chat_text_name_style"
                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" />
    RelativeLayout>

LinearLayout>

主布局activity_chatmain.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:tools="http://schemas.android.com/tools"
                android:background="#Fff"
                tools:context="com.example.yangenneng0.myapplication.viewUI.ChatMainActivity"
                android:layout_width="match_parent"
                android:layout_height="match_parent">


    
    <RelativeLayout
                    android:id="@+id/rl_layout"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:background="@color/colorPrimary"
                    android:textColor="#fff">
        <Button
                android:id="@+id/chatGoHome"
                android:text="<返回"
                android:layout_width="70dp"
                android:background="@color/colorPrimary"
                android:textColor="#fff"
                android:layout_height="wrap_content"/>
        <TextView
                android:id="@+id/chatname"
                android:layout_centerInParent="true"
                android:textSize="20.0sp"

                android:textColor="#ffffff"
                android:layout_width="wrap_content" android:layout_height="wrap_content"/>
    RelativeLayout>
    



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

        <Button
                android:id="@+id/btn_send"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:layout_marginRight="10dp"
                android:text="发送"
                android:layout_width="60dp" android:layout_height="40dp"/>
        <EditText
                android:id="@+id/et_sendmessage"
                android:layout_centerVertical="true"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_toLeftOf="@id/btn_send"
                android:singleLine="true"
                android:textSize="18sp"
                android:layout_width="fill_parent" android:layout_height="40dp"/>
    RelativeLayout>
    


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

RelativeLayout>

聊天发布ChatMainActivity

package com.example.yangenneng0.myapplication.viewUI;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ListView;
import android.widget.TextView;
import com.example.yangenneng0.myapplication.MainActivity;
import com.example.yangenneng0.myapplication.R;
import com.example.yangenneng0.myapplication.adapter.ChatMsgViewAdapter;
import com.example.yangenneng0.myapplication.model.ChatMsgEntity;
import com.example.yangenneng0.myapplication.utils.APPglobal;

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

/**
 * User: yangenneng
 * DateTime: 2016/12/11 17:11
 * Description:
 */
public class ChatMainActivity extends Activity implements View.OnClickListener {

    private Button mBtnSend;            // 发送btn
    private Button mBtnBack;            // 返回btn
    private EditText mEditTextContent;  // 内容框
    private ListView mListView;         // 聊天记录列表
    private ChatMsgViewAdapter mAdapter;// 聊天记录视图的Adapter
    private List mDataArrays = new ArrayList();// 聊天记录对象数组


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

        initView();// 初始化view
        initData();// 初始化数据
        mListView.setSelection(mAdapter.getCount() - 1);

        TextView textView= (TextView) findViewById(R.id.chatname);
        Bundle bundle = this.getIntent().getExtras();
        textView.setText(bundle.getString("name")); //解析传递过来的参数

    }

    /**
     * 初始化view
     * 找出页面的控件
     */
    public void initView() {
        mListView= (ListView) findViewById(R.id.listview);
        mBtnSend=(Button) findViewById(R.id.btn_send);
        mBtnSend.setOnClickListener(this);
        mBtnBack = (Button) findViewById(R.id.chatGoHome);
        mBtnBack.setOnClickListener(this);
        mEditTextContent = (EditText) findViewById(R.id.et_sendmessage);
    }


    //消息数组
    private String[] msgArray = new String[] { "您好，我是自动回复机器人，输入关键字即可和我聊天，比如:【hello】 【你好】 【再见】 【...】" };
    //时间数组
    private String[] dataArray = new String[] { getDate()};

    /**
     * 模拟加载消息历史，实际开发可以从数据库中读出
     */
    public void initData() {
        for (int i = 0; i < msgArray.length; i++) {
            ChatMsgEntity entity = new ChatMsgEntity();
            entity.setDate(dataArray[i]);
            if (i % 2 == 0) {

                Bundle bundle = this.getIntent().getExtras();//解析传递过来的参数
                String name = bundle.getString("name");

                entity.setName(name);   //设置对方姓名
                entity.setMsgType(true); // 收到的消息
            } else {
                entity.setName(APPglobal.NAME);   //设置自己姓名
                entity.setMsgType(false);// 发送的消息
            }
            entity.setMessage(msgArray[i]);//消息内容
            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;
            case R.id.chatGoHome:// 返回按钮点击事件
                Intent intent = new Intent();
                intent.setClass(ChatMainActivity.this, MainActivity.class);
                ChatMainActivity.this.startActivity(intent);
                break;
        }
    }


    /**
     * 发送消息
     */
    private void send() {
        String contString = mEditTextContent.getText().toString();
        if (contString.length() > 0) {

            //-----------发送者-------------
            ChatMsgEntity entity = new ChatMsgEntity();
            entity.setName(APPglobal.NAME);      //设置发送消息消息者姓名
            entity.setDate(getDate());  //设置格式化的发送时间
            entity.setMessage(contString); //设置发送内容
            entity.setMsgType(false);      //设置消息类型，true 接受的 false发送的
            mDataArrays.add(entity);
            mAdapter.notifyDataSetChanged();// 通知ListView，数据已发生改变

           //-----------自动回复-------------
            Bundle bundle = this.getIntent().getExtras();//解析传递过来的参数
            String name = bundle.getString("name");
            ChatMsgEntity chatMsgEntity=new ChatMsgEntity();
            chatMsgEntity.setName(name);
            chatMsgEntity.setDate(getDate());  //设置格式化的发送时间
            chatMsgEntity.setMessage(getRecive(contString)); //设置发送内容
            chatMsgEntity.setMsgType(true);      //设置消息类型，true 接受的 false发送的
            mDataArrays.add(chatMsgEntity);
            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());
    }

    /**
     * 根据输入的关键字自动回复
     * @param key
     * @return
     */
    private String getRecive(String key){
        HashMap ReciveValues=new HashMap<>();
        //初始化自动回复关键字
        ReciveValues.put("你好","你好~~~");
        ReciveValues.put("hello","hello");
        ReciveValues.put("再见"," 好的，再见啦");
        ReciveValues.put("bye"," ^_^ bye bye.");
        ReciveValues.put("...","为什么无语啊？");
        ReciveValues.put("。。。","额，为什么无语啊？");
        ReciveValues.put("？","怎么了，有问题吗？");
        ReciveValues.put("?","怎么了，有问题吗？");

        if(ReciveValues.containsKey(key.toLowerCase())){//查找是否存在
            return ReciveValues.get(key);
        }else {
            return " ^_^ 抱歉，我还听不懂您说的，请等待我升级下一个版本....";
        }

    }

}

聊天记录适配器ChatMsgViewAdapter

package com.example.yangenneng0.myapplication.adapter;

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.example.yangenneng0.myapplication.R;
import com.example.yangenneng0.myapplication.model.ChatMsgEntity;

import java.util.List;

/**
 * User: yangenneng
 * DateTime: 2016/12/11 17:58
 * Description: 聊天记录ListView的Adapter
 */
public class ChatMsgViewAdapter extends BaseAdapter {

    //消息类型
    public static interface IMsgViewType {
        int IMVT_COM_MSG = 0;       // 收到对方的消息
        int IMVT_TO_MSG = 1;        // 自己发送出去的消息
    }

    private static final int ITEMCOUNT = 2;// 消息类型的总数
    private List coll;      // 消息对象数组
    private LayoutInflater mInflater;

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

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

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

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

    /**
     * 得到item的类型，是自己发送的消息，还是接受到的消息
     * @param position
     * @return
     */
    public int getItemViewType(int position) {
        ChatMsgEntity entity=coll.get(position);
        if(entity.getMsgType()) {   //收到的消息
            return IMsgViewType.IMVT_COM_MSG;
        }else {                     //自己发送的消息
            return IMsgViewType.IMVT_TO_MSG;
        }
    }

    /**
     * Item类型的总数:消息类型总数
     */
    public int getViewTypeCount() {
        return ITEMCOUNT;
    }


    @Override
    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.chatting_item_msg_text_left,null);
            }else {
                convertView=mInflater.inflate(R.layout.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;
    }



}

聊天记录实体ChatMsgEntity

package com.example.yangenneng0.myapplication.model;

import com.example.yangenneng0.myapplication.utils.APPglobal;

/**
 * User: yangenneng
 * DateTime: 2016/12/11 17:08
 * Description:聊天消息实体类
 */
public class ChatMsgEntity {

    private String name;//消息来自
    private String date;//消息日期
    private String message;//消息内容
    private boolean isComMeg = true;// 是否为收到的消息

    private String sendp;//发送者
    private String receivep;//接收者

    //构造函数
    public ChatMsgEntity() {
    }

    public ChatMsgEntity(String date,String message,String sendp,String receivep){
        this.date=date;
        this.message=message;
        this.receivep=receivep;
        this.sendp=sendp;
        this.isComMeg=!(sendp.equals(APPglobal.NAME));//发送者是否等于当前用户 不是得话就是接受的消息
    }
    public ChatMsgEntity(String name, String date, String text, boolean isComMsg) {
        super();
        this.name = name;
        this.date = date;
        this.message = text;
        this.isComMeg = isComMsg;
    }

    //  getter/setter构造器

    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 String getSendp() {
        return sendp;
    }

    public void setSendp(String sendp) {
        this.sendp = sendp;
    }

    public String getReceivep() {
        return receivep;
    }

    public void setReceivep(String receivep) {
        this.receivep = receivep;
    }
}