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

       主界面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>


 上面是主界面的一些配置,效果如下:

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

(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>


效果为:13-7-13 聊天窗口的绘制与实现_android_02

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

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

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"));
}