Android:仿手机QQ朋友动态ListView

1.介绍：

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

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbnVwdDEyMzQ1Njc4OQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />

效果图1

效果图2

这里面主要涉及的是ListView的布局问题，让我们看一下Item的布局文件吧。

<?

xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:id="@+id/contacts_items"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:background="#ffffff"

    android:orientation="vertical" >

    <View

        android:id="@+id/topLine"

        android:layout_width="fill_parent"

        android:layout_height="1dp"

        android:background="#ffcccccc" />

    <LinearLayout

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:layout_marginBottom="10dp"

        android:layout_marginTop="10dp"

        android:orientation="horizontal" >

        <ImageView

            android:id="@+id/imgHead"

            android:layout_width="40dp"

            android:layout_height="40dp"

            android:layout_marginLeft="5dp"

            android:layout_marginTop="5dp"

            android:src="@drawable/ic_launcher" />

        <LinearLayout

            android:layout_width="fill_parent"

            android:layout_height="wrap_content"

            android:layout_marginLeft="5dp"

            android:orientation="vertical" >

            <RelativeLayout

                android:layout_width="fill_parent"

                android:layout_height="wrap_content"

                android:layout_marginTop="2dp" >

                <TextView

                    android:id="@+id/tvName"

                    android:layout_width="wrap_content"

                    android:layout_height="wrap_content"

                    android:layout_alignParentLeft="true"

                    android:layout_centerVertical="true"

                    android:layout_gravity="center_vertical"

                    android:singleLine="true"

                    android:text="Tom"

                    android:textSize="16.0sp" />

                <TextView

                    android:id="@+id/tvDate"

                    android:layout_width="wrap_content"

                    android:layout_height="wrap_content"

                    android:layout_alignParentRight="true"

                    android:layout_centerVertical="true"

                    android:layout_marginRight="0.2dip"

                    android:layout_marginTop="0dip"

                    android:ellipsize="end"

                    android:singleLine="true"

                    android:text="13:32"

                    android:textColor="#ffcccccc"

                    android:textSize="12sp" />

            </RelativeLayout>

            <TextView

                android:id="@+id/tvContent"

                android:layout_width="fill_parent"

                android:layout_height="wrap_content"

                android:paddingBottom="5dp"

                android:paddingTop="5dp"

                android:text="Hello world"

                android:textSize="14sp" >

            </TextView>

            <ImageView

                android:id="@+id/ivPhoto"

                android:layout_width="fill_parent"

                android:layout_height="wrap_content"

                android:layout_marginLeft="5dp"

                android:layout_marginRight="5dp"

                android:gravity="center"

                android:visibility="gone" />

            <RelativeLayout

                android:layout_width="fill_parent"

                android:layout_height="wrap_content"

                android:layout_marginTop="5dp" >

                <ImageView

                    android:id="@+id/ivAddress"

                    android:layout_width="wrap_content"

                    android:layout_height="wrap_content"

                    android:layout_alignParentLeft="true"

                    android:layout_centerVertical="true"

                    android:paddingLeft="2dp"

                    android:src="@drawable/qzone_address_icon"

                    android:visibility="gone" />

                <TextView

                    android:id="@+id/tvAddress"

                    android:layout_width="wrap_content"

                    android:layout_height="wrap_content"

                    android:layout_centerVertical="true"

                    android:layout_toRightOf="@id/ivAddress"

                    android:paddingLeft="5dp"

                    android:textSize="10sp"

                    android:visibility="gone" />

            </RelativeLayout>

            <RelativeLayout

                android:layout_width="fill_parent"

                android:layout_height="wrap_content"

                android:layout_marginTop="5dp" >

                <ImageView

                    android:id="@+id/ivPhone"

                    android:layout_width="wrap_content"

                    android:layout_height="wrap_content"

                    android:layout_alignParentLeft="true"

                    android:layout_centerVertical="true"

                    android:gravity="center"

                    android:src="@drawable/status_phone" >

                </ImageView>

                <TextView

                    android:id="@+id/tvPhonemodel"

                    android:layout_width="wrap_content"

                    android:layout_height="wrap_content"

                    android:layout_centerVertical="true"

                    android:layout_toRightOf="@id/ivPhone"

                    android:paddingLeft="3dp"

                    android:text="Nexus 5"

                    android:textSize="10sp" />

                <TextView

                    android:id="@+id/tvComment"

                    android:layout_width="wrap_content"

                    android:layout_height="wrap_content"

                    android:layout_alignParentRight="true"

                    android:layout_centerVertical="true"

                    android:paddingLeft="2dp"

                    android:text="评论"

                    android:textSize="10sp" />

                <ImageView

                    android:id="@+id/ivComment"

                    android:layout_width="wrap_content"

                    android:layout_height="wrap_content"

                    android:layout_centerVertical="true"

                    android:layout_toLeftOf="@id/tvComment"

                    android:gravity="center"

                    android:paddingLeft="20dp"

                    android:src="@drawable/qzone_picviewer_bottom_comment_icon" >

                </ImageView>

                <TextView

                    android:id="@+id/tvAgree"

                    android:layout_width="wrap_content"

                    android:layout_height="wrap_content"

                    android:layout_centerVertical="true"

                    android:layout_toLeftOf="@id/ivComment"

                    android:text="赞"

                    android:textSize="10sp" />

                <ImageView

                    android:id="@+id/ivAgree"

                    android:layout_width="wrap_content"

                    android:layout_height="wrap_content"

                    android:layout_centerVertical="true"

                    android:layout_toLeftOf="@id/tvAgree"

                    android:gravity="center"

                    android:src="@drawable/qzone_picviewer_bottom_unpraise_icon" >

                </ImageView>

            </RelativeLayout>

            <RelativeLayout

                android:layout_width="fill_parent"

                android:layout_height="wrap_content"

                android:layout_marginTop="5dp" >

                <ImageView

                    android:id="@+id/ivAgreeShow"

                    android:layout_width="wrap_content"

                    android:layout_height="wrap_content"

                    android:layout_alignParentLeft="true"

                    android:layout_centerVertical="true"

                    android:contentDescription="@string/app_name"

                    android:paddingLeft="2dp"

                    android:src="@drawable/qzone_picviewer_bottom_praise_icon"

                    android:visibility="gone" />

                <TextView

                    android:id="@+id/tvAgreeShow"

                    android:layout_width="wrap_content"

                    android:layout_height="wrap_content"

                    android:layout_centerVertical="true"

                    android:layout_toRightOf="@id/ivAgreeShow"

                    android:paddingLeft="5dp"

                    android:visibility="gone" />

            </RelativeLayout>

            <RelativeLayout

                android:layout_width="fill_parent"

                android:layout_height="wrap_content"

                android:layout_marginTop="5dp" >

                <TextView

                    android:id="@+id/tvComments"

                    android:layout_width="wrap_content"

                    android:layout_height="wrap_content"

                    android:layout_centerVertical="true"

                    android:paddingLeft="5dp"

                    android:visibility="gone" />

            </RelativeLayout>

            <RelativeLayout

                android:layout_width="fill_parent"

                android:layout_height="wrap_content"

                android:layout_marginTop="5dp" >

                <Button

                    android:id="@+id/btnSendComment"

                    android:layout_width="wrap_content"

                    android:layout_height="15dp"

                    android:layout_alignParentRight="true"

                    android:layout_centerVertical="true"

                    android:layout_marginLeft="5dp"

                    android:layout_marginRight="5dp"

                    android:background="#00000000"

                    android:focusable="false"

                    android:text="发送"

                    android:textSize="10sp"

                    android:visibility="gone" />

                <Button

                    android:id="@+id/btnComment"

                    android:layout_width="fill_parent"

                    android:layout_height="15dp"

                    android:layout_alignParentLeft="true"

                    android:layout_marginLeft="5dp"

                    android:layout_marginRight="5dp"

                    android:layout_toLeftOf="@id/btnSendComment"

                    android:background="@drawable/btn_shape"

                    android:hint="Please input your comment..."

                    android:textSize="10sp" />

            </RelativeLayout>

        </LinearLayout>

    </LinearLayout>

    <View

        android:id="@+id/lastLine"

        android:layout_width="fill_parent"

        android:layout_height="1dp"

        android:background="#ff474745"

        android:visibility="gone" />

