接上一節。上一節費了很大的力氣終於搭完了QQ的第二個界面（聯系人列表），今天講一下如何實現QQ聊天界面。這里首先有個好消息：QQ項目的Demo我已經上傳到網上啦，歡迎大家下載~網址：http://ishare.iask.sina.com.cn/f/67099260.html
本來以為這一個Activity的實現應該相當簡單，不料過程依舊十分曲折。不多說，先上最終效果圖：
大體的構造思路是這樣：整個界面采用RelativeLayout布局，標題欄自己是一個LinearLayout子布局，下面文本編輯框也是一個LinearLayout子布局，中間是一個自定義的ListView，關於自定義的ListView的使用方法見系列（六）,這里唯一特殊的地方時ListView中的子條目有兩種布局文件，“我”發出的信息對應一個布局文件，而對方發來的信息對應另一個布局文件。我們發出的信息存放在一個ArrayList<HashMap<>>中，在自定義的適配器的getView()方法中根據是誰發出的信息選擇相應的ListItem的布局文件即可。
這個Activity分析起來其實挺簡單，但有一個難點耗費了我一天的時間，不過先不着急吐槽，先上傳這次Activity的代碼：
activity_chat 布局文件：
<?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" > <LinearLayout android:layout_width="match_parent" android:layout_height="44dip" android:id="@+id/chat_title" android:layout_alignParentTop="true" android:background="@drawable/chat_title_layer"> <Button android:id="@+id/chat_msg_button" android:layout_width="match_parent" android:layout_height="36dip" android:layout_weight="1.9" android:layout_marginLeft="8dip" android:layout_marginTop="3dip" android:text="消息(0)" android:textColor="@android:color/white" android:textSize="7pt" android:background="@drawable/msg_button_back"/> <TextView android:id="@+id/chat_contact_name" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="1" android:text="龍行天下" android:textSize="8pt" android:textColor="@android:color/white" android:gravity="center" android:layout_gravity="center_vertical"/> <ImageButton android:id="@+id/chat_contact_button" android:layout_width="match_parent" android:layout_height="36dip" android:layout_weight="2" android:layout_marginRight="8dip" android:layout_marginTop="3dip" android:background="@drawable/chat_contact_back"/> </LinearLayout> <LinearLayout android:id="@+id/chat_bottom_linear" android:layout_width="match_parent" android:layout_height="42dip" android:background="@drawable/chat_title_layer" android:orientation="horizontal" android:layout_alignParentBottom="true" android:paddingTop="7dip" android:paddingBottom="3dip"> <ImageButton android:id="@+id/chat_bottom_look" android:layout_width="match_parent" android:layout_height="26dip" android:layout_weight="3.5" android:layout_marginLeft="7dip" android:layout_marginTop="3dip" android:background="@drawable/chat_bottom_look"/> <ImageButton android:id="@+id/chat_bottom_add" android:layout_width="match_parent" android:layout_height="26dip" android:layout_weight="3.5" android:layout_marginLeft="7dip" android:layout_marginTop="3dip" android:background="@drawable/chat_bottom_add"/> <EditText android:id="@+id/chat_bottom_edittext" android:layout_width="match_parent" android:layout_height="32dip" android:layout_marginLeft="5dip" android:layout_marginRight="7dip" android:layout_weight="1.5" android:background="@drawable/edit_fillet_shape"/> <Button android:id="@+id/chat_bottom_sendbutton" android:layout_width="match_parent" android:layout_height="26dip" android:layout_weight="3.2" android:layout_marginRight="4dip" android:layout_marginBottom="3dip" android:background="@drawable/chat_button_fillet_shape" android:text="發送" android:textColor="@android:color/white"/>" </LinearLayout> <ListView android:id="@+id/chat_list" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/chat_title" android:layout_above="@id/chat_bottom_linear" android:fadingEdge="none" android:background="#f0f0f0" android:divider="#aaaaaa" android:dividerHeight="0px"> </ListView> </RelativeLayout>
“我”發出的信息對應的子條目的布局文件：
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#f0f0f0" android:paddingLeft="80dip" android:paddingRight="8dip" android:paddingBottom="10dip" android:paddingTop="10dip"> <ImageView android:id="@+id/chatlist_image_me" android:layout_width="40dip" android:layout_height="40dip" android:layout_marginLeft="5dip" android:layout_alignParentRight="true" android:background="@drawable/contact_3"/> <TextView android:id="@+id/chatlist_text_me" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toLeftOf="@id/chatlist_image_me" android:layout_alignTop="@id/chatlist_image_me" android:text="會忽悠了gyughiulhlluihui過" android:background="@drawable/balloon_back_right" android:paddingTop="13dip" android:paddingBottom="18dip" /> </RelativeLayout>
“對方”發出的信息對應的布局文件：
<?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="wrap_content" android:background="#f0f0f0" android:paddingRight="80dip" android:paddingLeft="8dip" android:paddingBottom="10dip" android:paddingTop="10dip"> <ImageView android:id="@+id/chatlist_image_other" android:layout_width="40dip" android:layout_height="40dip" android:layout_marginRight="5dip" android:layout_alignParentLeft="true" android:background="@drawable/contact_3"/> <TextView android:id="@+id/chatlist_text_other" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toRightOf="@id/chatlist_image_other" android:layout_alignTop="@id/chatlist_image_other" android:text="hewdfb" android:background="@drawable/balloon_back_left" android:paddingTop="13dip" android:paddingBottom="18dip" /> </RelativeLayout>
這里遇到了一個問題：即兩個布局文件中的空間能不能共用同一個id?答案是不能，因為ListView在繪制的過程中會反復調用findViewById()方法，共用ID會導致顯示混亂，即對應錯位。
然后就是ChatActivity了
package com.example.android_qqfix; import android.app.Activity; import android.content.Context; import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.view.View.OnClickListener; import android.view.ViewGroup; import android.view.Window; import android.widget.*; import java.util.*; public class ChatActivity extends Activity{ ArrayList<HashMap<String,Object>> chatList=null; String[] from={"image","text"}; int[] to={R.id.chatlist_image_me,R.id.chatlist_text_me,R.id.chatlist_image_other,R.id.chatlist_text_other}; int[] layout={R.layout.chat_listitem_me,R.layout.chat_listitem_other}; String userQQ=null; /** * 這里兩個布局文件使用了同一個id，測試一下是否管用 * TT事實證明這回產生id的匹配異常！所以還是要分開。。 * * userQQ用於接收Intent傳遞的qq號，進而用來調用數據庫中的相關的聯系人信息，這里先不講 * 先暫時使用一個頭像 */ public final static int OTHER=1; public final static int ME=0; protected ListView chatListView=null; protected Button chatSendButton=null; protected EditText editText=null; protected MyChatAdapter adapter=null; @Override protected void onCreate(Bundle savedInstanceState) { // TODO Auto-generated method stub super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE); setContentView(R.layout.activity_chat); chatList=new ArrayList<HashMap<String,Object>>(); addTextToList("不管你是誰", ME); addTextToList("群發的我不回\n ^_^", OTHER); addTextToList("哈哈哈哈", ME); addTextToList("新年快樂！", OTHER); chatSendButton=(Button)findViewById(R.id.chat_bottom_sendbutton); editText=(EditText)findViewById(R.id.chat_bottom_edittext); chatListView=(ListView)findViewById(R.id.chat_list); adapter=new MyChatAdapter(this,chatList,layout,from,to); chatSendButton.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { // TODO Auto-generated method stub String myWord=null; /** * 這是一個發送消息的監聽器，注意如果文本框中沒有內容，那么getText()的返回值可能為 * null，這時調用toString()會有異常！所以這里必須在后面加上一個""隱式轉換成String實例 * ，並且不能發送空消息。 */ myWord=(editText.getText()+"").toString(); if(myWord.length()==0) return; editText.setText(""); addTextToList(myWord, ME); /** * 更新數據列表，並且通過setSelection方法使ListView始終滾動在最底端 */ adapter.notifyDataSetChanged(); chatListView.setSelection(chatList.size()-1); } }); chatListView.setAdapter(adapter); } protected void addTextToList(String text, int who){ HashMap<String,Object> map=new HashMap<String,Object>(); map.put("person",who ); map.put("image", who==ME?R.drawable.contact_0:R.drawable.contact_1); map.put("text", text); chatList.add(map); } private class MyChatAdapter extends BaseAdapter{ Context context=null; ArrayList<HashMap<String,Object>> chatList=null; int[] layout; String[] from; int[] to; public MyChatAdapter(Context context, ArrayList<HashMap<String, Object>> chatList, int[] layout, String[] from, int[] to) { super(); this.context = context; this.chatList = chatList; this.layout = layout; this.from = from; this.to = to; } @Override public int getCount() { // TODO Auto-generated method stub return chatList.size(); } @Override public Object getItem(int arg0) { // TODO Auto-generated method stub return null; } @Override public long getItemId(int position) { // TODO Auto-generated method stub return position; } class ViewHolder{ public ImageView imageView=null; public TextView textView=null; } @Override public View getView(int position, View convertView, ViewGroup parent) { // TODO Auto-generated method stub ViewHolder holder=null; int who=(Integer)chatList.get(position).get("person"); convertView= LayoutInflater.from(context).inflate( layout[who==ME?0:1], null); holder=new ViewHolder(); holder.imageView=(ImageView)convertView.findViewById(to[who*2+0]); holder.textView=(TextView)convertView.findViewById(to[who*2+1]); System.out.println(holder); System.out.println("WHYWHYWHYWHYW"); System.out.println(holder.imageView); holder.imageView.setBackgroundResource((Integer)chatList.get(position).get(from[0])); holder.textView.setText(chatList.get(position).get(from[1]).toString()); return convertView; } } }
最后吐槽一下本節遇到的最大的問題： 聊天界面的氣泡效果是如何實現的？ 我之前嘗試了使用layer-list實現，但是效果不太理想。經過查資料並解壓了QQ的安裝包，發現是通過E:\android\source\android-sdk-windows\sdk\tools文件夾下的draw9patch.bat程序將普通的 png圖片轉換成特殊處理的 .9.png格式的圖片，這樣的圖片做背景便可以自動適應空間的大小，並且可以自定義圖片拉伸的區域，這種圖片做背景放大縮小時不會失真。最新版QQ中各式各樣的氣泡背景全部是通過9.png格式的圖片實現的。關於如何制作9.png圖片我不再贅述，附上一個鏈接：http://blog.csdn.net/pugongying1988/article/details/6938972，這里面講的還可以，另外還有設置可拉伸區域與不可拉伸區域的一些技巧，需要在動手過程中摸索。
另外，若在編譯本節的Activity時出現了 "appt.exe意外停止"的提示，很可能就是自己制作的9.png圖片異常導致 R.java文件中的資源地址混亂，這時只能重建工程了。
至此，QQ界面開發可能要暫停一段時間了。假期也快要結束，需要轉換狀態，面對新的學期新的挑戰了。當然我對Android開發的興趣仍然在，以后有時間還會繼續學習下去，博客也會不定期的更新。當然，仿別人的 程序只能算一種練習，我希望能夠有機會做一些有商業價值或者實用價值的軟件出來，也非常希望有共同愛好的朋友們能夠來一起交流^^