PopUpWindow使用詳解(一)――基本使用

前言：不要嫌前進的慢，只要1直在前進就好。

相干文章：

1、《PopUpWindow使用詳解(1)――基本使用》

2、《PopUpWindow使用詳解(2)――進階及答疑》

有同學講到想要知道PopUpWindow的知識，這里就給大家講1講PopUpWindow的基本用法和原理吧。這段時間博客可能會更新比較慢，由于你懂的 !!-_- ，往左看公告，嘿嘿。

先看1下我們要做的效果：

這個效果很容易理解：當點擊btn時，在底部彈出PopupWindow,然后點擊各個item彈出對應toast。

1、概述

1、PopupWindow與AlertDialog的區分

最關鍵的區分是AlertDialog不能指定顯示位置，只能默許顯示在屏幕最中間（固然也能夠通過設置WindowManager參數來改變位置）。而PopupWindow是可以指定顯示位置的，隨意哪一個位置都可以，更加靈活。
有關Dialog的相干知識，大家可以參考我的系列博客：《詳解Dialog（1）――基礎元素構建》

2、PopupWindow的相干函數

（1）、構造函數：

//方法1： public PopupWindow (Context context) //方法2： public PopupWindow(View contentView) //方法3： public PopupWindow(View contentView, int width, int height) //方法4： public PopupWindow(View contentView, int width, int height, boolean focusable)
重要注意：看這里有4個構造函數，但要生成1個PopupWindow最基本的3個條件是1定要設置的：View contentView，int width, int height ；少任意1個就不可能彈出來PopupWindow！！！！
所以，如果使用方法1來構造PopupWindow，那完全的構造代碼應當是這樣的：
View contentView = LayoutInflater.from(MainActivity.this).inflate(R.layout.popuplayout, null); PopupWindwo popWnd = PopupWindow (context); popWnd.setContentView(contentView); popWnd.setWidth(ViewGroup.LayoutParams.WRAP_CONTENT); popWnd.setHeight(ViewGroup.LayoutParams.WRAP_CONTENT);
有關為何1定要設置width和height的緣由，我們后面會講，這里說1下為何樣強迫設置contentView；很簡單的緣由是由于PopupWindow沒有默許布局，它不會像AlertDialog那樣只setTitle,就可以彈出來1個框。PopupWindow是沒有默許布局的，它的布局只有通過我們自己設置才行。由于方法3中，含有了這3個必備條件，不用單獨設置contentview或width、height，所以構造方法3是用的最多的1個構造方法。
最后，方法4中的focusable變量不是必須的，有關它的方法和意義，我們會在下1篇中細講。

（2）顯示函數

顯示函數主要使用下面3個：

//相對某個控件的位置（正左下方），無偏移 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)：
這里有兩種顯示方式：
1、顯示在某個指定控件的下方
showAsDropDown(View anchor)：
showAsDropDown(View anchor, int xoff, int yoff)；
2、指定父視圖，顯示在父控件的某個位置（Gravity.TOP,Gravity.RIGHT等）
showAtLocation(View parent, int gravity, int x, int y)；

（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()，用于不需要的時候，將窗體隱藏掉。

好了，空話不多說了，我們就做1個上面的例子來看1下。

2、簡單示例（showAtLocation顯示窗體）

在這個例子中，我們實現兩個功能，彈出popupWindow和Item點擊響應

1、主布局(main.xml)

從效果圖中也能夠看到主布局只有1個button，甚么都沒有，所以它的布局代碼哪下：

2、PopupWindow布局（popuplayout.xml）

在概述中，我們提到了，必須為PopupWindow設置布局，從效果圖中，我也能夠看到它的布局有3個item，中間用橫線分開。所以這里布局使用Listview應當更適合，但為了減輕代碼難度，我們直接使用TextView和分隔線來代替,代碼以下：

3、MainActivity代碼