</LinearLayout>

另外一个就是Adapter：

/*

 * $filename: BaseAdapter1.java,v $

 * $Date: 2014-4-27  $

 * Copyright (C) ZhengHaibo, Inc. All rights reserved.

 * This software is Made by Zhenghaibo.

 */

package edu.njupt.zhb.xlistviewtest;

import java.util.ArrayList;

import java.util.List;

import android.annotation.TargetApi;

import android.app.Activity;

import android.content.Context;

import android.graphics.BitmapFactory;

import android.os.Build;

import android.view.LayoutInflater;

import android.view.View;

import android.view.View.OnClickListener;

import android.view.ViewGroup;

import android.view.inputmethod.InputMethodManager;

import android.widget.BaseAdapter;

import android.widget.Button;

import android.widget.EditText;

import android.widget.GridView;

import android.widget.ImageView;

import android.widget.TextView;

/*

 *@author: ZhengHaibo

 *web:     http://blog.csdn.net/nuptboyzhb

 *mail:    [email protected]

 *2014-4-27  Nanjing,njupt,China

 */

@TargetApi(Build.VERSION_CODES.GINGERBREAD)

public class XBaseAdapter extends BaseAdapter {

	private Context context;

	private Activity activity;

	private List<Model> listViewData;

	private int layoutResId;// ListView每一个Item的布局文件

