寫在前面的話

PopupWindow 對于我們來說已經(jīng)是再熟悉不過了，但是今天在涉及到一個需要用到 PopupWindow 的功能的時候帅掘，在顯示PopupWindow 位置的時候卻出問題了，干開發(fā)時間也不短了堂油，以前在 用到 PopupWindow的時候修档，總是馬虎的應(yīng)付過，雖然功能是實現(xiàn)了府框，但是對于PopupWindow的一些基本使用還是模模糊糊吱窝，感到很難堪啊，再加上以前封裝的關(guān)于PopupWindow位置顯示的類今天在使用的時候竟然出現(xiàn)了些問題迫靖，實在不得不把它拿出來重新弄弄院峡，也算是做個復(fù)習(xí)吧。

本篇文章要講解的重點是

• PopupWindow 基于 view 的位置顯示系宜，如顯示在view左邊撕予，右邊，上邊蜈首，下邊
• PopupWindow 彈出動畫的方式实抡，從上到下，等等欢策。
  整理的原因是避免每次要用到的時候吆寨，都在網(wǎng)上翻來覆去的找。

ok踩寇，下面就開始正式講解了啄清。

第一步，為了方便新建Popuwindow俺孙，我自建了一個BasePopupWindow辣卒，里面封裝了PopupWindow 基于 view 位置顯示的方法，下面看看 BasePopupWindow.java 代碼吧：

/***
 * PopupWindow基類
 * 
 * @author pei
 * @version 1.0
 * @cretae 2016-7-21
 * @注：若要popwindow點擊外部消失睛榄，則設(shè)置 this.setFocusable(true)
 *     若要popwindow點擊外部不消失荣茫，不做setFocusable設(shè)置，也不要設(shè)置成this.setFocusable(false)
 * 
 */
public abstract class BasePopupWindow extends PopupWindow {

    protected View mLayoutView;
    protected int mLayoutId;
    protected Context mContext;
    protected int mWidth;
    protected int mHeight;

    public BasePopupWindow(int width, int height, int layoutId, Context context) {
        this.mWidth = width;
        this.mHeight = height;
        this.mLayoutId = layoutId;
        this.mContext = context;
        mLayoutView = LayoutInflater.from(context).inflate(mLayoutId, null);
        setWindow();
    }

    /** PopupWindow基本設(shè)置 **/
    protected void setWindow() {
        this.setContentView(mLayoutView);
        this.setWidth(mWidth);
        this.setHeight(mHeight);
        // this.setFocusable(true);// 可點擊
        // 實例化一個ColorDrawable顏色為半透明(半透明遮罩顏色代碼#66000000)
        ColorDrawable dw = new ColorDrawable(Color.TRANSPARENT);
        this.setBackgroundDrawable(dw);
    }

    /** PopupWindow背景設(shè)置 **/
    protected void setBackground(int color) {
        // 實例化一個ColorDrawable顏色為半透明
        ColorDrawable dw = new ColorDrawable(color);
        this.setBackgroundDrawable(dw);
    }

    protected abstract void initView();
    protected abstract void initData();
    protected abstract void setListener();

    /** PopupWindow點擊間隙處理场靴，根據(jù)實際情況重寫 **/
    protected void onTouchdimiss() {
        // mMenuView添加OnTouchListener監(jiān)聽判斷獲取觸屏位置如果在選擇框外面則銷毀彈出框
        mLayoutView.setOnTouchListener(new OnTouchListener() {
            @Override
            public boolean onTouch(View view, MotionEvent event) {
//              int height = mLayoutView.getTop();
//              int y = (int) event.getY();
//              if (event.getAction() == MotionEvent.ACTION_UP) {
//                  if (y < height) {
//                      dismiss();
//                  }
//              }
                return false;
            }
        });
    }

    /**
     * 顯示在控件正上方
     * 
     * @param view
     *            依賴的控件
     * @param marginDp
     *            設(shè)置的間距(直接寫數(shù)字即可啡莉，已經(jīng)做過dp2px轉(zhuǎn)換)
     */
    public void showAtLocationTop(View view, float marginDp) {
        mLayoutView.measure(MeasureSpec.UNSPECIFIED, MeasureSpec.UNSPECIFIED);
        int popupWidth = mLayoutView.getMeasuredWidth();
        int popupHeight = mLayoutView.getMeasuredHeight();
        int[] location = new int[2];
        view.getLocationOnScreen(location);
        showAtLocation(view, Gravity.NO_GRAVITY, (location[0] + view.getWidth() / 2) - popupWidth / 2, location[1] - popupHeight - dp2px(marginDp));
        update();
    }

    /**
     * 顯示在控件正下方
     * 
     * @param view
     *            依賴的控件
     * @param marginDp
     *            設(shè)置的間距(直接寫數(shù)字即可港准，已經(jīng)做過dp2px轉(zhuǎn)換)
     */
    public void showAtLocationGravityBottom(View view, float marginDp) {
        mLayoutView.measure(MeasureSpec.UNSPECIFIED, MeasureSpec.UNSPECIFIED);
        int popupWidth = mLayoutView.getMeasuredWidth();
        int popupHeight = mLayoutView.getMeasuredHeight();
        int[] location = new int[2];
        view.getLocationOnScreen(location);
        showAtLocation(view, Gravity.NO_GRAVITY, (location[0]+view.getWidth()/2)-popupWidth/2,
                location[1]+view.getHeight()+dp2px(marginDp));
        update();
    }

