Popup Window的创建及其基本属性

ε祈祈猫儿з 提交于 2020-11-11 12:54:06

一:功能概述

PopupWindow 是一个可以在Activity 之上显示任意View的控件。在Android经常使用,效果跟Dialog 效果类似,不同点在于可以控制显示的位置,比如底部显示等,侧边显示等。

二:创建基本流程

1:创建XML布局文件(要展示的弹出布局)

(这里展示的仅仅是布局而已,随意写的,读者不要认为代码太长、太复杂放弃了,实际上在activity里怎么写的布局就在这里面写布局。这里模仿的是qq浏览器底部菜单栏的弹出界面)

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:id="@+id/layout_1"
        android:layout_marginTop="10dp">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_weight="1">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/image_1"
                android:background="@mipmap/ic_launcher"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/text_view_1"
                android:text="Page Ctrl"
                android:layout_gravity="center_horizontal"/>

        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_weight="1">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/image_2"
                android:background="@mipmap/ic_launcher"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/text_view_2"
                android:text="Download Pic"
                android:textSize="11sp"
                android:layout_gravity="center_horizontal"/>

        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_weight="1">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/image_3"
                android:background="@mipmap/ic_launcher"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/text_view_3"
                android:textSize="12sp"
                android:text="Add Bookmark"
                android:layout_gravity="center_horizontal"/>

        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_weight="1">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/image_4"
                android:background="@mipmap/ic_launcher"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/text_view_4"
                android:text="History/Bookmark"
                android:textSize="10sp"
                android:layout_gravity="center_horizontal"/>

        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_weight="1">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/image_5"
                android:background="@mipmap/ic_launcher"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/text_view_5"
                android:text="Share"
                android:layout_gravity="center_horizontal"/>

        </LinearLayout>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:id="@+id/layout_2"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_weight="1">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/image_6"
                android:background="@mipmap/ic_launcher"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/text_view_6"
                android:text="Refresh"
                android:layout_gravity="center_horizontal"/>

        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_weight="1">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/image_7"
                android:background="@mipmap/ic_launcher"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/text_view_7"
                android:text="Soul"
                android:layout_gravity="center_horizontal"/>

        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_weight="1">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/image_8"
                android:background="@mipmap/ic_launcher"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/text_view_8"
                android:text="Translate"
                android:layout_gravity="center_horizontal"/>

        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_weight="1">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/image_9"
                android:background="@mipmap/ic_launcher"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/text_view_9"
                android:text="Night Mode"
                android:layout_gravity="center_horizontal"/>

        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_weight="1">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/image_10"
                android:background="@mipmap/ic_launcher"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/text_view_10"
                android:text="Settings"
                android:layout_gravity="center_horizontal"/>

        </LinearLayout>


    </LinearLayout>

</LinearLayout>

效果图:
在这里插入图片描述

2:创建私有方法来编写Popup Window逻辑代码

private void showPopupWindow(){
   
   
        View contentView = LayoutInflater.from(MainActivity.this).inflate(R.layout.popup_window, null);
        PopupWindow popupWindow = new PopupWindow(contentView,
                WindowManager.LayoutParams.MATCH_PARENT, WindowManager.LayoutParams.WRAP_CONTENT,true);

        ImageView imageViewOne = (ImageView)contentView.findViewById(R.id.image_1);
        ImageView imageViewTwo = (ImageView)contentView.findViewById(R.id.image_2);
        ImageView imageViewThree = (ImageView)contentView.findViewById(R.id.image_3);
        ImageView imageViewFour = (ImageView)contentView.findViewById(R.id.image_4);
        ImageView imageViewFive = (ImageView)contentView.findViewById(R.id.image_5);
        ImageView imageViewSix = (ImageView)contentView.findViewById(R.id.image_6);
        ImageView imageViewSeven = (ImageView)contentView.findViewById(R.id.image_7);
        ImageView imageViewEight = (ImageView)contentView.findViewById(R.id.image_8);

        View view = LayoutInflater.from(MainActivity.this).inflate(R.layout.activity_main,null);

        popupWindow.showAtLocation(view, Gravity.BOTTOM,0,getLayoutHeight());

    }

说明:第一步先创建view对象来绑定xml布局,接着创建PopupWindow实例。对于接下来的控件的加载注册与碎片很相似,都是依附于开头提到的view对象。
最后两行代码是将要展示的Popup Window设定展示的位置。如若想让展示的控件点击有效果,只需设置监听即可:

private void showPopupWindow(){
   
   
        View contentView = LayoutInflater.from(MainActivity.this).inflate(R.layout.popup_window, null);
        popupWindow = new PopupWindow(contentView,
                WindowManager.LayoutParams.MATCH_PARENT, WindowManager.LayoutParams.WRAP_CONTENT,true);

        ImageView imageViewOne = (ImageView)contentView.findViewById(R.id.image_1);
        ImageView imageViewTwo = (ImageView)contentView.findViewById(R.id.image_2);
        ImageView imageViewThree = (ImageView)contentView.findViewById(R.id.image_3);
        ImageView imageViewFour = (ImageView)contentView.findViewById(R.id.image_4);
        ImageView imageViewFive = (ImageView)contentView.findViewById(R.id.image_5);
        ImageView imageViewSix = (ImageView)contentView.findViewById(R.id.image_6);
        ImageView imageViewSeven = (ImageView)contentView.findViewById(R.id.image_7);
        ImageView imageViewEight = (ImageView)contentView.findViewById(R.id.image_8);

        imageViewOne.setOnClickListener(new View.OnClickListener() {
   
   
            @Override
            public void onClick(View v) {
   
   
                Toast.makeText(MainActivity.this,"MB_OK.",Toast.LENGTH_SHORT).show();
            }
        });

        imageViewTwo.setOnClickListener(new View.OnClickListener() {
   
   
            @Override
            public void onClick(View v) {
   
   
                Toast.makeText(MainActivity.this,"MB_OK.",Toast.LENGTH_SHORT).show();
            }
        });

        imageViewThree.setOnClickListener(new View.OnClickListener() {
   
   
            @Override
            public void onClick(View v) {
   
   
                Toast.makeText(MainActivity.this,"MB_OK.",Toast.LENGTH_SHORT).show();
            }
        });

        imageViewFour.setOnClickListener(new View.OnClickListener() {
   
   
            @Override
            public void onClick(View v) {
   
   
                Toast.makeText(MainActivity.this,"MB_OK.",Toast.LENGTH_SHORT).show();
            }
        });

        imageViewFive.setOnClickListener(new View.OnClickListener() {
   
   
            @Override
            public void onClick(View v) {
   
   
                Toast.makeText(MainActivity.this,"MB_OK.",Toast.LENGTH_SHORT).show();
                showSecondPopupWindow();
                popupWindow.dismiss();
            }
        });

        imageViewSix.setOnClickListener(new View.OnClickListener() {
   
   
            @Override
            public void onClick(View v) {
   
   
                Toast.makeText(MainActivity.this,"MB_OK.",Toast.LENGTH_SHORT).show();
            }
        });

        imageViewSeven.setOnClickListener(new View.OnClickListener() {
   
   
            @Override
            public void onClick(View v) {
   
   
                Toast.makeText(MainActivity.this,"MB_OK.",Toast.LENGTH_SHORT).show();
            }
        });

        imageViewEight.setOnClickListener(new View.OnClickListener() {
   
   
            @Override
            public void onClick(View v) {
   
   
                Toast.makeText(MainActivity.this,"MB_OK.",Toast.LENGTH_SHORT).show();
            }
        });
        
        View view = LayoutInflater.from(MainActivity.this).inflate(R.layout.activity_main,null);
        popupWindow.showAtLocation(view, Gravity.BOTTOM,0,getLayoutHeight());
    }

3:在合适地方弹出该Popup Window(或动作监听内)

showPopupWindow();

注意该方法是我们自定义提出的,不是系统提供的。
如果想关闭,只需如下即可:

popupWindow.dismiss();

另外还需注意的是这里的PopupWindow对象应该是类成员变量而非方法,否则在其它地方是访问不了该属性的。我这里为了方便演示,在一开始的java代码里写成方法变量,实际上应该写成类成员变量来访问。

三:基本属性

1:PopupWindow可以设置弹出/消失动画,且简单

java代码如下:

popupWindow.setAnimationStyle(R.style.MyPopupWindow_anim_style);

这里需要在res目录i下新建anim文件夹,接着原封不动把这两个文件拷过去(一个控制弹出动画参数,一个控制弹出)即可
在这里插入图片描述
poupwindow_hidden_anim.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="160"
        android:fromYDelta="0"
        android:toYDelta="10%p" />
    <alpha
        android:duration="160"
        android:fromAlpha="1.0"
        android:toAlpha="0.0" />
</set>

poupwindow_show_anim.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="160"
        android:fromYDelta="10%p"
        android:toYDelta="0" />
    <alpha
        android:duration="160"
        android:fromAlpha="0.0"
        android:toAlpha="1.0" />
</set>

2:PopupWindow可以设置弹出位置(居中、顶部、底部、动态指定高度)

PopupWindow的showAtLocation()第二个参数可以控制弹出位置

参数 说明
Gravity.BOTTOM 底部
Gravity.TOP 顶部
Gravity.CENTER 中央
Gravity.RIGHT 左侧
Gravity.LEFT 右侧

这里只是指定固定的位置(相对于屏幕),但要想动态地指定高度,例如指定该PopupWindow位于某控件上方,某控件上方偏移多少dp,需要自定义一个私有方法,在第四个参数内调用该方法即可。
例如,该自定义方法是计算某LinearLayout的高度:

    private int getLayoutHeight(){
   
   
        int height;
        layout2 = (LinearLayout)findViewById(R.id.layout_2);
        height = layout2.getHeight();
        return height;
    }

showAtLocation()第四个参数为y,意为PopupWindow偏移第二个参数的位置,即向上或向下偏移多少

四:注意事项

PopupWindow布局不要设置为透明,否则必须点击非透明部分才会起作用。初学者在练习该内容时,注意要把PopupWindow变量设置为类成员变量,否则在其它地方调用dismiss()方法时会报错。

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!