	public XBaseAdapter(Context context, int layoutResId, Activity activity) {

		this.context = context;

		this.layoutResId = layoutResId;

		listViewData = new ArrayList<Model>();

		this.activity = activity;

	}

	@Override

	public View getView(int position, View convertView, ViewGroup parent) {

		Model model = listViewData.get(position);

		ViewItemHolder viewItemHolder = null;

		if (convertView == null) {

			convertView = LayoutInflater.from(context).inflate(layoutResId,

					null);

			viewItemHolder = new ViewItemHolder();

			viewItemHolder.imgHead = (ImageView) convertView

					.findViewById(R.id.imgHead);

			viewItemHolder.tvName = (TextView) convertView

					.findViewById(R.id.tvName);

			viewItemHolder.tvDate = (TextView) convertView

					.findViewById(R.id.tvDate);

			viewItemHolder.tvContent = (TextView) convertView

					.findViewById(R.id.tvContent);

			viewItemHolder.ivPhoto = (ImageView) convertView

					.findViewById(R.id.ivPhoto);

			viewItemHolder.ivAddress = (ImageView) convertView

					.findViewById(R.id.ivAddress);

			viewItemHolder.tvAddress = (TextView) convertView

					.findViewById(R.id.tvAddress);

			viewItemHolder.tvPhonemodel = (TextView) convertView

					.findViewById(R.id.tvPhonemodel);

			viewItemHolder.ivAgree = (ImageView) convertView

					.findViewById(R.id.ivAgree);

			viewItemHolder.ivComment = (ImageView) convertView

					.findViewById(R.id.ivComment);

			viewItemHolder.tvComment = (TextView) convertView

					.findViewById(R.id.tvComment);

			viewItemHolder.ivAgreeShow = (ImageView) convertView

					.findViewById(R.id.ivAgreeShow);

			viewItemHolder.tvAgreeShow = (TextView) convertView

					.findViewById(R.id.tvAgreeShow);

			viewItemHolder.btnComment = (Button) convertView

					.findViewById(R.id.btnComment);

			viewItemHolder.tvComments = (TextView) convertView

					.findViewById(R.id.tvComments);

			convertView.setTag(viewItemHolder);

		} else {

			viewItemHolder = (ViewItemHolder) convertView.getTag();

		}

		viewItemHolder.imgHead.setImageBitmap(BitmapFactory.decodeResource(

				context.getResources(), model.getImgHead()));

		viewItemHolder.tvName.setText(model.getName());

		viewItemHolder.tvDate.setText(model.getDate());

		viewItemHolder.tvContent.setText(model.getContent());

		if (model.getType() == FinalVar.MSG_IMAGE) {// 图片资源

			viewItemHolder.ivPhoto.setImageResource(R.drawable.pic_screen);

			viewItemHolder.ivPhoto.setVisibility(View.VISIBLE);

		} else {

			viewItemHolder.ivPhoto.setVisibility(View.GONE);

		}

		if (!model.getAddress().isEmpty()) {

			viewItemHolder.ivAddress.setVisibility(View.VISIBLE);

			viewItemHolder.tvAddress.setVisibility(View.VISIBLE);

			viewItemHolder.tvAddress.setText(model.getAddress());

		} else {

			viewItemHolder.ivAddress.setVisibility(View.GONE);

			viewItemHolder.tvAddress.setVisibility(View.GONE);

		}

		viewItemHolder.tvPhonemodel.setText(model.getPhonemodel());

		viewItemHolder.ivAgree

				.setOnClickListener(new ListViewButtonOnClickListener(position));

		if (model.isAgree()) {

			viewItemHolder.ivAgree

					.setImageResource(R.drawable.qzone_picviewer_bottom_praise_icon);

		} else {

			viewItemHolder.ivAgree

					.setImageResource(R.drawable.qzone_picviewer_bottom_unpraise_icon);

		}

		viewItemHolder.ivAgree.setFocusable(false);

		if (null != model.getAgreeShow() && model.getAgreeShow().size() > 0) {

			viewItemHolder.ivAgreeShow.setVisibility(View.VISIBLE);

			viewItemHolder.tvAgreeShow.setVisibility(View.VISIBLE);

			viewItemHolder.tvAgreeShow.setText(model.getAgreeShow().toString()

					+ "认为非常赞！");

		} else {

			viewItemHolder.ivAgreeShow.setVisibility(View.GONE);

			viewItemHolder.tvAgreeShow.setVisibility(View.GONE);

		}

		viewItemHolder.ivComment

				.setOnClickListener(new ListViewButtonOnClickListener(position));

		viewItemHolder.ivComment.setFocusable(false);

		viewItemHolder.tvComment

				.setOnClickListener(new ListViewButtonOnClickListener(position));

		viewItemHolder.btnComment

				.setOnClickListener(new ListViewButtonOnClickListener(position));

		viewItemHolder.btnComment.setFocusable(false);

		if (null != model.getComments() && model.getComments().size() > 0) {

			viewItemHolder.tvComments.setVisibility(View.VISIBLE);

			String string = "";

			for (String comment : model.getComments()) {

				string += comment + "\n";

			}

			viewItemHolder.tvComments.setText(string);

		} else {

			viewItemHolder.tvComments.setVisibility(View.GONE);

		}

		return convertView;

	}