先貼出來完全代碼，然后再逐漸講授：
public class MainActivity extends Activity implements View.OnClickListener{ private PopupWindow mPopWindow; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); Button btn = (Button) findViewById(R.id.btn); btn.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { showPopupWindow(); } }); } private void showPopupWindow() { //設置contentView View contentView = LayoutInflater.from(MainActivity.this).inflate(R.layout.popuplayout, null); mPopWindow = new PopupWindow(contentView, LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT, true); mPopWindow.setContentView(contentView); //設置各個控件的點擊響應 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); //顯示PopupWindow View rootview = LayoutInflater.from(MainActivity.this).inflate(R.layout.main, null); mPopWindow.showAtLocation(rootview, Gravity.BOTTOM, 0, 0); } @Override public void onClick(View v) { int id = v.getId(); switch (id){ case R.id.pop_computer:{ Toast.makeText(this,"clicked computer",Toast.LENGTH_SHORT).show(); mPopWindow.dismiss(); } break; case R.id.pop_financial:{ Toast.makeText(this,"clicked financial",Toast.LENGTH_SHORT).show(); mPopWindow.dismiss(); } break; case R.id.pop_manage:{ Toast.makeText(this,"clicked manage",Toast.LENGTH_SHORT).show(); mPopWindow.dismiss(); } break; } } }

(1)首先看OnCreate()

在OnCreate()中只做了1個操作，當點擊Button時，顯示窗體：
public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); Button btn = (Button) findViewById(R.id.btn); btn.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { showPopupWindow(); } }); }

(2)、顯示PopupWindow

下面是有關窗體操作的代碼：
private void showPopupWindow() { //設置contentView View contentView = LayoutInflater.from(MainActivity.this).inflate(R.layout.popuplayout, null); mPopWindow = new PopupWindow(contentView, LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT, true); //設置各個控件的點擊響應 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); //顯示PopupWindow View rootview = LayoutInflater.from(MainActivity.this).inflate(R.layout.main, null); mPopWindow.showAtLocation(rootview, Gravity.BOTTOM, 0, 0); }
這里一樣分為3部份：
第1部份：設置ContentView
View contentView = LayoutInflater.from(MainActivity.this).inflate(R.layout.popuplayout, null); mPopWindow = new PopupWindow(contentView,LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT, true);
利用LayoutInflater獲得R.layout.popuplayout對應的View,然后利用我們上面所講的構造函數3來生成mPopWindow；
這里 要注意1個問題：在這個構造函數里，我們傳進去了width和height全部都是WRAP_CONTENT；而在R.layout.popuplayou的根布局中，我們定義的width和height代碼是：layout_width="fill_parent",layout_height="wrap_content";原代碼以下：
………………
這里就有沖突了，那顯示出來的popupWindow是按哪一個來的呢？
從效果圖中來看，明顯PopupWindow寬度并沒有全屏，明顯是按代碼中的布局為準。
這說明了：
**如果在代碼中重新設置了popupWindow的寬和高，那就以代碼中所設置為準。**（至于緣由，下篇會講）

第2部份：設置各個控件的點擊響應
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);
這部份沒甚么好講了，設置PopupWindow中各個控件的點擊響應，但1定要注意的是，PopupWindow中各個控件的所在的布局是contentView，而不是在Activity中，如果大家直接使用
TextView tv1 = (TextView)findViewById(R.id.pop_computer);
肯定會報錯，由于R.id.pop_computer這個ID值在當前Activtiy的布局文件中是找不到的。只有在R.layout.popuplayout的布局文件中才會有！所以，這就是為何，要在findViewById(R.id.pop_computer)前指定contentView的緣由?。。≡趯嶋H項目中，很容易遇到像這類需要指定根布局的情況，大家需要注意。
有關響應，就沒甚么好講的了，由于我們在類頂部派生了View.OnClickListener，所以在OnClick函數中，直接處理便可，代碼以下：(在點擊不同的Item時，1邊彈出不同的toast，1邊將PopupWindow隱藏掉)
@Override public void onClick(View v) { int id = v.getId(); switch (id){ case R.id.pop_computer:{ Toast.makeText(this,"clicked computer",Toast.LENGTH_SHORT).show(); mPopWindow.dismiss(); } break; case R.id.pop_financial:{ Toast.makeText(this,"clicked financial",Toast.LENGTH_SHORT).show(); mPopWindow.dismiss(); } break; case R.id.pop_manage:{ Toast.makeText(this,"clicked manage",Toast.LENGTH_SHORT).show(); mPopWindow.dismiss(); } break; } }
第3部份：showAtLocation顯示窗體
View rootview = LayoutInflater.from(MainActivity.this).inflate(R.layout.main, null); mPopWindow.showAtLocation(rootview, Gravity.BOTTOM, 0, 0);
showAtLocation的顯示就將PopupWindow的實例放在1個父容器中，然后指定顯示在父容器中的位置。
由于，我們要將mPopWindow放在全部屏幕的最低部，所以我們將R.layout.main做為它的父容器。將其顯示在BOTTOM的位置。

