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

先上效果图再上代码，有图有真相！

实现效果：






实现思路：

大家看到这个效果是不是特别的熟悉呀，呵呵，就是人人网的里面的一个效果，同样发现现在很多的应用都用到了这样的效果，像最近出来的关于日程分享的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://download.csdn.net/detail/jiahui524/4158447