	@Override

	public long getItemId(int position) {

		// TODO Auto-generated method stub

		return position;

	}

	@Override

	public Object getItem(int position) {

		// TODO Auto-generated method stub

		return listViewData.get(position);

	}

	@Override

	public int getCount() {

		// TODO Auto-generated method stub

		if (null == listViewData) {

			return 0;

		}

		return listViewData.size();

	}

	/**

	 * 加入一条记录

	 *

	 * @param model

	 */

	public void addModel(Model model) {

		listViewData.add(model);

	}

	/**

	 * 加入一条记录

	 *

	 * @param model

	 * @param insertHead

	 *            true:插入在头部

	 */

	public void addModel(Model model, boolean insertHead) {

		if (insertHead) {

			listViewData.add(0, model);

		} else {

			listViewData.add(model);

		}

	}

	/**

	 * 获取一条记录

	 *

	 * @param i

	 * @return

	 */

	public Model getModel(int i) {

		if (i < 0 || i > listViewData.size() - 1) {

			return null;

		}

		return listViewData.get(i);

	}

	/**

	 * 清除全部数据

	 */

	public void clear() {

		listViewData.clear();

	}

	class ViewItemHolder {

		ImageView imgHead;

		TextView tvName;

		TextView tvDate;

		TextView tvContent;

