Android實現類似微信的聊天UI

jopen 10年前發布 | 52K 次閱讀 Android Android開發移動開發

先看主頁面布局

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>

來自：http://blog.csdn.net/u013210620/article/details/46430003

本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1433898715426.html

Android Android開發移動開發

Android實現類似微信的聊天UI

相關經驗

相關資訊

相關文檔

目錄