到這里，有關PopupWindow的顯示及其中控件響應基本都講完了，下面，我們就講講showAsDropDown顯示窗體的用法。

源碼在文章底部給出

3、另外一示例（showAsDropDown顯示窗體）

大家先看下面這個效果圖：

這個效果圖演示的是，在點擊標題欄右方的“菜單”按鈕時，在其下方顯示1個自定義的菜單列表。

1、一樣，我們先看看主布局代碼（main.xml）

這段代碼的布局很簡單，就是生成1個標題欄，上面有兩個按鈕，“返回”和“菜單”

2、PopupWindow布局代碼（popuplayout.xml）

這部份布局也不難，只得利用純代碼硬生成1個列表的布局。在實際項目中，大家應當使用listview來動態生成列表，這樣生成的popupWindow就是可以復用的了。有關布局就不再多講，跟上面的布局基本1樣，只是換了背景。

3、MainActivity代碼

一樣是先貼出來完全代碼，然后再細講。
public class MainActivity extends Activity implements View.OnClickListener{ private PopupWindow mPopWindow; private TextView mMenuTv; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.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); mPopWindow.showAsDropDown(mMenuTv); } @Override public void onClick(View v) { int id = v.getId(); switch (id){ case R.id.pop_computer:{ Toast.makeText(this, "clicked computer", Toast.LENGTH_SHORT).show(); mPopWindow.dismiss(); } break; case R.id.pop_financial:{ Toast.makeText(this,"clicked financial",Toast.LENGTH_SHORT).show(); mPopWindow.dismiss(); } break; case R.id.pop_manage:{ Toast.makeText(this,"clicked manage",Toast.LENGTH_SHORT).show(); mPopWindow.dismiss(); } break; } } }
這段代碼的意義就是點擊menu彈出popupwindow,然后對各個item進行響應，我們主要講講showPopupWindow() 這部份，對item響應的部份與上個示例都1樣，就不再細講。
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); mPopWindow.showAsDropDown(mMenuTv); }
這里首先注意的1個地方，在這個示例中，我們是使用的構造方法2來生成的PopupWindow實例的,一樣，再強調1遍：contentView，Width，Height這3個元素是必須設置的，缺1不可！至于為何要顯式設置Width，Height，我們下篇會講到。
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);
然后就是使用showAsDropDown（）顯示PopupWindow：
mPopWindow.showAsDropDown(mMenuTv);
大家也現樣可使用showAsDropDown(View anchor, int xoff, int yoff)：來添加相對x軸和y軸的位移量。具體用法就不再細講，沒甚么難度，大家試1試便可。
好了，這部份示例也講完了，下面我們就在這個示例上升級1個功能：講講怎樣在彈出PopupWindow的同時利用陰影把背景全部給遮罩起來。
源碼在文章底部給出

4、提高：為菜單添加陰影