    /**顯示在控件下方
     *
     * @param view 依賴的控件
     * @param marginDp  設(shè)置的間距(直接寫數(shù)字即可，已經(jīng)做過dp2px轉(zhuǎn)換)
     */
    public void showAtLocationBottom(View view, float marginDp){
        showAsDropDown(view, 0, dp2px(marginDp));
        update();
    }


    /**
     * 顯示在控件左方
     * 
     * @param view
     *            依賴的控件
     * @param marginDp
     *            設(shè)置的間距(直接寫數(shù)字即可咧欣，已經(jīng)做過dp2px轉(zhuǎn)換)
     */
    public void showAtLocationLeft(View view, float marginDp) {
        mLayoutView.measure(MeasureSpec.UNSPECIFIED, MeasureSpec.UNSPECIFIED);
        int popupWidth = mLayoutView.getMeasuredWidth();
        int popupHeight = mLayoutView.getMeasuredHeight();
        int[] location = new int[2];
        view.getLocationOnScreen(location);
        showAtLocation(view, Gravity.NO_GRAVITY, location[0] - popupWidth - dp2px(marginDp), (location[1] + view.getHeight() / 2) - popupHeight / 2);
        update();
    }

    /**
     * 顯示在控件右方
     * 
     * @param view
     *            依賴的控件
     * @param marginDp
     *            設(shè)置的間距(直接寫數(shù)字即可浅缸，已經(jīng)做過dp2px轉(zhuǎn)換)
     */
    public void showAtLocationRight(View view, float marginDp) {
        mLayoutView.measure(MeasureSpec.UNSPECIFIED, MeasureSpec.UNSPECIFIED);
        int popupWidth = mLayoutView.getMeasuredWidth();
        int popupHeight = mLayoutView.getMeasuredHeight();
        int[] location = new int[2];
        view.getLocationOnScreen(location);
        showAtLocation(view, Gravity.NO_GRAVITY, location[0] + view.getWidth() + dp2px(marginDp), (location[1] + view.getHeight() / 2) - popupHeight / 2);
        update();
    }

    /** dp轉(zhuǎn)px **/
    private int dp2px(float dpVal) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dpVal, mContext.getResources().getDisplayMetrics());
    }

    /** 通過id獲得view **/
    @SuppressWarnings("unchecked")
    protected <T extends View> T getView(int viewId) {
        View view = null;
        if (mLayoutView == null) {
            mLayoutView = LayoutInflater.from(mContext).inflate(mLayoutId, null);
        }
        view = mLayoutView.findViewById(viewId);
        return (T) view;
    }
}

第二步，寫一個簡單的TestPop繼承BasePopuWindow魄咕，用于做測試衩椒，TestPop 代碼如下：

/**
 * Instruction:用于測試的popuwindow
 * <p>
 * Author:pei
 * Date: 2017/6/28
 * Description:
 */


public class TestPop extends BasePopupWindow{

    public TestPop(Context context) {
        super(ScreenUtil.dp2px(100,context), ScreenUtil.dp2px(50,context), R.layout.pop_order, context);

        initView();
        initData();
        setListener();
    }

    @Override
    protected void initView() {

    }

    @Override
    protected void initData() {
        setFocusable(true);
        setAnimationStyle(R.style.popuwindow_up_style);//popuwindow顯示隱藏的動畫

    }

    @Override
    protected void setListener(){

    }
}

需要說明的是，為了方便測試哮兰，我TestPop設(shè)的固定大小

width=ScreenUtil.dp2px(100,context);
hight=ScreenUtil.dp2px(50,context);

TestPop 涉及到的popuwindow的布局 layout.pop_order.xml 如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/color_c0c0c0">

</LinearLayout>

第三步毛萌，mainactivity中的測試代碼很簡單，就是寫了一個點擊事件用來控制TestPop的顯示和消失奠蹬。

下面，讓我們來看看嗡午，Mainactivity中的點擊時間是怎么控制TestPop
的：

    @Override
    public void onClick(View v) {
         switch (v.getId()) {
            case R.id.tv_spanner:
                TestPop testPop = new TestPop(mContext);
                if (testPop.isShowing()) {
                    testPop.dismiss();
                } else {
                    testPop.showAtLocationBottom(mTvSpanner, 5);
                }
                break;
            default:
                break;
        }
    }

下面囤躁，讓我們來看看，popwi固定顯示在某個view方位的具體方法：

//顯示在控件正上方
showAtLocationTop(View view, float marginDp)
//顯示在控件正下方(中線對齊)
showAtLocationGravityBottom(View view, float marginDp)
//顯示在控件下方(左邊對齊)
showAtLocationBottom(View view, float marginDp)
//顯示在控件左方
showAtLocationLeft(View view, float marginDp)
//顯示在控件右方
showAtLocationRight(View view, float marginDp)

