Android实现人人网点击“+”弹出效果

最近没日没夜的加班，加得连自己姓什么都忘记了，更可怕的是测试出一个BUG还要扣工资！唉，先不谈工作的事了吧。还是回到技术上来，每天也就这么点精神粮食来满足自己了，最近又有很多的东西忘记跟大家分享了，俺又回来，继续分享菜鸟的另一个新的发现，希望能帮助更多的人来实现自己的项目中的一些需要。不管你们有没有这样的需求，我只希望能帮助到大家吧，也希望大家能分享自己的东西，帮助更多的人，让我们菜鸟共同成长！

继续以前的博客风格，先上效果图再上代码，有图有真相！

实现效果：

实现思路：

大家看到这个效果是不是特别的熟悉呀，呵呵，就是人人网的里面的一个效果，同样发现现在很多的应用都用到了这样的效果，像最近出来的关于日程分享的UPTO的一款苹果应用，大家有空可以去看下，那上面还有一个比较炫的效果还没有好好的研究。

有些人可能也在哪见过这样的效果，像通讯录中用到了QuickBar，但那个不灵活，要实现这样的效果其实我们又用到了PopupWindow。有关于这方面的文章，有一个博客也介绍得很清楚，我只是在他的基础上加一下功能。突然发现这个东西还是灰常的好用哈。

我们需要重写PopupWindow。然后通过setContentView（）来加载我们的布局文件，然后再加个动画就实现了人人网的一模一样的效果了。

给出重写PopupWindow的代码，有什么不懂的自己看代码吧或者加QQ交流下。

package com.jiahui.view;

import java.util.ArrayList;

import android.content.Context;
import android.graphics.Rect;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.View.OnTouchListener;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.view.WindowManager;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.view.animation.Interpolator;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.PopupWindow;
import android.widget.TextView;

import com.jiahui.quickbar.ActionItem;
import com.jiahui.quickbar.R;

/**
 * 重写popupWindow
 * @author Administrator
 *
 */
public class QuickActionBar extends PopupWindow {

	private View root;

	private ImageView mArrowUp;

	private ImageView mArrowDown;

	private Animation mTrackAnim;

	private LayoutInflater inflater;

	private Context context;

	private View anchor;

	private PopupWindow window;

	private Drawable background = null;

	private WindowManager windowManager;

	public static final int ANIM_GROW_FROM_LEFT = 1;

	public static final int ANIM_GROW_FROM_RIGHT = 2;

	public static final int ANIM_GROW_FROM_CENTER = 3;

	public static final int ANIM_AUTO = 4;

	private int animStyle;
	private boolean animateTrack;
	private ViewGroup mTrack;
	private ArrayList<ActionItem> actionItems;

	public QuickActionBar(View anchor) {

		super(anchor);

		this.anchor = anchor;

		this.window = new PopupWindow(anchor.getContext());

		/**
		 * 在popwindow外点击即关闭该window
		 */
		window.setTouchInterceptor(new OnTouchListener() {

			@Override
			public boolean onTouch(View view, MotionEvent event) {

				if (event.getAction() == MotionEvent.ACTION_OUTSIDE) {

					// 让其消失
					QuickActionBar.this.window.dismiss();

					return true;

				}

				return false;
			}
		});

		context = anchor.getContext();

		windowManager = (WindowManager) context
				.getSystemService(Context.WINDOW_SERVICE);

		actionItems = new ArrayList<ActionItem>();

		inflater = (LayoutInflater) context
				.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

		root = (ViewGroup) inflater.inflate(R.layout.quickbar, null);

		// 上下两个箭头
		mArrowDown = (ImageView) root.findViewById(R.id.arrow_down);
		mArrowUp = (ImageView) root.findViewById(R.id.arrow_up);

		setContentView(root);

		mTrackAnim = AnimationUtils.loadAnimation(context, R.anim.rail);

		/**
		 * 设置加速效果
		 */
		mTrackAnim.setInterpolator(new Interpolator() {

			@Override
			public float getInterpolation(float t) {
				final float inner = (t * 1.55f) - 1.1f;
				return 1.2f - inner * inner;
			}
		});

		// 这个是弹出窗口内的水平布局
		mTrack = (ViewGroup) root.findViewById(R.id.tracks);

		animStyle = ANIM_AUTO;// 设置动画风格

		animateTrack = true;

	}

