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