		ImageView ivPhoto;

		ImageView ivAddress;

		TextView tvAddress;

		ImageView ivAgree;

		TextView tvPhonemodel;

		ImageView ivComment;

		TextView tvComment;

		ImageView ivAgreeShow;

		TextView tvAgreeShow;

		Button btnComment;

		TextView tvComments;

	}

	class ListViewButtonOnClickListener implements OnClickListener {

		private int position;// 记录ListView中Button所在的Item的位置

		public ListViewButtonOnClickListener(int position) {

			this.position = position;

		}

		@Override

		public void onClick(View v) {

			switch (v.getId()) {

			case R.id.ivAgree:

				ImageView ivAgree = (ImageView) v;

				Model model = listViewData.get(position);

				List<String> agreeShow = model.getAgreeShow();

				if (null == agreeShow || agreeShow.size() <= 0) {

					agreeShow = new ArrayList<String>();

				}

				if (model.isAgree()) {

					agreeShow.remove("我");

					ivAgree.setImageResource(R.drawable.qzone_picviewer_bottom_unpraise_icon);

				} else {

					agreeShow.add("我");

					ivAgree.setImageResource(R.drawable.qzone_picviewer_bottom_praise_icon);

				}

				model.setAgree(!model.isAgree());

				model.setAgreeShow(agreeShow);

				notifyDataSetChanged();

				// Toast.makeText(context, "你点了赞", Toast.LENGTH_SHORT).show();

				break;

			case R.id.ivComment:

			case R.id.tvComment:

			case R.id.btnComment:

				InputMethodManager imm = (InputMethodManager) v.getContext()

						.getSystemService(Context.INPUT_METHOD_SERVICE);

				imm.toggleSoftInput(0, InputMethodManager.SHOW_FORCED);

				Model model1 = listViewData.get(position);

				String nikename = model1.getName();

				activity.findViewById(R.id.etComment).setVisibility(

						View.VISIBLE);

				activity.findViewById(R.id.btnSendComment).setVisibility(

						View.VISIBLE);

				((EditText) activity.findViewById(R.id.etComment)).setHint("@"

						+ nikename);

				activity.findViewById(R.id.etComment).setFocusable(true);

				activity.findViewById(R.id.btnSendComment).setOnClickListener(

						new ListViewButtonOnClickListener(position));

				break;

			case R.id.btnSendComment:

				Model mdl = listViewData.get(position);

				List<String> commentsList = mdl.getComments();

				String commentString = ((EditText) activity

						.findViewById(R.id.etComment)).getEditableText()

						.toString();

				if (null == commentsList || commentsList.size() <= 0) {

					commentsList = new ArrayList<String>();

				}

				commentsList.add(commentString);

				mdl.setComments(commentsList);

				notifyDataSetChanged();

				((EditText) activity.findViewById(R.id.etComment)).setText("");

				activity.findViewById(R.id.etComment).setVisibility(View.GONE);

				activity.findViewById(R.id.btnSendComment).setVisibility(

						View.GONE);

				InputMethodManager imm2 = (InputMethodManager) v.getContext()

						.getSystemService(Context.INPUT_METHOD_SERVICE);

				imm2.toggleSoftInput(0, InputMethodManager.HIDE_NOT_ALWAYS);

				break;

			default:

				break;

			}

		}

	}

}

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

版权声明：本文博客原创文章，博客，未经同意，不得转载。