Android:仿手机QQ好友动态的ListView

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.         listViewData = 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.         ViewItemHolder viewItemHolder = null;  
58.         if (convertView == null) {  
59.             convertView = LayoutInflater.from(context).inflate(layoutResId,  
60.                     null);  
61.             viewItemHolder = 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.                 .setOnClickListener(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.         viewItemHolder.ivAgree.setFocusable(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.                 .setOnClickListener(new ListViewButtonOnClickListener(position));  
137.         viewItemHolder.ivComment.setFocusable(false);  
138.         viewItemHolder.tvComment  
139.                 .setOnClickListener(new ListViewButtonOnClickListener(position));  
140.         viewItemHolder.btnComment  
141.                 .setOnClickListener(new ListViewButtonOnClickListener(position));  
142.         viewItemHolder.btnComment.setFocusable(false);  
143.         if (null != model.getComments() && model.getComments().size() > 0) {  
144.             viewItemHolder.tvComments.setVisibility(View.VISIBLE);  
145.             String string = "";  
146.             for (String comment : model.getComments()) {  
147.                 string += comment + "\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.             listViewData.add(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.                     agreeShow = new ArrayList<String>();  
255.                 }  
256.                 if (model.isAgree()) {  
257.                     agreeShow.remove("我");  
258.                     ivAgree.setImageResource(R.drawable.qzone_picviewer_bottom_unpraise_icon);  
259.                 } else {  
260.                     agreeShow.add("我");  
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.                 imm.toggleSoftInput(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.                 ((EditText) activity.findViewById(R.id.etComment)).setHint("@"  
281.                         + nikename);  
282.                 activity.findViewById(R.id.etComment).setFocusable(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.                     commentsList = new ArrayList<String>();  
294.                 }  
295.                 commentsList.add(commentString);  
296.                 mdl.setComments(commentsList);  
297.                 notifyDataSetChanged();  
298.                 ((EditText) activity.findViewById(R.id.etComment)).setText("");  
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.                 imm2.toggleSoftInput(0, InputMethodManager.HIDE_NOT_ALWAYS);  
305.                 break;  
306.             default:  
307.                 break;  
308.             }  
309.         }  
310.     }  
311. }  

整个项目的源代码： https://github.com/nuptboyzhb/XListViewQzone