之前講到popuwindow的位置顯示問題荔睹，下面講講popuwindow動畫彈出的問題

• popuwindow從屏幕上面進入
  在 res/anim 文件夾下建xml文件（anim不存在的話自己創(chuàng)建）
  popu_up_in.xml 代碼如下：

<?xml version="1.0" encoding="utf-8"?>
<!-- 從屏幕上面進入 -->
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <translate
        android:duration="500"
        android:fromYDelta="-100%p"
        android:toYDelta="0" />

    <alpha
        android:duration="500"
        android:fromAlpha="0.0"
        android:toAlpha="1.0" />
</set>

popu_up_out.xml代碼如下：

<?xml version="1.0" encoding="utf-8"?>
<!-- 從屏幕上面退出 -->
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <translate
        android:duration="500"
        android:fromYDelta="0"
        android:toYDelta="-100%p" />

    <alpha
        android:duration="500"
        android:fromAlpha="1.0"
        android:toAlpha="0.0" />
</set>

新建style主題狸演，用于popuwindow引用

   <style name="popuwindow_up_style">
        <item name="android:windowEnterAnimation">@anim/popu_up_in</item>
        <item name="android:windowExitAnimation">@anim/popu_up_out</item>
    </style>

在popuwindow中的引用如下：

setAnimationStyle(R.style.popuwindow_up_style);//popuwindow顯示隱藏的動畫

效果圖如下：

up.gif

• popuwindow 的left_top效果
  在 res/anim 文件夾下建xml文件（anim不存在的話自己創(chuàng)建）
  popu_left_top_in.xml 代碼如下：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale
        android:duration="500"
        android:fillAfter="false"
        android:fromXScale="0.0"
        android:fromYScale="0.0"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:pivotX="0%"
        android:pivotY="0%"
        android:toXScale="1.0"
        android:toYScale="1.0" />
</set>

popu_left_top_out.xml代碼如下：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <scale
        android:duration="500"
        android:fillAfter="false"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:pivotX="0%"
        android:pivotY="0%"
        android:toXScale="0.0"
        android:toYScale="0.0" />
</set>

新建style主題，用于popuwindow引用

<style name="popuwindow_left_top_style">
        <item name="android:windowEnterAnimation">@anim/popu_left_top_in</item>
        <item name="android:windowExitAnimation">@anim/popu_left_top_out</item>
    </style>

在popuwindow中的引用如下：

setAnimationStyle(R.style.popuwindow_left_top_style);//popuwindow顯示隱藏的動畫

效果圖如下：

left_top.gif

• popuwindow 的right_top效果
  在 res/anim 文件夾下建xml文件（anim不存在的話自己創(chuàng)建）
  popu_right_top_in.xml 代碼如下：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale
        android:duration="500"
        android:fillAfter="false"
        android:fromXScale="0.0"
        android:fromYScale="0.0"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:pivotX="100%"
        android:pivotY="0%"
        android:toXScale="1.0"
        android:toYScale="1.0" />
</set>

popu_right_top_out.xml 代碼如下：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <scale
        android:duration="500"
        android:fillAfter="false"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:pivotX="100%"
        android:pivotY="0%"
        android:toXScale="0.0"
        android:toYScale="0.0" />
</set>

新建style主題僻他，用于popuwindow引用

<style name="popuwindow_right_top_style">
        <item name="android:windowEnterAnimation">@anim/popu_right_top_in</item>
        <item name="android:windowExitAnimation">@anim/popu_right_top_out</item>
    </style>

在popuwindow中的引用如下：

setAnimationStyle(R.style.popuwindow_right_top_style);//popuwindow顯示隱藏的動畫

效果圖如下：

right_top.gif

• popuwindow 的middle_style效果
  在 res/anim 文件夾下建xml文件（anim不存在的話自己創(chuàng)建）
  popu_middle_in.xml 代碼如下：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale
        android:duration="500"
        android:fillAfter="false"
        android:fromXScale="0.0"
        android:fromYScale="0.0"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:pivotX="50%"
        android:pivotY="0%"
        android:toXScale="1.0"
        android:toYScale="1.0" />
</set>

popu_middle_out.xml 代碼如下：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <scale
        android:duration="500"
        android:fillAfter="false"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:pivotX="50%"
        android:pivotY="0%"
        android:toXScale="0.0"
        android:toYScale="0.0" />
</set>

新建style主題宵距，用于popuwindow引用

<style name="popuwindow_middle_style">
        <item name="android:windowEnterAnimation">@anim/popu_middle_in</item>
        <item name="android:windowExitAnimation">@anim/popu_middle_out</item>
    </style>

在popuwindow中的引用如下：

setAnimationStyle(R.style.popuwindow_middle_style);//popuwindow顯示隱藏的動畫

效果圖如下：

middle_style.gif

ok,關(guān)于popuwindow就寫到這里了，謝謝誒吨拗。