微信聊天窗口的信息效果类似iphone上的短信效果，以气泡的形式展现，在Android上，实现这种效果主要用到ListView和BaseAdapter，配合布局以及相关素材，就可以自己做出这个效果，素材可以下一个微信的APK，然后把后缀名改成zip，直接解压，就可以得到微信里面的所有素材了。首先看一下我实现的效果：
以下是工程目录结构：
接下来就是如何实现这个效果的代码：
main.xml，这个是主布局文件，显示listview和上下两部分内容。
[html]
view plain
copy
1. <?xml version="1.0" encoding="utf-8"?>
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="fill_parent"
4. android:layout_height="fill_parent"
5. android:background="#f0f0e0" >
6.
7. <RelativeLayout
8. android:id="@+id/rl_top"
9. android:layout_width="fill_parent"
10. android:layout_alignParentTop="true"
11. android:layout_height="wrap_content">
12. <TextView
13. android:layout_width="fill_parent"
14. android:layout_height="44dp"
15. android:gravity="center"
16. android:textSize="18sp"
17. android:background="#486a9a"
18. android:textColor="@android:color/white"
19. android:text="Chat"/>
20. </RelativeLayout>
21.
22. <RelativeLayout
23. android:id="@+id/rl_bottom"
24. android:layout_alignParentBottom="true"
25. android:layout_width="fill_parent"
26. android:background="#486a9a"
27. android:paddingTop="5dp"
28. android:layout_height="wrap_content">
29.
30. <Button
31. android:id="@+id/btn_send"
32. android:layout_width="70dp"
33. android:layout_height="50dp"
34. android:layout_alignParentRight="true"
35. android:layout_centerVertical="true"
36. android:layout_marginRight="10dp"
37. android:text="Send" />
38.
39. <EditText
40. android:id="@+id/et_content"
41. android:layout_width="fill_parent"
42. android:layout_height="50dp"
43. android:layout_centerVertical="true"
44. android:layout_marginLeft="10dp"
45. android:layout_marginRight="10dp"
46. android:layout_toLeftOf="@id/btn_send"
47. android:textSize="16sp"/>
48. </RelativeLayout>
49.
50. <ListView
51. android:id="@+id/listview"
52. android:layout_width="fill_parent"
53. android:layout_height="fill_parent"
54. android:layout_above="@id/rl_bottom"
55. android:layout_below="@id/rl_top"
56. android:layout_marginLeft="10dp"
57. android:layout_marginRight="10dp"
58. android:layout_marginTop="10dp"
59. android:cacheColorHint="#00000000"
60. android:divider="@null"
61. android:listSelector="#00000000"
62. android:dividerHeight="3dp"
63. android:scrollbars="none"/>
64.
65. </RelativeLayout>
然后就是listview中两种类型item的布局文件，分别是接收信息的item效果和发送信息的item效果
chat_from_item.xml是接收信息的item布局：
[html]
view plain
copy
1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="fill_parent"
4. android:orientation="vertical"
5. android:paddingBottom="5dp"
6. android:layout_height="wrap_content" >
7.
8. <TextView
9. android:id="@+id/tv_time"
10. android:layout_width="wrap_content"
11. android:layout_height="wrap_content"
12. android:layout_gravity="center_horizontal"
13. android:background="#bfbfbf"
14. android:paddingTop="2dp"
15. android:paddingBottom="2dp"
16. android:paddingLeft="4dp"
17. android:paddingRight="4dp"
18. android:textColor="#ffffff"
19. android:textSize="12sp" />
20.
21. <RelativeLayout
22. android:layout_width="fill_parent"
23. android:layout_height="wrap_content"
24. android:layout_marginTop="5dp" >
25.
26. <ImageView
27. android:id="@+id/iv_user_image"
28. android:layout_width="50dp"
29. android:layout_height="50dp"
30. android:layout_alignParentLeft="true"
31. android:layout_alignParentTop="true"
32. android:background="@drawable/mypic"
33. android:focusable="false" />
34.
35. <TextView
36. android:id="@+id/tv_content"
37. android:layout_width="wrap_content"
38. android:layout_height="wrap_content"
39. android:layout_marginLeft="5dp"
40. android:layout_toRightOf="@+id/iv_user_image"
41. android:background="@drawable/chatfrom_bg"
42. android:gravity="left|center"
43. android:clickable="true"
44. android:focusable="true"
45. android:lineSpacingExtra="2dp"
46. android:minHeight="50dp"
47. android:textColor="#ff000000"
48. android:textSize="14sp" />
49.
50. </RelativeLayout>
51.
52. </LinearLayout>
chat_to_item.xml是发送信息item的布局：
[html]
view plain
copy
1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="fill_parent"
4. android:orientation="vertical"
5. android:paddingBottom="5dp"
6. android:layout_height="wrap_content" >
7.
8. <TextView
9. android:id="@+id/tv_time"
10. android:layout_width="wrap_content"
11. android:layout_height="wrap_content"
12. android:background="#bfbfbf"
13. android:layout_gravity="center_horizontal"
14. android:paddingTop="2dp"
15. android:paddingBottom="2dp"
16. android:paddingLeft="4dp"
17. android:paddingRight="4dp"
18. android:textColor="#ffffff"
19. android:textSize="12sp" />
20.
21. <RelativeLayout
22. android:layout_width="fill_parent"
23. android:layout_height="wrap_content"
24. android:layout_marginTop="5dp" >
25.
26. <ImageView
27. android:id="@+id/iv_user_image"
28. android:layout_width="50dp"
29. android:layout_height="50dp"
30. android:layout_alignParentRight="true"
31. android:layout_alignParentTop="true"
32. android:background="@drawable/mypic"
33. android:focusable="false" />
34.
35. <TextView
36. android:id="@+id/tv_content"
37. android:layout_width="wrap_content"
38. android:layout_height="wrap_content"
39. android:layout_marginRight="5dp"
40. android:layout_toLeftOf="@+id/iv_user_image"
41. android:background="@drawable/chatto_bg"
42. android:gravity="left|center"
43. android:clickable="true"
44. android:focusable="true"
45. android:lineSpacingExtra="2dp"
46. android:textColor="#ff000000"
47. android:textSize="14sp" />
48.
49. </RelativeLayout>
50. </LinearLayout>
布局完成后新建一个实体类ChatEntity.java：
[java]
view plain
copy
1. public class ChatEntity {
2.
3. private int userImage;
4. private String content;
5. private String chatTime;
6. private boolean isComeMsg;
7.
8. public int getUserImage() {
9. return userImage;
10. }
11. public void setUserImage(int userImage) {
12. this.userImage = userImage;
13. }
14. public String getContent() {
15. return content;
16. }
17. public void setContent(String content) {
18. this.content = content;
19. }
20. public String getChatTime() {
21. return chatTime;
22. }
23. public void setChatTime(String chatTime) {
24. this.chatTime = chatTime;
25. }
26. public boolean isComeMsg() {
27. return isComeMsg;
28. }
29. public void setComeMsg(boolean isComeMsg) {
30. this.isComeMsg = isComeMsg;
31. }
32.
33. }
最后就是主Activity，这里面包括了自己写的BaseAdapter：
[java]
view plain
copy
1. public class ChatDemoActivity extends Activity {
2. private Button sendButton = null;
3. private EditText contentEditText = null;
4. private ListView chatListView = null;
5. private List<ChatEntity> chatList = null;
6. private ChatAdapter chatAdapter = null;
7.
8. @Override
9. public void onCreate(Bundle savedInstanceState) {
10. super.onCreate(savedInstanceState);
11. requestWindowFeature(Window.FEATURE_NO_TITLE);
12. setContentView(R.layout.main);
13.
14. this.findViewById(R.id.et_content);
15. this.findViewById(R.id.btn_send);
16. this.findViewById(R.id.listview);
17.
18. new ArrayList<ChatEntity>();
19. null;
20. for (int i = 0; i < 2; i++) {
21. new ChatEntity();
22. if (i % 2 == 0) {
23. false);
24. "Hello");
25. "2012-09-20 15:12:32");
26. else {
27. true);
28. "Hello,nice to meet you!");
29. "2012-09-20 15:13:32");
30. }
31. chatList.add(chatEntity);
32. }
33.
34. new ChatAdapter(this,chatList);
35. chatListView.setAdapter(chatAdapter);
36.
37. new OnClickListener() {
38.
39. @Override
40. public void onClick(View v) {
41. if (!contentEditText.getText().toString().equals("")) {
42. //发送消息
43. send();
44. else {
45. this, "Content is empty", Toast.LENGTH_SHORT).show();
46. }
47. }
48. });
49.
50. }
51.
52. private void send(){
53. new ChatEntity();
54. "2012-09-20 15:16:34");
55. chatEntity.setContent(contentEditText.getText().toString());
56. false);
57. chatList.add(chatEntity);
58. chatAdapter.notifyDataSetChanged();
59. 1);
60. "");
61. }
62.
63. private class ChatAdapter extends BaseAdapter{
64. private Context context = null;
65. private List<ChatEntity> chatList = null;
66. private LayoutInflater inflater = null;
67. private int COME_MSG = 0;
68. private int TO_MSG = 1;
69.
70. public ChatAdapter(Context context,List<ChatEntity> chatList){
71. this.context = context;
72. this.chatList = chatList;
73. this.context);
74. }
75.
76. @Override
77. public int getCount() {
78. return chatList.size();
79. }
80.
81. @Override
82. public Object getItem(int position) {
83. return chatList.get(position);
84. }
85.
86. @Override
87. public long getItemId(int position) {
88. return position;
89. }
90.
91. @Override
92. public int getItemViewType(int position) {
93. // 区别两种view的类型，标注两个不同的变量来分别表示各自的类型
94. ChatEntity entity = chatList.get(position);
95. if (entity.isComeMsg())
96. {
97. return COME_MSG;
98. else{
99. return TO_MSG;
100. }
101. }
102.
103. @Override
104. public int getViewTypeCount() {
105. // 这个方法默认返回1，如果希望listview的item都是一样的就返回1，我们这里有两种风格，返回2
106. return 2;
107. }
108.
109. @Override
110. public View getView(int position, View convertView, ViewGroup parent) {
111. null;
112. if (convertView == null) {
113. new ChatHolder();
114. if (chatList.get(position).isComeMsg()) {
115. null);
116. else {
117. null);
118. }
119. chatHolder.timeTextView = (TextView) convertView.findViewById(R.id.tv_time);
120. chatHolder.contentTextView = (TextView) convertView.findViewById(R.id.tv_content);
121. chatHolder.userImageView = (ImageView) convertView.findViewById(R.id.iv_user_image);
122. convertView.setTag(chatHolder);
123. else {
124. chatHolder = (ChatHolder)convertView.getTag();
125. }
126.
127. chatHolder.timeTextView.setText(chatList.get(position).getChatTime());
128. chatHolder.contentTextView.setText(chatList.get(position).getContent());
129. chatHolder.userImageView.setImageResource(chatList.get(position).getUserImage());
130.
131. return convertView;
132. }
133.
134. private class ChatHolder{
135. private TextView timeTextView;
136. private ImageView userImageView;
137. private TextView contentTextView;
138. }
139.
140. }
141. }
源代码下载：ChatDemo
