1.介绍：

本博客使用XListView模仿Android版QQ好友动态的ListView效果。效果截图如下：

效果图1

效果图2

这里面主要涉及的是ListView的布局问题，让我们看一下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:id="@+id/contacts_items"  
4. android:layout_width="fill_parent"  
5. android:layout_height="fill_parent"  
6. android:background="#ffffff"  
7. android:orientation="vertical" >  
8. <View  
9. android:id="@+id/topLine"  
10. android:layout_width="fill_parent"  
11. android:layout_height="1dp"  
12. android:background="#ffcccccc" />  
13. <LinearLayout  
14. android:layout_width="fill_parent"  
15. android:layout_height="wrap_content"  
16. android:layout_marginBottom="10dp"  
17. android:layout_marginTop="10dp"  
18. android:orientation="horizontal" >  
19. <ImageView  
20. android:id="@+id/imgHead"  
21. android:layout_width="40dp"  
22. android:layout_height="40dp"  
23. android:layout_marginLeft="5dp"  
24. android:layout_marginTop="5dp"  
25. android:src="@drawable/ic_launcher" />  
26. <LinearLayout  
27. android:layout_width="fill_parent"  
28. android:layout_height="wrap_content"  
29. android:layout_marginLeft="5dp"  
30. android:orientation="vertical" >  
31. <RelativeLayout  
32. android:layout_width="fill_parent"  
33. android:layout_height="wrap_content"  
34. android:layout_marginTop="2dp" >  
35. <TextView  
36. android:id="@+id/tvName"  
37. android:layout_width="wrap_content"  
38. android:layout_height="wrap_content"  
39. android:layout_alignParentLeft="true"  
40. android:layout_centerVertical="true"  
41. android:layout_gravity="center_vertical"  
42. android:singleLine="true"  
43. android:text="Tom"  
44. android:textSize="16.0sp" />  
45. <TextView  
46. android:id="@+id/tvDate"  
47. android:layout_width="wrap_content"  
48. android:layout_height="wrap_content"  
49. android:layout_alignParentRight="true"  
50. android:layout_centerVertical="true"  
51. android:layout_marginRight="0.2dip"  
52. android:layout_marginTop="0dip"  
53. android:ellipsize="end"  
54. android:singleLine="true"  
55. android:text="13:32"  
56. android:textColor="#ffcccccc"  
57. android:textSize="12sp" />  
58. </RelativeLayout>  
59. <TextView  
60. android:id="@+id/tvContent"  
61. android:layout_width="fill_parent"  
62. android:layout_height="wrap_content"  
63. android:paddingBottom="5dp"  
64. android:paddingTop="5dp"  
65. android:text="Hello world"  
66. android:textSize="14sp" >  
67. </TextView>  
68. <ImageView  
69. android:id="@+id/ivPhoto"  
70. android:layout_width="fill_parent"  
71. android:layout_height="wrap_content"  
72. android:layout_marginLeft="5dp"  
73. android:layout_marginRight="5dp"  
74. android:gravity="center"  
75. android:visibility="gone" />  
76. <RelativeLayout  
77. android:layout_width="fill_parent"  
78. android:layout_height="wrap_content"  
79. android:layout_marginTop="5dp" >  
80. <ImageView  
81. android:id="@+id/ivAddress"  
82. android:layout_width="wrap_content"  
83. android:layout_height="wrap_content"  
84. android:layout_alignParentLeft="true"  
85. android:layout_centerVertical="true"  
86. android:paddingLeft="2dp"  
87. android:src="@drawable/qzone_address_icon"  
88. android:visibility="gone" />  
89. <TextView  
90. android:id="@+id/tvAddress"  
91. android:layout_width="wrap_content"  
92. android:layout_height="wrap_content"  
93. android:layout_centerVertical="true"  
94. android:layout_toRightOf="@id/ivAddress"  
95. android:paddingLeft="5dp"  
96. android:textSize="10sp"  
97. android:visibility="gone" />  
98. </RelativeLayout>  
99. <RelativeLayout  
100. android:layout_width="fill_parent"  
101. android:layout_height="wrap_content"  
102. android:layout_marginTop="5dp" >  
103. <ImageView  
104. android:id="@+id/ivPhone"  
105. android:layout_width="wrap_content"  
106. android:layout_height="wrap_content"  
107. android:layout_alignParentLeft="true"  
108. android:layout_centerVertical="true"  
109. android:gravity="center"  
110. android:src="@drawable/status_phone" >  
111. </ImageView>  
112. <TextView  
113. android:id="@+id/tvPhonemodel"  
114. android:layout_width="wrap_content"  
115. android:layout_height="wrap_content"  
116. android:layout_centerVertical="true"  
117. android:layout_toRightOf="@id/ivPhone"  
118. android:paddingLeft="3dp"  
119. android:text="Nexus 5"  
120. android:textSize="10sp" />  
121. <TextView  
122. android:id="@+id/tvComment"  
123. android:layout_width="wrap_content"  
124. android:layout_height="wrap_content"  
125. android:layout_alignParentRight="true"  
126. android:layout_centerVertical="true"  
127. android:paddingLeft="2dp"  
128. android:text="评论"  
129. android:textSize="10sp" />  
130. <ImageView  
131. android:id="@+id/ivComment"  
132. android:layout_width="wrap_content"  
133. android:layout_height="wrap_content"  
134. android:layout_centerVertical="true"  
135. android:layout_toLeftOf="@id/tvComment"  
136. android:gravity="center"  
137. android:paddingLeft="20dp"  
138. android:src="@drawable/qzone_picviewer_bottom_comment_icon" >  
139. </ImageView>  
140. <TextView  
141. android:id="@+id/tvAgree"  
142. android:layout_width="wrap_content"  
143. android:layout_height="wrap_content"  
144. android:layout_centerVertical="true"  
145. android:layout_toLeftOf="@id/ivComment"  
146. android:text="赞"  
147. android:textSize="10sp" />  
148. <ImageView  
149. android:id="@+id/ivAgree"  
150. android:layout_width="wrap_content"  
151. android:layout_height="wrap_content"  
152. android:layout_centerVertical="true"  
153. android:layout_toLeftOf="@id/tvAgree"  
154. android:gravity="center"  
155. android:src="@drawable/qzone_picviewer_bottom_unpraise_icon" >  
156. </ImageView>  
157. </RelativeLayout>  
158. <RelativeLayout  
159. android:layout_width="fill_parent"  
160. android:layout_height="wrap_content"  
161. android:layout_marginTop="5dp" >  
162. <ImageView  
163. android:id="@+id/ivAgreeShow"  
164. android:layout_width="wrap_content"  
165. android:layout_height="wrap_content"  
166. android:layout_alignParentLeft="true"  
167. android:layout_centerVertical="true"  
168. android:contentDescription="@string/app_name"  
169. android:paddingLeft="2dp"  
170. android:src="@drawable/qzone_picviewer_bottom_praise_icon"  
171. android:visibility="gone" />  
172. <TextView  
173. android:id="@+id/tvAgreeShow"  
174. android:layout_width="wrap_content"  
175. android:layout_height="wrap_content"  
176. android:layout_centerVertical="true"  
177. android:layout_toRightOf="@id/ivAgreeShow"  
178. android:paddingLeft="5dp"  
179. android:visibility="gone" />  
180. </RelativeLayout>  
181. <RelativeLayout  
182. android:layout_width="fill_parent"  
183. android:layout_height="wrap_content"  
184. android:layout_marginTop="5dp" >  
185. <TextView  
186. android:id="@+id/tvComments"  
187. android:layout_width="wrap_content"  
188. android:layout_height="wrap_content"  
189. android:layout_centerVertical="true"  
190. android:paddingLeft="5dp"  
191. android:visibility="gone" />  
192. </RelativeLayout>  
193. <RelativeLayout  
194. android:layout_width="fill_parent"  
195. android:layout_height="wrap_content"  
196. android:layout_marginTop="5dp" >  
197. <Button  
198. android:id="@+id/btnSendComment"  
199. android:layout_width="wrap_content"  
200. android:layout_height="15dp"  
201. android:layout_alignParentRight="true"  
202. android:layout_centerVertical="true"  
203. android:layout_marginLeft="5dp"  
204. android:layout_marginRight="5dp"  
205. android:background="#00000000"  
206. android:focusable="false"  
207. android:text="发送"  
208. android:textSize="10sp"  
209. android:visibility="gone" />  
210. <Button  
211. android:id="@+id/btnComment"  
212. android:layout_width="fill_parent"  
213. android:layout_height="15dp"  
214. android:layout_alignParentLeft="true"  
215. android:layout_marginLeft="5dp"  
216. android:layout_marginRight="5dp"  
217. android:layout_toLeftOf="@id/btnSendComment"  
218. android:background="@drawable/btn_shape"  
219. android:hint="Please input your comment..."  
220. android:textSize="10sp" />  
221. </RelativeLayout>  
222. </LinearLayout>  
223. </LinearLayout>  
224. <View  
225. android:id="@+id/lastLine"  
226. android:layout_width="fill_parent"  
227. android:layout_height="1dp"  
228. android:background="#ff474745"  
229. android:visibility="gone" />  
230. </LinearLayout>  

