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

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

       主界面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;}@Overridepublic int getCount() {//返回数据源中总的记录数目return chatMessages.size();}@Overridepublic Object getItem(int position) {//获得选择的数据源中某个项目的数据return chatMessages.get(position);}@Overridepublic 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的Adapterstatic 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);}// 设置adapterprivate 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我。