PopupWindow的基本使用方法

来源：互联网发布：初入职场知乎编辑：程序博客网时间：2024/05/19 19:59

先介绍以下PopupWindow的相关函数：

1、构造函数

//方法一：
public PopupWindow (Context context)
//方法二：
public PopupWindow(View contentView)
//方法三：
public PopupWindow(View contentView, int width, int height)
//方法四：
public PopupWindow(View contentView, int width, int height, boolean focusable)

PopupWindow总共有这么四个构造函数，但是想要创建一个PopupWindow必须给它设置contentView、width、height这三个参数，所以最常用的构造函数就是上面的方法三。如果使用方法一，就要另外调用下面的方法：

PopupWindow.setContentView(View)
PopupWindow.setWidth(int)
PopupWindow.setHeight(int)

使用方法而，要调用上面的设置宽度和高度的方法。

2、显示函数

//相对某个控件的位置（正左下方），无偏移
showAsDropDown(View anchor)：
//相对某个控件的位置，有偏移;xoff表示x轴的偏移，正值表示向左，负值表示向右；yoff表示相对y轴的偏移，正值是向下，负值是向上；
showAsDropDown(View anchor, int xoff, int yoff)：
//相对于父控件的位置（例如正中央Gravity.CENTER，下方Gravity.BOTTOM等），可以设置偏移或无偏移
showAtLocation(View parent, int gravity, int x, int y)：

可以用上面的三个方法显示PopupWindow，具体用法注释已经解释过了，等到下面演示的时候，我会进一步做讲解。

3、其他函数

public void dismiss()
//另外几个函数，这里不讲其意义，下篇细讲
public void setFocusable(boolean focusable)
public void setTouchable(boolean touchable)
public void setOutsideTouchable(boolean touchable)
public void setBackgroundDrawable(Drawable background)

上面的dismiss方法比较常用，因为PopupWindow显示过后肯定要让它消失的，调用此方法，就能达到这个目的。

其他几个方法等演示的时候再详细解释。

先来一个简单的例子：

Activity布局：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.egotrip.wcc.ui.PopupWindowActivity">
 
    <Button
        android:id="@+id/btn_pop"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:onClick="pop"
        android:text="PopupWindow" />
 
</RelativeLayout>

PopupWindow显示的布局文件layout_popupwindow.xml：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#66000000">
 
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#fff"
        android:orientation="vertical"
        android:paddingBottom="2dp">
 
        <View
            android:layout_width="match_parent"
            android:layout_height="2.25dp"
            android:layout_alignParentTop="true"
            android:background="#fa7829" />
 
        <TextView
            android:id="@+id/computer"
            style="@style/pop_text_style"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="计算机" />
 
        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_alignParentTop="true"
            android:background="#55000000" />
 
        <TextView
            android:id="@+id/finance"
            style="@style/pop_text_style"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="金融" />
 
        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_alignParentTop="true"
            android:background="#55000000" />
 
        <TextView
            android:id="@+id/manage"
            style="@style/pop_text_style"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="管理" />
 
        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_alignParentTop="true"
            android:background="#55000000" />
 
    </LinearLayout>
</RelativeLayout>

比较简单，没什么好说的。

最后是Activity的java文件代码：

package com.egotrip.wcc.ui;
 
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.PopupWindow;
import android.widget.TextView;
 
import com.egotrip.wcc.R;
import com.egotrip.wcc.utils.ToastUtils;
 
public class PopupWindowActivity extends AppCompatActivity implements View.OnClickListener {
 
    private PopupWindow mPopupWindow;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_popup_window);
 
        initView();
    }
 
    private Button mBtn_pop;
    private void initView()
    {
        mBtn_pop = (Button) findViewById(R.id.btn_pop);
    }
 
    public void pop(View v)
    {
        View convertView = LayoutInflater.from(this).inflate(R.layout.layout_popup_window, null);
 
        TextView computer = (TextView) convertView.findViewById(R.id.computer);
        TextView finance = (TextView) convertView.findViewById(R.id.finance);
        TextView manage = (TextView) convertView.findViewById(R.id.manage);
 
        computer.setOnClickListener(this);
        finance.setOnClickListener(this);
        manage.setOnClickListener(this);
 
        mPopupWindow = new PopupWindow(convertView, ViewGroup.LayoutParams.WRAP_CONTENT,
                ViewGroup.LayoutParams.WRAP_CONTENT, true);
 
        View rootView = LayoutInflater.from(this).inflate(R.layout.activity_popup_window, null);
        mPopupWindow.showAtLocation(rootView, Gravity.BOTTOM, 0, 0);
    }
 
    @Override
    public void onClick(View v) {
        switch (v.getId())
        {
            case R.id.computer:
                ToastUtils.showToast("计算机", this);
                break;
            case R.id.finance:
                ToastUtils.showToast("金融", this);
                break;
            case R.id.manage:
                ToastUtils.showToast("管理", this);
                break;
        }
 
        mPopupWindow.dismiss();
    }
}

效果图：

下面解释一下Activity中代码的作用：

在pop方法，也就是按钮的点击事件中，先将PopupWindow要显示的布局文件用LayoutInflater填充，然后通过构造函数4创建PopupWindow，接着用同样的方法获取根布局的引用，最后用showAtLocation方法，让PopupWindow在根布局的底部显示。实现这一效果的最重要的参数就是showAtLocation的第二个参数gravity，它指明了PopupWindow在根布局中显示的位置，至于后面两个参数，是x,y两轴的偏移量。在pop方法中获取3个TextView的引用，是为了设置点击事件，通过点击任意一个TextView执行PopupWindow的dismiss方法让其消失。

下面来看看怎么样让PopupWindow在按钮的正下方显示，其实也很简单，只要修改一下显示方法就可以了，如下：