另外一个就是Adapter：

[java]  view plain copy

1. /*
2.  * $filename: BaseAdapter1.java,v $
3.  * $Date: 2014-4-27  $
4.  * Copyright (C) ZhengHaibo, Inc. All rights reserved.
5.  * This software is Made by Zhenghaibo.
6.  */  
7. package edu.njupt.zhb.xlistviewtest;  
8.   
9. import java.util.ArrayList;  
10. import java.util.List;  
11.   
12. import android.annotation.TargetApi;  
13. import android.app.Activity;  
14. import android.content.Context;  
15. import android.graphics.BitmapFactory;  
16. import android.os.Build;  
17. import android.view.LayoutInflater;  
18. import android.view.View;  
19. import android.view.View.OnClickListener;  
20. import android.view.ViewGroup;  
21. import android.view.inputmethod.InputMethodManager;  
22. import android.widget.BaseAdapter;  
23. import android.widget.Button;  
24. import android.widget.EditText;  
25. import android.widget.GridView;  
26. import android.widget.ImageView;  
27. import android.widget.TextView;  
28.   
29. /*
30.  *@author: ZhengHaibo  
31.  *web:     http://blog.csdn.net/nuptboyzhb
32.  *mail:    zhb931706659@126.com
33.  *2014-4-27  Nanjing,njupt,China
34.  */  
35. @TargetApi(Build.VERSION_CODES.GINGERBREAD)  
36. public class XBaseAdapter extends BaseAdapter {  
37.   
38. private Context context;  
39.   
40. private Activity activity;  
41.   
42. private List<Model> listViewData;  
43.   
44. private int layoutResId;// ListView每个Item的布局文件  
45.   
46. public XBaseAdapter(Context context, int layoutResId, Activity activity) {  
47. this.context = context;  
48. this.layoutResId = layoutResId;  
49. new ArrayList<Model>();  
50. this.activity = activity;  
51.     }  
52.   
53. @Override  
54. public View getView(int position, View convertView, ViewGroup parent) {  
55.   
56.         Model model = listViewData.get(position);  
57. null;  
58. if (convertView == null) {  
59.             convertView = LayoutInflater.from(context).inflate(layoutResId,  
60. null);  
61. new ViewItemHolder();  
62.             viewItemHolder.imgHead = (ImageView) convertView  
63.                     .findViewById(R.id.imgHead);  
64.             viewItemHolder.tvName = (TextView) convertView  
65.                     .findViewById(R.id.tvName);  
66.             viewItemHolder.tvDate = (TextView) convertView  
67.                     .findViewById(R.id.tvDate);  
68.             viewItemHolder.tvContent = (TextView) convertView  
69.                     .findViewById(R.id.tvContent);  
70.             viewItemHolder.ivPhoto = (ImageView) convertView  
71.                     .findViewById(R.id.ivPhoto);  
72.             viewItemHolder.ivAddress = (ImageView) convertView  
73.                     .findViewById(R.id.ivAddress);  
74.             viewItemHolder.tvAddress = (TextView) convertView  
75.                     .findViewById(R.id.tvAddress);  
76.             viewItemHolder.tvPhonemodel = (TextView) convertView  
77.                     .findViewById(R.id.tvPhonemodel);  
78.             viewItemHolder.ivAgree = (ImageView) convertView  
79.                     .findViewById(R.id.ivAgree);  
80.             viewItemHolder.ivComment = (ImageView) convertView  
81.                     .findViewById(R.id.ivComment);  
82.             viewItemHolder.tvComment = (TextView) convertView  
83.                     .findViewById(R.id.tvComment);  
84.             viewItemHolder.ivAgreeShow = (ImageView) convertView  
85.                     .findViewById(R.id.ivAgreeShow);  
86.             viewItemHolder.tvAgreeShow = (TextView) convertView  
87.                     .findViewById(R.id.tvAgreeShow);  
88.             viewItemHolder.btnComment = (Button) convertView  
89.                     .findViewById(R.id.btnComment);  
90.             viewItemHolder.tvComments = (TextView) convertView  
91.                     .findViewById(R.id.tvComments);  
92.             convertView.setTag(viewItemHolder);  
93. else {  
94.             viewItemHolder = (ViewItemHolder) convertView.getTag();  
95.         }  
96.         viewItemHolder.imgHead.setImageBitmap(BitmapFactory.decodeResource(  
97.                 context.getResources(), model.getImgHead()));  
98.         viewItemHolder.tvName.setText(model.getName());  
99.         viewItemHolder.tvDate.setText(model.getDate());  
100.         viewItemHolder.tvContent.setText(model.getContent());  
101. if (model.getType() == FinalVar.MSG_IMAGE) {// 图片资源  
102.             viewItemHolder.ivPhoto.setImageResource(R.drawable.pic_screen);  
103.             viewItemHolder.ivPhoto.setVisibility(View.VISIBLE);  
104. else {  
105.             viewItemHolder.ivPhoto.setVisibility(View.GONE);  
106.         }  
107. if (!model.getAddress().isEmpty()) {  
108.             viewItemHolder.ivAddress.setVisibility(View.VISIBLE);  
109.             viewItemHolder.tvAddress.setVisibility(View.VISIBLE);  
110.             viewItemHolder.tvAddress.setText(model.getAddress());  
111. else {  
112.             viewItemHolder.ivAddress.setVisibility(View.GONE);  
113.             viewItemHolder.tvAddress.setVisibility(View.GONE);  
114.         }  
115.         viewItemHolder.tvPhonemodel.setText(model.getPhonemodel());  
116.         viewItemHolder.ivAgree  
117. new ListViewButtonOnClickListener(position));  
118. if (model.isAgree()) {  
119.             viewItemHolder.ivAgree  
120.                     .setImageResource(R.drawable.qzone_picviewer_bottom_praise_icon);  
121. else {  
122.             viewItemHolder.ivAgree  
123.                     .setImageResource(R.drawable.qzone_picviewer_bottom_unpraise_icon);  
124.         }  
125. false);  
126. if (null != model.getAgreeShow() && model.getAgreeShow().size() > 0) {  
127.             viewItemHolder.ivAgreeShow.setVisibility(View.VISIBLE);  
128.             viewItemHolder.tvAgreeShow.setVisibility(View.VISIBLE);  
129.             viewItemHolder.tvAgreeShow.setText(model.getAgreeShow().toString()  
130. "觉得很赞！");  
131. else {  
132.             viewItemHolder.ivAgreeShow.setVisibility(View.GONE);  
133.             viewItemHolder.tvAgreeShow.setVisibility(View.GONE);  
134.         }  
135.         viewItemHolder.ivComment  
136. new ListViewButtonOnClickListener(position));  
137. false);  
138.         viewItemHolder.tvComment  
139. new ListViewButtonOnClickListener(position));  
140.         viewItemHolder.btnComment  
141. new ListViewButtonOnClickListener(position));  
142. false);  
143. if (null != model.getComments() && model.getComments().size() > 0) {  
144.             viewItemHolder.tvComments.setVisibility(View.VISIBLE);  
145. "";  
146. for (String comment : model.getComments()) {  
147. "\n";  
148.             }  
149.             viewItemHolder.tvComments.setText(string);  
150. else {  
151.             viewItemHolder.tvComments.setVisibility(View.GONE);  
152.         }  
153. return convertView;  
154.     }  
155.   
156. @Override  
157. public long getItemId(int position) {  
158. // TODO Auto-generated method stub  
159. return position;  
160.     }  
161.   
162. @Override  
163. public Object getItem(int position) {  
164. // TODO Auto-generated method stub  
165. return listViewData.get(position);  
166.     }  
167.   
168. @Override  
169. public int getCount() {  
170. // TODO Auto-generated method stub  
171. if (null == listViewData) {  
172. return 0;  
173.         }  
174. return listViewData.size();  
175.     }  
176.   
177. /**
178.      * 添加一条记录
179.      * 
180.      * @param model
181.      */  
182. public void addModel(Model model) {  
183.         listViewData.add(model);  
184.     }  
185.   
186. /**
187.      * 添加一条记录
188.      * 
189.      * @param model
190.      * @param insertHead
191.      *            true:插入在头部
192.      */  
193. public void addModel(Model model, boolean insertHead) {  
194. if (insertHead) {  
195. 0, model);  
196. else {  
197.             listViewData.add(model);  
198.         }  
199.     }  
200.   
201. /**
202.      * 获取一条记录
203.      * 
204.      * @param i
205.      * @return
206.      */  
207. public Model getModel(int i) {  
208. if (i < 0 || i > listViewData.size() - 1) {  
209. return null;  
210.         }  
211. return listViewData.get(i);  
212.     }  
213.   
214. /**
215.      * 清除所有数据
216.      */  
217. public void clear() {  
218.         listViewData.clear();  
219.     }  
220.   
221. class ViewItemHolder {  
222.         ImageView imgHead;  
223.         TextView tvName;  
224.         TextView tvDate;  
225.         TextView tvContent;  
226.         ImageView ivPhoto;  
227.         ImageView ivAddress;  
228.         TextView tvAddress;  
229.         ImageView ivAgree;  
230.         TextView tvPhonemodel;  
231.         ImageView ivComment;  
232.         TextView tvComment;  
233.         ImageView ivAgreeShow;  
234.         TextView tvAgreeShow;  
235.         Button btnComment;  
236.         TextView tvComments;  
237.     }  
238.   
239. class ListViewButtonOnClickListener implements OnClickListener {  
240. private int position;// 记录ListView中Button所在的Item的位置  
241.   
242. public ListViewButtonOnClickListener(int position) {  
243. this.position = position;  
244.         }  
245.   
246. @Override  
247. public void onClick(View v) {  
248. switch (v.getId()) {  
249. case R.id.ivAgree:  
250.                 ImageView ivAgree = (ImageView) v;  
251.                 Model model = listViewData.get(position);  
252.                 List<String> agreeShow = model.getAgreeShow();  
253. if (null == agreeShow || agreeShow.size() <= 0) {  
254. new ArrayList<String>();  
255.                 }  
256. if (model.isAgree()) {  
257. "我");  
258.                     ivAgree.setImageResource(R.drawable.qzone_picviewer_bottom_unpraise_icon);  
259. else {  
260. "我");  
261.                     ivAgree.setImageResource(R.drawable.qzone_picviewer_bottom_praise_icon);  
262.                 }  
263.                 model.setAgree(!model.isAgree());  
264.                 model.setAgreeShow(agreeShow);  
265.                 notifyDataSetChanged();  
266. // Toast.makeText(context, "你点了赞", Toast.LENGTH_SHORT).show();  
267. break;  
268. case R.id.ivComment:  
269. case R.id.tvComment:  
270. case R.id.btnComment:  
271.                 InputMethodManager imm = (InputMethodManager) v.getContext()  
272.                         .getSystemService(Context.INPUT_METHOD_SERVICE);  
273. 0, InputMethodManager.SHOW_FORCED);  
274.                 Model model1 = listViewData.get(position);  
275.                 String nikename = model1.getName();  
276.                 activity.findViewById(R.id.etComment).setVisibility(  
277.                         View.VISIBLE);  
278.                 activity.findViewById(R.id.btnSendComment).setVisibility(  
279.                         View.VISIBLE);  
280. "@"  
281.                         + nikename);  
282. true);  
283.                 activity.findViewById(R.id.btnSendComment).setOnClickListener(  
284. new ListViewButtonOnClickListener(position));  
285. break;  
286. case R.id.btnSendComment:  
287.                 Model mdl = listViewData.get(position);  
288.                 List<String> commentsList = mdl.getComments();  
289.                 String commentString = ((EditText) activity  
290.                         .findViewById(R.id.etComment)).getEditableText()  
291.                         .toString();  
292. if (null == commentsList || commentsList.size() <= 0) {  
293. new ArrayList<String>();  
294.                 }  
295.                 commentsList.add(commentString);  
296.                 mdl.setComments(commentsList);  
297.                 notifyDataSetChanged();  
298. "");  
299.                 activity.findViewById(R.id.etComment).setVisibility(View.GONE);  
300.                 activity.findViewById(R.id.btnSendComment).setVisibility(  
301.                         View.GONE);  
302.                 InputMethodManager imm2 = (InputMethodManager) v.getContext()  
303.                         .getSystemService(Context.INPUT_METHOD_SERVICE);  
304. 0, InputMethodManager.HIDE_NOT_ALWAYS);  
305. break;  
306. default:  
307. break;  
308.             }  
309.         }  
310.     }  
311. }  

整个项目的源代码：

https://github.com/nuptboyzhb/XListViewQzone