這部份的效果圖是下面這樣的：

從效果圖中可以看出，這部份是上1個示例的升級版，就是在點出PopupWindow的同時，把背景用半透明黑色遮罩住，像彈出AlertDialog1樣的效果。下面就來看看這個效果是怎樣實現的吧。

1、PopupWindow布局（popuplayout.xml）

其實原理很簡單，使PopupWindow的界面充滿全屏，而實際的列表菜單只是其中的1個子布局便可，所以此時的PopupWindow的布局代碼以下：

可見在列表項外面又包了1層RelativeLayout，將列表的根布局LinearLayout靠父窗口右側顯示便可。給RelativeLayout添加了半透明背景android:background="#66000000"
這樣要非常注意的是，根布局RelativeLayout設置的android:layout_width和android:layout_height是無意義的，由于我們會通過代碼重新設置：
private void showPopupWindow() { View contentView = LayoutInflater.from(MainActivity.this).inflate(R.layout.popuplayout, null); mPopWindow = new PopupWindow(contentView); mPopWindow.setWidth(ViewGroup.LayoutParams.FILL_PARENT); mPopWindow.setHeight(ViewGroup.LayoutParams.FILL_PARENT); ………………//設置各控件點擊響應 mPopWindow.showAsDropDown(mMenuTv); }
在這里，我們通過代碼將PopupWindow的width和height設置為LayoutParams.FILL_PARENT。那大家可能會有疑問：為何我在xml中布局中明明寫好了根布局RelativeLayout的寬和高，為何非要我們在代碼中重新設置呢？不設置還顯示不出來…………
下篇，我們將會解答這個問題。
好啦，這個示例關鍵部份講完了，其它的大家就看源碼吧。
源碼在文章底部給出

5、為PopupWindow添加動畫

先看看效果：

為PopupWindow添加動畫其實不難，只需要使用1個函數便可：

//設置動畫所對應的style mPopWindow.setAnimationStyle(R.style.contextMenuAnim);
下面就來看看具體是如何添加動畫的

1、生成動畫對應的style

（1）、進入時的動畫：(context_menu_enter.xml)

這段代碼的意義就是從底部進入，即從Y軸100%的位置移動到0的位置。有關動畫的知識，大家可以參考《Animation 動畫詳解（1）――alpha、scale、translate、rotate、set的xml屬性及用法》      這個系列文章。

（2）、退出時動畫(context_menu_exit.xml)

效果是從上向下移動。

（3）、最后，生成對應的style---contextMenuAnim

android:windowEnterAnimation設置進場動畫，android:windowExitAnimation設置出場動畫。

2、使用AnimationStyle

使用時非常簡單，直接將對應的style通過setAnimationStyle設置進PopupWindow實例便可，代碼以下，難度不大，不再細講。
private void showPopupWindow() { View contentView = LayoutInflater.from(MainActivity.this).inflate(R.layout.popuplayout, null); mPopWindow = new PopupWindow(contentView); mPopWindow.setWidth(ViewGroup.LayoutParams.FILL_PARENT); mPopWindow.setHeight(ViewGroup.LayoutParams.FILL_PARENT); ………………//設置各子項點擊響應 mPopWindow.setAnimationStyle(R.style.contextMenuAnim); mPopWindow.showAsDropDown(mMenuTv); }
到這里，這個示例的代碼就講完了。源碼在文章底部1起給出。這篇講述了有關PopupWindow的基本使用方法，下篇將針對還未講述的幾個函數，和問題點結合源碼深入剖析。

源碼內容：

1、《PopshowAtLocation》：第2部份：簡單示例（showAtLocation顯示窗體）對應源碼

2、《PopupShowAsDropDown》：第3部份：另外一示例（showAsDropDown顯示窗體） 對應源碼

3、《PopDropDownBg》：第4部份：提高：為菜單添加陰影  對應源碼

4、《PopupAnim》：第5部份：為PopupWindow添加動畫  對應源碼

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