	/**
	 * 设置一个flag 来标识动画显示
	 * 
	 * @param animateTrack
	 */
	public void animateTrack(boolean animateTrack) {
		this.animateTrack = animateTrack;
	}

	/**
	 * 设置动画风格
	 * 
	 * @param animStyle
	 */
	public void setAnimStyle(int animStyle) {
		this.animStyle = animStyle;
	}

	/**
	 * 增加一个Action
	 * 
	 * @param actionItem
	 */
	public void addActionItem(ActionItem actionItem) {
		actionItems.add(actionItem);
	}

	/**
	 * 弹出窗体
	 */
	public void show() {

		preShow();

		int[] location = new int[2];

		// 得到anchor的位置
		anchor.getLocationOnScreen(location);

		// 以anchor的位置构造一个矩形
		Rect anchorRect = new Rect(location[0], location[1], location[0]
				+ anchor.getWidth(), location[1] + anchor.getHeight());

		root.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT,
				LayoutParams.WRAP_CONTENT));
		root.measure(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);

		int rootWidth = root.getMeasuredWidth();
		int rootHeight = root.getMeasuredHeight();

		// 得到屏幕的宽
		int screenWidth = windowManager.getDefaultDisplay().getWidth();

		// 设置弹窗弹出的位置的X y
		int xPos = (screenWidth - rootWidth) / 2;
		int yPos = anchorRect.top - rootHeight;

		boolean onTop = true;
		// 在底部弹出
		if (rootHeight > anchorRect.top) {
			yPos = anchorRect.bottom;
			onTop = false;
		}

		// 根据弹出位置，设置不同的方向箭头图片
		// showArrow(((onTop) ? R.id.arrow_down : R.id.arrow_up),
		// anchorRect.centerX());

		// 设置弹出动画风格
		setAnimationStyle(screenWidth, anchorRect.centerX(), onTop);
		// 创建action list
		createActionList();
		// 在指定位置弹出弹窗
		window.showAtLocation(this.anchor, Gravity.NO_GRAVITY, xPos, yPos);

		// 设置弹窗内部的水平布局的动画
		if (animateTrack) {
			mTrack.startAnimation(mTrackAnim);
		}

	}

	/**
	 * 预处理窗口
	 */
	protected void preShow() {

		if (root == null) {
			throw new IllegalStateException("需要为弹窗设置布局");
		}

		if (background == null) {
			window.setBackgroundDrawable(new BitmapDrawable());
		} else {
			window.setBackgroundDrawable(background);
		}

		// 设置宽度
		window.setWidth(WindowManager.LayoutParams.WRAP_CONTENT);
		// 设置高度
		window.setHeight(WindowManager.LayoutParams.WRAP_CONTENT);

		window.setTouchable(true);
		window.setFocusable(true);
		window.setOutsideTouchable(true);

		// 指定布局
		window.setContentView(root);

	}

	/**
	 * 设置动画风格
	 * 
	 * @param screenWidth
	 * @param requestedX
	 * @param onTop
	 */
	private void setAnimationStyle(int screenWidth, int requestedX,
			boolean onTop) {

		int arrowPos = requestedX - mArrowUp.getMeasuredWidth() / 2;
		switch (animStyle) {
		case ANIM_GROW_FROM_LEFT:

			window.setAnimationStyle((onTop) ? R.style.Animations_PopDownMenu_Left
					: R.style.Animations_PopDownMenu_Left);

			break;

		case ANIM_GROW_FROM_RIGHT:

			window.setAnimationStyle((onTop) ? R.style.Animations_PopDownMenu_Right
					: R.style.Animations_PopDownMenu_Right);

			break;

		case ANIM_GROW_FROM_CENTER:
			window.setAnimationStyle((onTop) ? R.style.Animations_PopDownMenu_Center
					: R.style.Animations_PopDownMenu_Center);

			break;

		case ANIM_AUTO:

			if (arrowPos < screenWidth / 4) {
				window.setAnimationStyle((onTop) ? R.style.Animations_PopDownMenu_Left
						: R.style.Animations_PopDownMenu_Left);

			} else if (arrowPos > screenWidth / 4
					&& arrowPos < 3 * (screenWidth / 4)) {
				window.setAnimationStyle((onTop) ? R.style.Animations_PopDownMenu_Center
						: R.style.Animations_PopDownMenu_Center);
			} else {
				window.setAnimationStyle((onTop) ? R.style.Animations_PopDownMenu_Right
						: R.style.Animations_PopDownMenu_Right);
			}

			break;

		}

	}

	/**
	 * 创建Action List
	 */
	private void createActionList() {

		View view;

		String title;

		Drawable icon;

		OnClickListener clickListener;

		int index = 1;
		for (int i = 0; i < actionItems.size(); i++) {

			title = actionItems.get(i).getTitle();
			icon = actionItems.get(i).getIcon();

			clickListener = actionItems.get(i).getClickListener();

			// 得到Action item
			view = getActionItem(title, icon, clickListener);
			view.setFocusable(true);
			view.setClickable(true);

			mTrack.addView(view, index);

			index++;
		}

	}

	/**
	 * 得到Action Item
	 * 
	 * @param title
	 * @param icon
	 * @param listener
	 * @return
	 */
	private View getActionItem(String title, Drawable icon,
			OnClickListener listener) {

		// 装载Action布局

		LinearLayout linearLayout = (LinearLayout) inflater.inflate(
				R.layout.action_item, null);

		ImageView img_icon = (ImageView) linearLayout.findViewById(R.id.icon);

		TextView tv_title = (TextView) linearLayout.findViewById(R.id.title);

		if (img_icon != null) {
			img_icon.setImageDrawable(icon);

		} else {
			img_icon.setVisibility(View.GONE);
		}

		if (tv_title != null) {
			tv_title.setText(title);
		} else {
			tv_title.setOnClickListener(listener);
		}

		return linearLayout;

	}

	// /**
	// * 显示箭头
	// *
	// * @param whichArrow箭头资源id
	// * @param requestedX
	// * 距离屏幕左边的距离
	// */
	// private void showArrow(int whichArrow, int requestedX) {
	//
	// final View showArrow = (whichArrow == R.id.arrow_up) ? mArrowUp
	// : mArrowDown;
	// final View hideArrow = (whichArrow == R.id.arrow_up) ? mArrowDown
	// : mArrowUp;
	// final int arrowWidth = mArrowUp.getMeasuredWidth();
	// showArrow.setVisibility(View.VISIBLE);
	// ViewGroup.MarginLayoutParams param = (ViewGroup.MarginLayoutParams)
	// showArrow
	// .getLayoutParams();
	// // 以此设置距离左边的距离
	// param.leftMargin = requestedX - arrowWidth / 2;
	// hideArrow.setVisibility(View.INVISIBLE);
	//
	// }

}

