Android教程網
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> 關於Android編程 >> Android開發系列(十四) QQ聊天界面——QQ氣泡效果與ListView

Android開發系列(十四) QQ聊天界面——QQ氣泡效果與ListView

編輯:關於Android編程

  大體的構造思路是這樣:整個界面采用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;         }              }             }
  1. 上一頁:
  2. 下一頁:
熱門文章
閱讀排行版
Copyright © Android教程網 All Rights Reserved