大體的構造思路是這樣:整個界面采用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;
}
}
}