这里只贴出核心代码了，其他代码的话自己可以下载源代码研究下，继续我的风格，放出自己的源代码与大家分享，希望能帮助到大家一点。

如需转载引用请注明出处：http://blog.csdn.net/jiahui524

欢迎大家多多交流。分享为快乐之本！让我们菜鸟一起成长！

提供源代码下载 ：http://download.csdn.net/detail/jiahui524/4158447

PS：有网友近来提问，说ActionItem的点击事件无法完成，这也算是我的一个失误，识人子弟了，在此我向大家表示抱歉，也感谢那位网友的提问。如果想要ActionItem的事件有效，在原来的源代码中的QuickActionBar里的找到getActionItem方法修改代码如下：

	/**
	 * 得到Action Item
	 * 
	 * @param title
	 * @param icon
	 * @param listener
	 * @return
	 */
	private View getActionItem(String title, Drawable icon,
			OnClickListener listener) {

		// 装载Action布局

		LinearLayout linearLayout = (LinearLayout) inflater.inflate(
				R.layout.action_item, null);

		ImageView img_icon = (ImageView) linearLayout.findViewById(R.id.icon);

		TextView tv_title = (TextView) linearLayout.findViewById(R.id.title);

		if (img_icon != null) {
			img_icon.setImageDrawable(icon);

		} else {
			img_icon.setVisibility(View.GONE);
		}

		if (tv_title != null) {
			tv_title.setText(title);
		} else {
			tv_title.setOnClickListener(listener);
		}
		if (listener != null) {
			linearLayout.setOnClickListener(listener);

		}

		return linearLayout;

	}