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就写到这里了，谢谢诶。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 205,236评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,867评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,715评论 0赞 340
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,899评论 1赞 278
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,895评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,733评论 1赞 283
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,085评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,722评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,025评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,696评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,816评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,447评论 4赞 322
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,057评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,009评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,254评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,204评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,561评论 2赞 343

推荐阅读更多精彩内容