13-7-13 聊天窗口的绘制与实现

现在的位置: 首页 > 综合 > 正文

13-7-13 聊天窗口的绘制与实现

2013年12月09日 ⁄ 综合 ⁄ 共 7778字 ⁄ 字号小中大 ⁄ 评论关闭

聊天窗口是我们见的比较多的一种窗体，实现一方和另一方的交互。如何实现这个功能呢，这里我一一讲述。聊天讲求的是你来我往，你告诉我，我告诉你，又称礼尚往来。如果实现呢，那么我们第一步：搭建聊天界面：

主界面chatting.xml文件：

<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/chat_root"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/nav_page"
    android:focusable="false"
    android:focusableInTouchMode="false"
    android:gravity="center_horizontal"
    android:orientation="vertical" >

    <ListView
        android:id="@+id/chatting_history_lv"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1.0"
        android:background="@null"
        android:cacheColorHint="#00000000"
        android:divider="@null"
        android:listSelector="@drawable/mm_chat_listitem"
        android:scrollbars="vertical"
        android:transcriptMode="alwaysScroll" >
    </ListView>
   
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/txt_msg_bg"
        android:orientation="horizontal"
        android:paddingRight="7dp" >

        <ImageView
            android:id="@+id/sms_button_insert"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:paddingBottom="5.0dip"
            android:paddingLeft="15.0dip"
            android:paddingRight="7.0dip"
            android:paddingTop="5.0dip"
            android:src="@drawable/sms_insert" />

        <EditText
            android:id="@+id/text_editor"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginBottom="5.0dip"
            android:layout_marginLeft="7.0dip"
            android:layout_marginRight="7dp"
            android:layout_marginTop="5.0dip"
            android:layout_weight="1.0"
            android:autoText="true"
            android:background="@drawable/sms_embeded_text_editor_bg"
            android:capitalize="sentences"
            android:focusable="true"
            android:hint="输入消息"
            android:imeOptions="actionSend|flagNoEnterAction"
            android:inputType="textCapSentences|textAutoCorrect|textMultiLine|textShortMessage"
            android:maxLength="2000"
            android:maxLines="8"
            android:minHeight="34.0dip"
            android:nextFocusRight="@+id/send_button"
            android:textColorHint="@color/search_hint" />

        <Button 
        	android:gravity="center" 
        	android:layout_gravity="center_vertical" 
        	android:id="@+id/send_button" 
        	android:background="@drawable/sms_send_button_bg" 
        	android:paddingLeft="11.0dip" 
        	android:paddingRight="11.0dip" 
        	android:nextFocusLeft="@id/text_editor" 
        	android:layout_width="wrap_content" 
        	android:layout_height="wrap_content" />
     </LinearLayout>
</LinearLayout>

上面是主界面的一些配置，效果如下：

（2）搭建消息对话框

你说：

<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout 
	android:orientation="vertical" 
	android:paddingLeft="6.0dip" 
	android:paddingRight="6.0dip" 
	android:layout_width="fill_parent" 
	android:layout_height="wrap_content"
  	xmlns:android="http://schemas.android.com/apk/res/android">
    <TextView 
    	android:id="@+id/chatting_time_tv" 
    	style="@style/ChattingUISplit" />
    
    	 <TextView 
    	android:id="@+id/chatting_content_itv" 
    	android:autoLink="web" 
    	android:background="@drawable/chatfrom_bg" 
    	style="@style/ChattingUIText" />
</LinearLayout>

我说：

<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout android:orientation="vertical" android:paddingLeft="6.0dip" android:paddingRight="6.0dip" android:layout_width="fill_parent" android:layout_height="wrap_content"
  xmlns:android="http://schemas.android.com/apk/res/android">
    <TextView 
    	android:id="@+id/chatting_time_tv" 
    	style="@style/ChattingUISplit" />
    <LinearLayout 
    	android:orientation="horizontal" 
    	android:layout_width="fill_parent" 
    	android:layout_height="wrap_content">
        <TextView 
        	android:layout_width="wrap_content" 
        	android:layout_height="wrap_content" 
        	android:layout_weight="1.0" />
        <ImageView 
        	android:id="@+id/chatting_state_iv" 
        	android:layout_width="wrap_content" 
        	android:layout_height="wrap_content" />
        	 <TextView 
        	android:autoLink="web" 
        	android:id="@+id/chatting_content_itv" 
        	android:background="@drawable/chatto_bg" 
        	style="@style/ChattingUIText" />
    </LinearLayout>
</LinearLayout>

其中style也给贴上，主要是因为两个属性都是一样的，所以都在style中方便修改。

<style name="ChattingUISplit">
        <item name="android:textSize">13.0dip</item>
        <item name="android:textColor">#ff56616c</item>
        <item name="android:gravity">center_horizontal</item>
        <item name="android:background">@null</item>
        <item name="android:paddingTop">11.0dip</item>
        <item name="android:paddingBottom">6.0dip</item>
        <item name="android:visibility">gone</item>
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">wrap_content</item>
        
    </style>
    <style name="ChattingUIText">
        <item name="android:textSize">15.0dip</item>
        <item name="android:textColor">#ff000000</item>
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:maxWidth">200.0dip</item>
    </style>

