Android QQ、微信聊天消息界面设计原理与实现

雨点打透心脏的1/2处 2024-02-17 16:17 49阅读 0赞

**Android QQ、微信聊天消息界面设计原理与实现**

原理：Android平台上，典型的以腾讯的QQ、微信这些聊天消息界面通常可以采用ListView设计与实现，需要使用ListView 适配器Adapter的getItemViewType()和getViewTypeCount()。  
在ListView的适配器中，每一次getView时候，首先要判断view的类型getItemViewType()，然后根据不同的类型加载不同的布局view。  
至于底部发送消息的窗口，每次发送完消息，需要将ListView滚动到底部，以免输入键盘遮挡住数据而致使用户看不到刚刚发送的消息。  
现在给出一个Android平台上简单的设计与实现方案。效果如图所示：

![Center][]

测试的主Activity MainActivity.java：

package zhangphil.chat;
    
    import java.util.ArrayList;
    import java.util.HashMap;
    
    import android.app.Activity;
    import android.content.Context;
    import android.os.Bundle;
    import android.view.ContextMenu;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    import android.view.ContextMenu.ContextMenuInfo;
    import android.widget.ArrayAdapter;
    import android.widget.Button;
    import android.widget.EditText;
    import android.widget.ListView;
    import android.widget.TextView;
    
    public class MainActivity extends Activity {
    
    	private final int VIEW_TYPE = 0xb01;
    	private final int VIEW_TYPE_LEFT = -10;
    	private final int VIEW_TYPE_RIGHT = -11;
    
    	private final int MESSAGE = 0xb02;
    
    	private ArrayList<HashMap<Integer, Object>> items = null;
    
    	@Override
    	protected void onCreate(Bundle savedInstanceState) {
    		super.onCreate(savedInstanceState);
    		setContentView(R.layout.activity_main);
    
    		final ListView listView = (ListView) findViewById(android.R.id.list);
    
    		items = new ArrayList<HashMap<Integer, Object>>();
    
    		for (int i = 0; i < 8; i++) {
    			if (i % 2 == 0) {
    				HashMap<Integer, Object> map = new HashMap<Integer, Object>();
    				map.put(VIEW_TYPE, VIEW_TYPE_LEFT);
    				map.put(MESSAGE, "对方说的消息" + i);
    				items.add(map);
    			} else {
    				HashMap<Integer, Object> map = new HashMap<Integer, Object>();
    				map.put(VIEW_TYPE, VIEW_TYPE_RIGHT);
    				map.put(MESSAGE, "我说的消息" + i);
    				items.add(map);
    			}
    		}
    
    		final MyAdapter adapter = new MyAdapter(this, -1);
    		listView.setAdapter(adapter);
    
    		final EditText msgEditText = (EditText) findViewById(R.id.msgEditText);
    		Button button = (Button) findViewById(R.id.msgSend);
    		button.setOnClickListener(new View.OnClickListener() {
    
    			@Override
    			public void onClick(View v) {
    				String msg = msgEditText.getText() + "";
    
    				HashMap<Integer, Object> map = new HashMap<Integer, Object>();
    				map.put(VIEW_TYPE, VIEW_TYPE_RIGHT);
    				map.put(MESSAGE, msg);
    				items.add(map);
    
    				adapter.notifyDataSetChanged();
    
    				// 发送后清空输入框内容
    				msgEditText.setText(null);
    
    				// 输入框发送消息后将ListView滚动到最底部
    				listView.setSelection(ListView.FOCUS_DOWN);
    			}
    		});
    	}
    
    	private class MyAdapter extends ArrayAdapter {
    
    		private LayoutInflater layoutInflater;
    
    		public MyAdapter(Context context, int resource) {
    			super(context, resource);
    			layoutInflater = LayoutInflater.from(context);
    		}
    
    		@Override
    		public View getView(int pos, View convertView, ViewGroup parent) {
    			int type = getItemViewType(pos);
    			String msg = getItem(pos);
    
    			switch (type) {
    			case VIEW_TYPE_LEFT:
    				convertView = layoutInflater.inflate(R.layout.left, null);
    				TextView textLeft = (TextView) convertView.findViewById(R.id.textView);
    				textLeft.setText(msg);
    				break;
    				
    			case VIEW_TYPE_RIGHT:
    				convertView = layoutInflater.inflate(R.layout.right, null);
    				TextView textRight = (TextView) convertView.findViewById(R.id.textView);
    				textRight.setText(msg);
    				break;
    			}
    
    			return convertView;
    		}
    
    		@Override
    		public String getItem(int pos) {
    			String s = items.get(pos).get(MESSAGE) + "";
    			return s;
    		}
    
    		@Override
    		public int getCount() {
    			return items.size();
    		}
    
    		@Override
    		public int getItemViewType(int pos) {
    			int type = (Integer) items.get(pos).get(VIEW_TYPE);
    			return type;
    		}
    
    		@Override
    		public int getViewTypeCount() {
    			return 2;
    		}
    	}
    }

MainActivity.java需要的布局文件activity\_main.xml：

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    
        <ListView
            android:id="@android:id/list"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_above="@+id/commentLinearLayout"
            android:layout_alignParentTop="true"
            android:divider="@android:color/transparent"
            android:dividerHeight="15dip"
            android:scrollbars="none" />
    
        <LinearLayout
            android:id="@+id/commentLinearLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:background="#e0e0e0"
            android:orientation="horizontal" >
    
            <EditText
                android:id="@+id/msgEditText"
                android:layout_width="0dip"
                android:layout_height="wrap_content"
                android:layout_weight="8"
                android:hint="发送消息" />
    
            <Button
                android:id="@+id/msgSend"
                style="?android:attr/buttonStyleSmall"
                android:layout_width="0dip"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:text="发送" />
        </LinearLayout>
    
    </RelativeLayout>

ListView适配器Adapter在每一次getView时候，首先判断view的type，然后根据不同的view type加载不同的布局view。

left.xml表示是对方说的消息在ListView界面的左边：

right.xml表示是自己说的消息，在消息聊天界面的右边：

另外，QQ、微信这些聊天消息界面的消息背景是一个气泡，这个气泡其实是一个.9.png图片，将这个气泡的.9.png作为TextView的背景衬图衬上去即可，QQ、微信的聊天气泡.9.png不是本文要着重探讨的内容，在次不再展开叙述。

附参考文章：  
《Android ListView Adapter的getItemViewType和getViewTypeCount多种布局》文章链接地址：[http://blog.csdn.net/zhangphil/article/details/46984367][http_blog.csdn.net_zhangphil_article_details_46984367]

《Android基于PinnedSectionListView实现联系人通讯录》文章链接地址：[http://blog.csdn.net/zhangphil/article/details/47271741][http_blog.csdn.net_zhangphil_article_details_47271741]

[Center]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/d959bc6b824943cc9eb016b4fc252fc2.png
[http_blog.csdn.net_zhangphil_article_details_46984367]: http://blog.csdn.net/zhangphil/article/details/46984367
[http_blog.csdn.net_zhangphil_article_details_47271741]: http://blog.csdn.net/zhangphil/article/details/47271741