仿微信-界面动画(9)--ListView有不同类别Item

这次主要讲述的是如何实现微信聊天界面~
难点~不同种类的Item的组合
实现效果如下：

只是简单的界面设计，因此~无法实现真正的对话~切对话内容是源代码中明确写出的，这里主要是讲解的是不同Item的ListView的实现；

涉及到了，chatmsg实体，适配器等等~

根据类型的不同~分为两种R.layout.chatting_item_msg_text_left和R.layout.chatting_item_msg_text_right

示意图如下：


效果显而易见，看代码吧~

ChatActivity源码

package cn.buaa.myweixin;

import java.util.ArrayList;
import java.util.Calendar;
import java.util.List;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.WindowManager;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ListView;


public class ChatActivity extends Activity implements OnClickListener{
    /** Called when the activity is first created. */

    private Button mBtnSend;
    private Button mBtnBack;
    private EditText mEditTextContent;
    private ListView mListView;
    private ChatMsgViewAdapter mAdapter;
    private List<ChatMsgEntity> mDataArrays = new ArrayList<ChatMsgEntity>();


    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.chat_xiaohei);
        //启动activity时不自动弹出软键盘
        getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_HIDDEN); 
        initView();

        initData();
    }


    public void initView()
    {
        mListView = (ListView) findViewById(R.id.listview);
        mBtnSend = (Button) findViewById(R.id.btn_send);
        mBtnSend.setOnClickListener(this);
        mBtnBack = (Button) findViewById(R.id.btn_back);
        mBtnBack.setOnClickListener(this);

        mEditTextContent = (EditText) findViewById(R.id.et_sendmessage);
    }

    private String[]msgArray = new String[]{"你好啊，我是小黑，你呢？", "我是人马，很高兴认识你", "我也是", "一起玩会游戏？", 
                                            "可以啊，但是我好久没玩了，可能比较坑", "没事啊，我也有点不会玩的",
                                            "不解释，哈哈哈哈", "gogogo~~~",};

    private String[]dataArray = new String[]{"2016-09-01 18:00", "2016-09-01 18:10", 
                                            "2016-09-01 18:11", "2016-09-01 18:20", 
                                            "2016-09-01 18:30", "2016-09-01 18:35", 
                                            "2016-09-01 18:40", "2016-09-01 18:50"}; 
    private final static int COUNT = 8;
    public void initData()
    {
        for(int i = 0; i < COUNT; i++)
        {
            ChatMsgEntity entity = new ChatMsgEntity();
            entity.setDate(dataArray[i]);
            if (i % 2 == 0)
            {
                entity.setName("小黑");
                entity.setMsgType(true);
            }else{
                entity.setName("人马");
                entity.setMsgType(false);
            }

            entity.setText(msgArray[i]);
            mDataArrays.add(entity);
        }

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

    }


    @Override
    public void onClick(View v) {
        // TODO Auto-generated method stub
        switch(v.getId())
        {
        case R.id.btn_send:
            send();
            break;
        case R.id.btn_back:
            finish();
            break;
        }
    }

    private void send()
    {
        String contString = mEditTextContent.getText().toString();
        if (contString.length() > 0)
        {
            ChatMsgEntity entity = new ChatMsgEntity();
            entity.setDate(getDate());
            entity.setName("人马");      //我是人马，都是以人马的口吻进行的发送
            entity.setMsgType(false);
            entity.setText(contString);

            mDataArrays.add(entity);

            mAdapter.notifyDataSetChanged(); //提示适配器更新

            mEditTextContent.setText(""); //清空editText

            mListView.setSelection(mListView.getCount() - 1);
        }
    }

    private String getDate() {
        Calendar c = Calendar.getInstance();

        String year = String.valueOf(c.get(Calendar.YEAR));
        String month = String.valueOf(c.get(Calendar.MONTH) + 1);
        String day = String.valueOf(c.get(Calendar.DAY_OF_MONTH));
        String hour = String.valueOf(c.get(Calendar.HOUR_OF_DAY));
        String mins = String.valueOf(c.get(Calendar.MINUTE));


        StringBuffer sbBuffer = new StringBuffer();
        sbBuffer.append(year + "-" + month + "-" + day + " " + hour + ":" + mins); 


        return sbBuffer.toString();
    }


    public void head_xiaohei(View v) {     //标题栏 返回按钮
        Intent intent = new Intent (ChatActivity.this,InfoXiaohei.class);           
        startActivity(intent);  
      } 
}