public void pop(View v)
    {
        View convertView = LayoutInflater.from(this).inflate(R.layout.layout_popup_window, null);
 
        TextView computer = (TextView) convertView.findViewById(R.id.computer);
        TextView finance = (TextView) convertView.findViewById(R.id.finance);
        TextView manage = (TextView) convertView.findViewById(R.id.manage);
 
        computer.setOnClickListener(this);
        finance.setOnClickListener(this);
        manage.setOnClickListener(this);
 
        mPopupWindow = new PopupWindow(convertView, ViewGroup.LayoutParams.WRAP_CONTENT,
                ViewGroup.LayoutParams.WRAP_CONTENT, true);
 
        mPopupWindow.showAsDropDown(mBtn_pop, 0, 0);
    }

效果图：

想要让PopupWindow显示在一个控件的正下方，只要调用方法showAsDropDown就行了，第一个参数就是该控件的引用，后面两个参数可以不要，如果想把上面途中的往右调一下，使其看起来居中，只要修改第二个参数的值就行了，想要看效果的，自行实践。

下面说一下怎么给出弹窗外的其他部分添加阴影效果，类似Dialog的效果，就像这样：

在这里要说一下，上面的布局文件其实可以不要外面的RelativeLayout的，添加它就是为了实现阴影的效果。所以以后做阴影效果的时候，一定不要忘了要在布局外面套这样一层布局。

另外一个要注意的地方，就是在Activity中有一个地方的代码要改一下：

mPopupWindow = new PopupWindow(convertView, ViewGroup.LayoutParams.MATCH_PARENT,
                ViewGroup.LayoutParams.MATCH_PARENT, true);

看出有什么区别了吗？其实就是把WRAP_CONTENT改为了MATCH_PARENT，那么为什么要这么做呢？当然是为了让PopupWindow充满整个根布局了。

最后来看看怎么为PopupWindow添加动画效果：

首先在res/anim文件夹创建两个动画xml，显示弹出时效果：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="@android:integer/config_shortAnimTime"
        android:fromXDelta="0"
        android:fromYDelta="100%p"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:toXDelta="0"
        android:toYDelta="0"/>
</set>

再是退出时效果：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="@android:integer/config_shortAnimTime"
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:toXDelta="0"
        android:toYDelta="100%p" />
</set>

最后还要在values/styles.xml中创建一下动画风格：

 <style name="popupwindowanim" parent="@android:style/Animation.Activity">
        <item name="android:windowEnterAnimation">@anim/popupwindow_enter</item>
        <item name="android:windowExitAnimation">@anim/popupwindow_exit</item>
    </style>

在Activity中添加下面这句代码就搞定了：

mPopupWindow.setAnimationStyle(R.style.popupwindowanim);

效果图：

最后介绍一下上面的其他函数：

首先就是setFocusable，true表示获取焦点，false表示失去焦点，除非PopupWindow里面包含EditText这样的需要输入的控件，否则调不调用此方法无所谓。

再是setTouchable，true表示可触摸，false表示不可触摸。不可触摸，表示PopupWindow不处理触摸事件，所以当设置为false时，点击PopupWindow无响应。

剩下两个方法，setOutsideTouchable和setBackgroundDrawable放在一起使用。当想要实现点击PopupWindow以外的区域也能够让其消失的效果时，要将方法setOutsideTouchable的参数置为true并且给PopupWindow设置背景图片，搜则无效果。但是我用6.0sdk这样做，无效果。

另外要说一点就是我在测试效果的时候多次点击按钮，结果每点击一次，就弹出一个PopupWindow，所以我在每点击一次的时候，将按钮设为不可点击，在PopupWindow消失的时候，将按钮设为可点击。

代码：

package com.egotrip.wcc.ui;
 
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.PopupWindow;
import android.widget.TextView;
 
import com.egotrip.wcc.R;
import com.egotrip.wcc.utils.ToastUtils;
 
public class PopupWindowActivity extends AppCompatActivity implements View.OnClickListener {
 
    private PopupWindow mPopupWindow;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_popup_window);
 
        initView();
    }
 
    private Button mBtn_pop;
    private void initView()
    {
        mBtn_pop = (Button) findViewById(R.id.btn_pop);
    }
 
    public void pop(View v)
    {
        View convertView = LayoutInflater.from(this).inflate(R.layout.layout_popup_window, null);
 
        TextView computer = (TextView) convertView.findViewById(R.id.computer);
        TextView finance = (TextView) convertView.findViewById(R.id.finance);
        TextView manage = (TextView) convertView.findViewById(R.id.manage);
 
        computer.setOnClickListener(this);
        finance.setOnClickListener(this);
        manage.setOnClickListener(this);
 
        mPopupWindow = new PopupWindow(convertView, ViewGroup.LayoutParams.MATCH_PARENT,
                ViewGroup.LayoutParams.MATCH_PARENT, true);
 
        mPopupWindow.setAnimationStyle(R.style.popupwindowanim);
        mPopupWindow.setFocusable(false);
 
        mPopupWindow.showAsDropDown(mBtn_pop, 0, 0);
 
        mBtn_pop.setClickable(false);
    }
 
    @Override
    public void onClick(View v) {
        switch (v.getId())
        {
            case R.id.computer:
                ToastUtils.showToast("计算机", this);
                break;
            case R.id.finance:
                ToastUtils.showToast("金融", this);
                break;
            case R.id.manage:
                ToastUtils.showToast("管理", this);
                break;
        }
        mBtn_pop.setClickable(true);
        mPopupWindow.dismiss();
    }
}

特别注意pop方法的最后一句和onClick方法中switch外面的一句。

参考：

http://blog.csdn.net/harvic880925/article/details/49272285

http://blog.csdn.net/harvic880925/article/details/49278705

0 0