PopUpWindow基础使用详解

        先上效果图：

      

     一、PopupWindow与AlertDialog的区别

       有很多的博友好奇同样是实现一个弹窗的功能，为什么就不选择用AlertDialog呢？而且AlertDialog实现起来也非常的简单。好的，那么我们就说一下AlertDialog不能指定显示的位置，只能默认显示在屏幕的中间，（它有一个参数WindowManager来改变位置）而PopupWindow是可以指定显示位置的，随便哪个位置都可以，相比AlertDialog的实现更加的灵活性，那么现在你会选择使用哪个呢？

     二、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最基本的三个参数一定要设置的：View contentView、int width、int height；这三个参数少任何一个都不会弹出PopupWindow。

    使用方法一来实现的核心代码：

View contentView = LayoutInflater.from(MainActivity.this).inflate(R.layout.popuplayout, null);
mPopWindow = new PopupWindow(contentView);
mPopWindow.setWidth(ViewGroup.LayoutParams.WRAP_CONTENT);
mPopWindow.setHeight(ViewGroup.LayoutParams.WRAP_CONTENT);

      为什么要强制设置contentView；很简单的原因是因为PopupWindow没有默认的布局，它不像AlertDialog那样只设置一个setTitle就会弹出来一个框，所以布局需要我们自己来设置。

      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)：

      下面我们附上代码   activity_main.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent">

    <RelativeLayout android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:background="#f62f7c8e">

        <TextView android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:layout_alignParentLeft="true"
                  android:textColor="#50484b"
                  android:padding="10dp"
                  android:text="返回"/>

        <TextView
            android:id="@+id/menu"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:textColor="#50484b"
            android:padding="10dp"
            android:text="菜单"/>

    </RelativeLayout>
</LinearLayout>

         popuplayout.xml ：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:paddingBottom="2dp">

    <TextView
        android:id="@+id/pop_computer"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/pop_text_style"
        android:text="计算机"/>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#acafa19a"
       />

    <TextView
        android:id="@+id/pop_financial"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/pop_text_style"
        android:text="金融"/>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#acafa19a"
       />

    <TextView
        android:id="@+id/pop_manage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/pop_text_style"
        android:text="管理"/>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#acafa19a"
        />

</LinearLayout>

        styles.xml:

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <!-- 自定义相机相关dialog样式 -->
    <style name="pop_text_style" parent="@android:style/Theme.Holo.DialogWhenLarge">
        <item name="android:windowAnimationStyle">@style/myAnim</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowIsFloating">true</item>
    </style>

    <!-- dialog进出入动画 -->
    <style name="myAnim" parent="@android:style/Animation.Dialog">
        <item name="@android:windowEnterAnimation">@anim/l_dialog_enter</item>
        <item name="@android:windowExitAnimation">@anim/l_dialog_exit</item>
    </style>

</resources>

               dialog的动画实现，先是在res资源下创建一个anim文件夹，然后添加两个布局 分别是动画出入动画：

      进入 I_dialog.enter.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>

     退出 I_dialog.exit.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="0"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:toXDelta="0"
        android:toYDelta="100%p" />

</set>

       下面附加主Activity的代码：

package com.zero.cui.popupwindowdemo;

import android.content.Context;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.PopupWindow;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity implements View.OnClickListener{
    private PopupWindow mPopWindow;
    private TextView mMenuTv;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mMenuTv = (TextView)findViewById(R.id.menu);
        mMenuTv.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                showPopupWindow();
            }
        });
    }


    private void showPopupWindow() {
        View contentView = LayoutInflater.from(MainActivity.this).inflate(R.layout.popuplayout, null);
        mPopWindow = new PopupWindow(contentView);
        mPopWindow.setWidth(ViewGroup.LayoutParams.WRAP_CONTENT);
        mPopWindow.setHeight(ViewGroup.LayoutParams.WRAP_CONTENT);

        TextView tv1 = (TextView)contentView.findViewById(R.id.pop_computer);
        TextView tv2 = (TextView)contentView.findViewById(R.id.pop_financial);
        TextView tv3 = (TextView)contentView.findViewById(R.id.pop_manage);
        tv1.setOnClickListener(this);
        tv2.setOnClickListener(this);
        tv3.setOnClickListener(this);
        //设置动画所对应的style
        mPopWindow.setAnimationStyle(R.style.myAnim);
        //显示PopupWindow
        mPopWindow.showAsDropDown(mMenuTv);
    }

    @Override
    public void onClick(View v) {
            switch (v.getId()){
                case R.id.pop_computer:{
                    Toast.makeText(this, "点击的计算机", Toast.LENGTH_SHORT).show();
                    mPopWindow.dismiss();
                }
                break;
                case R.id.pop_financial:{
                    Toast.makeText(this,"点击的金融",Toast.LENGTH_SHORT).show();
                    mPopWindow.dismiss();
                }
                break;
                case R.id.pop_manage:{
                    Toast.makeText(this,"点击的管理",Toast.LENGTH_SHORT).show();
                    mPopWindow.dismiss();
                }
                break;
            }

    }

}