ChatMsgViewAdapter源码

package cn.buaa.myweixin;

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 java.util.List;

public class ChatMsgViewAdapter extends BaseAdapter {

    public static interface IMsgViewType
    {
        int IMVT_COM_MSG = 0;
        int IMVT_TO_MSG = 1;
    }

    private static final String TAG = ChatMsgViewAdapter.class.getSimpleName();

    private List<ChatMsgEntity> coll;

    private Context ctx;

    private LayoutInflater mInflater;

    public ChatMsgViewAdapter(Context context, List<ChatMsgEntity> coll) {
        ctx = context;
        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;
    }



    @Override
    public int getItemViewType(int position) {
        // TODO Auto-generated method stub
        ChatMsgEntity entity = coll.get(position);

        if (entity.getMsgType())
        {
            return IMsgViewType.IMVT_COM_MSG;
        }else{
            return IMsgViewType.IMVT_TO_MSG;
        }

    }


    @Override
    public int getViewTypeCount() {
        // TODO Auto-generated method stub
        return 2;
    }


    @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.getText());

        return convertView;
    }


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


}

ChatMsgEntity源码

package cn.buaa.myweixin;

public class ChatMsgEntity {
    private static final String TAG = ChatMsgEntity.class.getSimpleName();

    private String name;

    private String date;

    private String text;

    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 getText() {
        return text;
    }

    public void setText(String text) {
        this.text = text;
    }

    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.text = text;
        this.isComMeg = isComMsg;
    }

}

R.layout.chatting_item_msg_text_left

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        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:orientation="vertical" 
            android:gravity="center_horizontal">

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

        </LinearLayout>


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

                <ImageView 
                   android:id="@+id/iv_userhead" 
                   android:layout_width="52dp"
                   android:layout_height="52dp"
                   android:clickable="true"
                   android:onClick="head_xiaohei"
                   android:layout_alignParentLeft="true" 
                   android:layout_alignParentTop="true" 
                   android:background="@drawable/xiaohei"/>

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


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



        </RelativeLayout>

</LinearLayout>

R.layout.chatting_item_msg_text_right

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        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:orientation="vertical" 
            android:gravity="center_horizontal">

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

        </LinearLayout>

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


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

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


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

        </RelativeLayout>

</LinearLayout>

R.layout.chat_xiaohei

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:background="@drawable/chat_bg_default" >

    <RelativeLayout 
        android:id="@+id/rl_layout"
            android:layout_width="fill_parent"
            android:layout_height="45dp"
            android:background="@drawable/title_bar"
            android:gravity="center_vertical"  > 
            <Button
            android:id="@+id/btn_back"
            android:layout_width="70dp"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:text="返回"
            android:textSize="14sp"
            android:textColor="#fff"
            android:onClick="chat_back"
            android:background="@drawable/title_btn_back"
            />    
            <TextView
                android:layout_width="wrap_content" 
                android:layout_height="wrap_content" 
                android:text="小黑"
                android:layout_centerInParent="true"
                android:textSize="20sp"     
                android:textColor="#ffffff" /> 
            <ImageButton 
                android:id="@+id/right_btn"
                android:layout_width="67dp" 
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true" 
                android:layout_centerVertical="true"
                android:layout_marginRight="5dp"
                android:src="@drawable/mm_title_btn_contact_normal"
                android:background="@drawable/title_btn_right"

                />      
        </RelativeLayout>


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

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


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

    </RelativeLayout>


    <ListView
    android:id="@+id/listview"
    android:layout_below="@id/rl_layout"
    android:layout_above="@id/rl_bottom"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"    
    android:divider="@null"
    android:dividerHeight="5dp"
    android:stackFromBottom="true"
    android:scrollbarStyle="outsideOverlay" 
    android:cacheColorHint="#0000"/>

</RelativeLayout>

直接上代码了，看了之前的实例的小伙伴们应该都看的很清楚啦~就不赘述了~，谢谢~