PopupWindow的基本使用

写在前面的话

PopupWindow 对于我们来说已经是再熟悉不过了，但是今天在涉及到一个需要用到 PopupWindow 的功能的时候，在显示PopupWindow 位置的时候却出问题了，干开发时间也不短了，以前在 用到 PopupWindow的时候，总是马虎的应付过，虽然功能是实现了，但是对于PopupWindow的一些基本使用还是模模糊糊，感到很难堪啊，再加上以前封装的关于PopupWindow位置显示的类今天在使用的时候竟然出现了些问题，实在不得不把它拿出来重新弄弄，也算是做个复习吧。

本篇文章要讲解的重点是

• PopupWindow 基于 view 的位置显示，如显示在view左边，右边，上边，下边
• PopupWindow 弹出动画的方式，从上到下，等等。
  整理的原因是避免每次要用到的时候，都在网上翻来覆去的找。

ok，下面就开始正式讲解了。

第一步，为了方便新建Popuwindow，我自建了一个BasePopupWindow，里面封装了PopupWindow 基于 view 位置显示的方法，下面看看 BasePopupWindow.java 代码吧：

/***
 * PopupWindow基类
 * 
 * @author pei
 * @version 1.0
 * @cretae 2016-7-21
 * @注：若要popwindow点击外部消失，则设置 this.setFocusable(true)
 *     若要popwindow点击外部不消失，不做setFocusable设置，也不要设置成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基本设置 **/
    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背景设置 **/
    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点击间隙处理，根据实际情况重写 **/
    protected void onTouchdimiss() {
        // mMenuView添加OnTouchListener监听判断获取触屏位置如果在选择框外面则销毁弹出框
        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
     *            设置的间距(直接写数字即可，已经做过dp2px转换)
     */
    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
     *            设置的间距(直接写数字即可，已经做过dp2px转换)
     */
    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  设置的间距(直接写数字即可，已经做过dp2px转换)
     */
    public void showAtLocationBottom(View view, float marginDp){
        showAsDropDown(view, 0, dp2px(marginDp));
        update();
    }


    /**
     * 显示在控件左方
     * 
     * @param view
     *            依赖的控件
     * @param marginDp
     *            设置的间距(直接写数字即可，已经做过dp2px转换)
     */
    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
     *            设置的间距(直接写数字即可，已经做过dp2px转换)
     */
    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转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设的固定大小

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不存在的话自己创建）
  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不存在的话自己创建）
  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不存在的话自己创建）
  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不存在的话自己创建）
  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,关于popuwindow就写到这里了，谢谢诶。