zoukankan      html  css  js  c++  java
  • 转-Android仿微信气泡聊天界面设计

      微信的气泡聊天是仿iPhone自带短信而设计出来的,不过感觉还不错可以尝试一下仿着微信的气泡聊天做一个Demo,给大家分享一下!效果图如下:


      气泡聊天最终要的是素材,要用到9.png文件的素材,这样气泡会随着聊天内容的多少而改变气泡的大小且不失真。为了方便,我就直接在微信里面提取出来啦。

      聊天的内容是用ListView来显示的,将聊天的内容封装成一个ChatMsgEntity类的对象里面,然后交给自定义的ListView适配器将聊天内容显示出来。

      ChatMsgEntity.java比较简单,只是聊天的内容存储、设置和获取。

    package com.example.school;
    
    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) {
            this.name = name;
            this.date = date;
            this.text = text;
            this.isComMeg = isComMsg;
        }
    }

    显示ListView的适配器ChatMsgViewAdpater.java:

    package com.example.school;
    
    import android.R.integer;
    import android.content.Context;
    import android.database.DataSetObserver;
    
    import android.util.Log;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.View.OnClickListener;
    import android.view.View.OnLongClickListener;
    import android.view.ViewGroup;
    
    import android.widget.BaseAdapter;
    import android.widget.CheckBox;
    import android.widget.LinearLayout;
    import android.widget.TextView;
    
    import java.util.ArrayList;
    import java.util.List;
    
    public class ChatMsgViewAdapter extends BaseAdapter {
        
        //ListView视图的内容由IMsgViewType决定
        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> data;
        private Context context;  
        private LayoutInflater mInflater;
    
        public ChatMsgViewAdapter(Context context, List<ChatMsgEntity> data) {
            this.context = context;
            this.data = data;
            mInflater = LayoutInflater.from(context);
        }
    
        //获取ListView的项个数
        public int getCount() {
            return data.size();
        }
    
        //获取项
        public Object getItem(int position) {
            return data.get(position);
        }
    
        //获取项的ID
        public long getItemId(int position) {
            return position;
        }
    
        //获取项的类型
        public int getItemViewType(int position) {
            // TODO Auto-generated method stub
             ChatMsgEntity entity = data.get(position);
             
             if (entity.getMsgType())
             {
                 return IMsgViewType.IMVT_COM_MSG;
             }else{
                 return IMsgViewType.IMVT_TO_MSG;
             }
             
        }
    
        //获取项的类型数
        public int getViewTypeCount() {
            // TODO Auto-generated method stub
            return 2;
        }
        
        //获取View
        public View getView(int position, View convertView, ViewGroup parent) {
            
            ChatMsgEntity entity = data.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;
        }
        
        //通过ViewHolder显示项的内容
        static class ViewHolder { 
            public TextView tvSendTime;
            public TextView tvUserName;
            public TextView tvContent;
            public boolean isComMsg = true;
        }
        
    }

    对方发来消息的显示布局chatting_item_msg_text_left.xml

    <?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" >
                     <ImageView 
                       android:id="@+id/iv_userhead" 
                       android:layout_width="wrap_content"
                       android:layout_height="wrap_content"
                       android:focusable="false" 
                       android:layout_alignParentLeft="true" 
                       android:layout_alignParentTop="true" 
                       android:background="@drawable/mini_avatar_shadow"/>
                     <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>

    chatting_item_msg_text_right.xml和上面差不多,只是气泡和头像的方向在右边,就不贴代码了。

      主界面的布局chat.xml

    <?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="#f0f0e0" >
        <RelativeLayout
            android:id="@+id/rl_layout" 
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/title" >
            <Button 
                android:id="@+id/btn_back" 
                android:gravity="center_vertical" 
                android:layout_marginLeft="5dp" 
                android:paddingLeft="18dp" 
                android:textSize="18.0sp" 
                android:textColor="#ffffff"  
                android:background="@drawable/selector_btn_back" 
                android:layout_width="70dp" 
                android:layout_height="wrap_content" 
                android:text="@string/back" />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/school_title_name"
                android:layout_centerInParent="true"
                style="@style/my_txt"/>
            <ImageView 
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/campus_info"
                android:layout_centerVertical="true"
                android:layout_alignParentRight="true"
                android:layout_marginRight="15dp"/>
            </RelativeLayout>
        <RelativeLayout
            android:id="@+id/rl_bottom"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:background="@drawable/layout_bg1" >
            <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="@string/send" />
            <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/edittext1"
                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:layout_marginLeft="10.0dip" 
            android:layout_marginTop="10.0dip" 
            android:layout_marginRight="10.0dip"
            android:divider="@null"
            android:dividerHeight="5dp"
            android:scrollbars="none"
            android:cacheColorHint="#00000000"/>
    </RelativeLayout>

    ChatActivity.java

    package com.example.chat;
    
    import java.util.ArrayList;
    import java.util.Calendar;
    import java.util.List;
    
    import com.example.school.R;
    
    import android.os.Bundle;
    import android.app.Activity;
    import android.content.Intent;
    import android.view.KeyEvent;
    import android.view.Menu;
    import android.view.View;
    import android.view.Window;
    import android.view.View.OnClickListener;
    import android.widget.AdapterView;
    import android.widget.AdapterView.OnItemClickListener;
    import android.widget.Button;
    import android.widget.EditText;
    import android.widget.ListView;
    import android.widget.TextView;
    
    public class ChatActivity extends Activity implements OnClickListener {
        private Button mBtnSend;
        private Button mBtnBack;
        private EditText mEditTextContent;
        //聊天内容的适配器
        private ChatMsgViewAdapter mAdapter;
        private ListView mListView;
        //聊天的内容
        private List<ChatMsgEntity> mDataArrays = new ArrayList<ChatMsgEntity>();
        
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            requestWindowFeature(Window.FEATURE_NO_TITLE);// 去掉标题栏
            setContentView(R.layout.chat);
            initView();
            initData();
        }
        
        //初始化视图
        private void initView() {
            mListView = (ListView) findViewById(R.id.listview);
            mBtnBack = (Button) findViewById(R.id.btn_back);
            mBtnBack.setOnClickListener(this);
            mBtnSend = (Button) findViewById(R.id.btn_send);
            mBtnSend.setOnClickListener(this);
            mEditTextContent = (EditText) findViewById(R.id.et_sendmessage);
        }
    
        private String[] msgArray = new String[]{"  孩子们,要好好学习,天天向上!要好好听课,不要翘课!不要挂科,多拿奖学金!三等奖学金的争取拿二等,二等的争取拿一等,一等的争取拿励志!", 
                "姚妈妈还有什么吩咐...", 
                "还有,明天早上记得跑操啊,不来的就扣德育分!", 
                "德育分是什么?扣了会怎么样?", 
                "德育分会影响奖学金评比,严重的话,会影响毕业", 
                "哇!学院那么不人道?",
                "你要是你不听话,我当场让你不能毕业!", 
                "姚妈妈,我知错了(- -我错在哪了...)"};
    
        private String[]dataArray = new String[]{"2012-09-01 18:00", "2012-09-01 18:10", 
                "2012-09-01 18:11", "2012-09-01 18:20", 
                "2012-09-01 18:30", "2012-09-01 18:35", 
                "2012-09-01 18:40", "2012-09-01 18:50"};
        private final static int COUNT = 8;
        
        //初始化要显示的数据
        private 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("Shamoo");
                    entity.setMsgType(false);
                }
                
                entity.setText(msgArray[i]);
                mDataArrays.add(entity);
            }
            mAdapter = new ChatMsgViewAdapter(this, mDataArrays);
            mListView.setAdapter(mAdapter);
        }
        
        public void onClick(View view) {
            // TODO Auto-generated method stub
            switch(view.getId()) {
            case R.id.btn_back:
                back();
                break;
            case R.id.btn_send:
                send();
                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("");
                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));
            String day = String.valueOf(c.get(Calendar.DAY_OF_MONTH) + 1);
            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 boolean onKeyDown(int keyCode, KeyEvent event) {
            back();
            return true;
        }
        
        private void back() {
            finish();
        }
    }

    谢谢大家的支持!链接:点击打开链接

    需要一分资源分,大家评论一下那一分就还回来了,哈哈~~

    转自http://blog.csdn.net/pocoyoshamoo/article/details/9674385

  • 相关阅读:
    2-1 Restful中HTTP协议介绍
    11.修改WSDL文档
    10.TCPIP监听器
    05.使用jdk发布webservice服务
    09.ws复杂数据类型数据传输
    2019温馨的元旦祝福语 2019元旦祝福语大全!收藏备用!
    一文详解CSS常见的五大布局
    一文详解CSS常见的五大布局
    一文详解CSS常见的五大布局
    Asp.Net Core + Docker 搭建
  • 原文地址:https://www.cnblogs.com/JuneZhang/p/4186107.html
Copyright © 2011-2022 走看看