效果为：

接下来就是使用程序去实现了，你说我说怎么样把内容放在界面上（绑定数据源工作），怎么区分是你说还是我说的话（定义一个类），怎样把咱俩的说话记录下来，留着下次看（数据库）这里这个不贴。

那么我们先完成第一个任务，数据源的绑定：

package cn.itcast.test.chat.adapter;

import java.util.List;

import cn.itcast.test.chat.R;


import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;

public class ChattingAdapter extends BaseAdapter {
	protected static final String TAG = "ChattingAdapter";
	private Context context;

	private List<ChatMessage> chatMessages;	//关联数据
											//析构函数
	public ChattingAdapter(Context context, List<ChatMessage> messages) {
		super();
		this.context = context;
		this.chatMessages = messages;

	}

	@Override
	public int getCount() {					//返回数据源中总的记录数目
		return chatMessages.size();
	}

	@Override
	public Object getItem(int position) {	//获得选择的数据源中某个项目的数据
		return chatMessages.get(position);	
	}

	@Override
	public long getItemId(int position) {	//获取数据源中的索引值
		return position;
	}

	@Override								//获取要展示的项目View对象
	public View getView(int position, View convertView, ViewGroup parent) {
		ViewHolder holder = null;
		ChatMessage message = chatMessages.get(position);
		if (convertView == null || (holder = (ViewHolder) convertView.getTag()).flag != message.getDirection()) {

			holder = new ViewHolder();
			if (message.getDirection() == ChatMessage.MESSAGE_FROM) {
				holder.flag = ChatMessage.MESSAGE_FROM;

				convertView = LayoutInflater.from(context).inflate(R.layout.chatting_item_from, null);
			} else {
				holder.flag = ChatMessage.MESSAGE_TO;
				convertView = LayoutInflater.from(context).inflate(R.layout.chatting_item_to, null);
			}

			holder.text = (TextView) convertView.findViewById(R.id.chatting_content_itv);
			convertView.setTag(holder);
		}
		holder.text.setText(message.getContent());

		return convertView;
	}
//优化listview的Adapter
	static class ViewHolder {
		TextView text;
		int flag;
	}

}

第二个区分谁说的话：

package cn.itcast.test.chat.adapter;

public class ChatMessage {

	public static final int MESSAGE_FROM = 0;
	public static final int MESSAGE_TO = 1;

	private int direction;
	private String content;

	public ChatMessage(int direction, String content) {
		super();
		this.direction = direction;
		this.content = content;
	}

	public int getDirection() {
		return direction;
	}

	public void setDirection(int direction) {
		this.direction = direction;
	}

	public void setContent(String content) {
		this.content = content;
	}

	public CharSequence getContent() {
		return content;
	}

}

第三使用数据源实现在主界面上显示

public void onCreate(Bundle savedInstanceState) {
		//requestWindowFeature(Window.FEATURE_CUSTOM_TITLE);//更改title请求
		super.onCreate(savedInstanceState);
		setContentView(R.layout.chatting);
		//getWindow().setFeatureInt(Window.FEATURE_CUSTOM_TITLE, R.layout.chatting_title_bar);
		
		chatHistoryLv = (ListView) findViewById(R.id.chatting_history_lv);
		setAdapterForThis();
		
		sendBtn = (Button) findViewById(R.id.send_button);
		textEditor = (EditText) findViewById(R.id.text_editor);
		sendBtn.setOnClickListener(l);

	}

	// 设置adapter
	private void setAdapterForThis() {
		initMessages();
		chatHistoryAdapter = new ChattingAdapter(this, messages);
		chatHistoryLv.setAdapter(chatHistoryAdapter);
	}

	// 为listView添加数据
	private void initMessages() {
		messages.add(new ChatMessage(ChatMessage.MESSAGE_FROM, "hello"));
		messages.add(new ChatMessage(ChatMessage.MESSAGE_TO, "hello"));
		messages.add(new ChatMessage(ChatMessage.MESSAGE_FROM, "welcome me blog:http://blog.csdn.net/feiyangxiaomi"));
	}

最后附上源码：

http://download.csdn.net/detail/feiyangxiaomi/5750351
代码也是从网上下的修改的，有问题可以MSG我。

【上篇】判断两线段是否相交
【下篇】带图标和自定义颜色的ListBox

作者: impasse

该日志由 impasse 于10年前发表在综合分类下，最后更新于 2013年12月09日.
转载请注明: 13-7-13 聊天窗口的绘制与实现 | 学步园 +复制链接

抱歉!评论已关闭.

学步园

13-7-13 聊天窗口的绘制与实现

作者: impasse

书签

最新文章New

本站推荐

返回首页