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() {@Overridepublic 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() {@Overridepublic 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 yint 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 listcreateActionList();// 在指定位置彈出彈窗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 itemview = 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;}