Android widget之PopupWindow

概述

Android應用中經常會彈出一個窗體，進行一些操作，比如說分享、選擇城市等等，類似於AlertDialog,下面將詳細講解PopupWindow。

構造方法

PopupWindow的構造方法，官方給出的有9種，項目中常用的只有最後兩種

1. PopupWindow(Context context)
   Create a new empty, non focusable popup window of dimension (0,0).
   創建一個寬度爲0、高度爲0的無焦點的空彈窗。
   這種方法創建的彈窗，提供了背景
   context爲上下文。

2. PopupWindow(Context context, AttributeSet attrs)
   Create a new empty, non focusable popup window of dimension (0,0).
   創建一個寬度爲0、高度爲0的無焦點的空彈窗。
   這種方法創建的彈窗，提供了背景

3. PopupWindow(Context context, AttributeSet attrs, int defStyleAttr)
   Create a new empty, non focusable popup window of dimension (0,0).
   創建一個寬度爲0、高度爲0的無焦點的空彈窗。
   這種方法創建的彈窗，提供了背景

4. PopupWindow(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes)
   Create a new empty, non focusable popup window of dimension (0,0).
   創建一個寬度爲0、高度爲0的無焦點的空彈窗。
   這種方法創建的彈窗，提供了背景

5. PopupWindow()
   Create a new empty, non focusable popup window of dimension (0,0).
   The popup does not provide any background. This should be handled by the content view.
   創建一個寬度爲0、高度爲0的無焦點的空彈窗。
   這種方法創建的彈窗，沒有背景，需要自己填充

6. PopupWindow(View contentView)
   Create a new non focusable popup window which can display the contentView. The dimension of the window are (0,0).
   The popup does not provide any background. This should be handled by the content view.
   創建一個寬度爲0、高度爲0，可以自定義內容的無焦點彈窗。
   這種方法創建的彈窗沒有背景，需要自己填充
   contentView：彈窗展示的內容

7. PopupWindow(int width, int height)
   Create a new empty, non focusable popup window. The dimension of the window must be passed to this constructor.
   The popup does not provide any background. This should be handled by the content view.
   創建一個寬度爲width、高度爲height的無焦點空彈窗。
   這種方法創建的彈窗沒有背景，需要自己填充
   height：彈窗的高度
   width：彈窗的寬度

8. PopupWindow(View contentView, int width, int height)
   Create a new non focusable popup window which can display the contentView.
   創建一個自定義寬度、高度、顯示內容的無焦點彈窗。
   contentView：自定義的彈窗顯示內容
   width：彈窗寬度
   height：彈窗高度
   舉個栗子

View view=getLayoutInflater().inflate(R.layout.window, null);
PopupWindow  mPop =new  
PopupWindow(view,LayoutParams.WRAP_CONTENT,
LayoutParams.WRAP_CONTENT);

1. PopupWindow(View contentView, int width, int height, boolean focusable)
   Create a new popup window which can display the contentView.
   創建一個自定義寬度、高度、顯示內容、是否有焦點的彈窗。
   contentView：自定義的彈窗顯示內容
   width：彈窗寬度
   height：彈窗高度
   focusable：是否有焦點，true：有焦點；false：無焦點（默認爲false，與第8中構造方法效果相同）
   舉個栗子

View view=getLayoutInflater().inflate(R.layout.window, null);
PopupWindow  mPop =new  
PopupWindow(view,LayoutParams.WRAP_CONTENT,
LayoutParams.WRAP_CONTENT,true);

顯示方式

PopupWindow一般有兩種展示方法，用showAsDropDown()和showAtLocation()兩種方法實現。一般參數有兩種，有偏移和無偏移。
官方的方法如下
showAsDropDown()
- showAsDropDown(View anchor, int xoff, int yoff, int gravity)
- showAsDropDown(View anchor, int xoff, int yoff)
- showAsDropDown(View anchor)
anchor可以理解爲錨，彈窗顯示在anchor下面，xoff爲X軸偏移量，yoff爲Y軸偏移量，gravity爲顯示方式
上栗子
- mPop.showAsDropDown(anchor);
彈窗顯示在anchor正下方，無任何偏移。
- mPop.showAsDropDown(anchor,xoff,yoff);
彈窗在anchor下方顯示，X軸偏移xoff,Y軸偏移yoff。
- mPop.showAsDropDown(anchor,xoff,yoff,Gravity.CENTER);
彈出在anchor下方居中顯示，同時X軸偏移xoff,Y軸偏移yoff。

showAtLocation()
- showAtLocation(View parent, int gravity, int x, int y)
按函數名來理解，很容易看出該函數的意義，即在某個位置顯示彈窗，我們要做的就是爲彈窗設置Location。
parent：彈窗顯示的父容器
gravity：顯示方式
x：X軸偏移量
y：Y軸偏移量
栗子來啦

mPop.showAtLocation(PopWindow.this.findViewById(R.id.rl), 
Gravity.TOP | Gravity.LEFT, 20, 20);

在屏幕頂部|居右，X軸偏移20，Y軸偏移20；

實慄

這裏實現一個常見的分享彈窗，點擊彈窗外面或者點擊back鍵，關閉彈窗

兩個佈局文件，一個主界面佈局文件、一個彈框內容佈局文件
activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <Button
        android:id="@+id/btn1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="showAsDropDown無偏移"  />
    <Button
        android:id="@+id/btn2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="showAsDropDown有偏移"  />

</LinearLayout>

popup_share.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/white">
    <LinearLayout 
        android:layout_marginLeft="10dp"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <ImageView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/umeng_socialize_wechat"/>
        <TextView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="10sp"
            android:textColor="@color/black"
            android:layout_gravity="center"
            android:text="微信好友"/>
    </LinearLayout>
    <LinearLayout 
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <ImageView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/umeng_socialize_wxcircle"/>
        <TextView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="10sp"
            android:textColor="@color/black"
            android:layout_gravity="center"
            android:text="微信朋友圈"/>
    </LinearLayout>
    <LinearLayout 
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <ImageView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/umeng_socialize_qq_on"/>
        <TextView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="10sp"
            android:textColor="@color/black"
            android:layout_gravity="center"
            android:text="QQ好友"/>
    </LinearLayout>
    <LinearLayout 
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <ImageView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/umeng_socialize_qzone_on"/>
        <TextView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="10sp"
            android:textColor="@color/black"
            android:layout_gravity="center"
            android:text="QQ空間"/>
    </LinearLayout>
    <LinearLayout 
        android:layout_marginRight="10dp"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <ImageView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/umeng_socialize_sina_on"/>
        <TextView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="10sp"
            android:textColor="@color/black"
            android:layout_gravity="center"
            android:text="微博"/>
    </LinearLayout>
</LinearLayout>

重新activity的onCreate方法

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        popupView= getLayoutInflater().inflate(R.layout.popup_share, null);
        mPop = new PopupWindow(popupView,
            LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT,true);
        mPop.setBackgroundDrawable(new ColorDrawable(0));

        btn1=(Button) findViewById(R.id.btn1);
        btn1.setOnClickListener(this);
        btn2=(Button) findViewById(R.id.btn2);
        btn2.setOnClickListener(this);
    }

兩種顯示方法的觸發事件

@Override
    public void onClick(View v) {
        // TODO Auto-generated method stub
        switch (v.getId()) {
        case R.id.btn1:
            mPop.showAsDropDown(btn1);
            break;
        case R.id.btn2:
            mPop.showAsDropDown(btn2,290,-50);
            break;
        default:
            break;
        }
    }