前幾天要用到PopupWindow，一時竟想不起來怎么用，趕緊上網(wǎng)查了查，自己寫了個demo，并在此記錄一下PopupWindow的用法。
創(chuàng)新互聯(lián)服務(wù)項目包括信州網(wǎng)站建設(shè)、信州網(wǎng)站制作、信州網(wǎng)頁制作以及信州網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，信州網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到信州省份的部分城市，未來相信會繼續(xù)擴大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！
使用場景
PopupWindow，顧名思義，就是彈窗，在很多場景下都可以見到它。例如ActionBar/Toolbar的選項彈窗，一組選項的容器，或者列表等集合的窗口等等。
基本用法
使用PopupWindow很簡單，可以總結(jié)為三個步驟：
其中，第二步是可選的（不過基本上都要進行第二步的設(shè)置）。下面是一個簡單的例子：
// 用于PopupWindow的View View contentView=LayoutInflater.from(context).inflate(layoutRes, null, false); // 創(chuàng)建PopupWindow對象，其中： // 第一個參數(shù)是用于PopupWindow中的View，第二個參數(shù)是PopupWindow的寬度， // 第三個參數(shù)是PopupWindow的高度，第四個參數(shù)指定PopupWindow能否獲得焦點 PopupWindow window=new PopupWindow(contentView, 100, 100, true); // 設(shè)置PopupWindow的背景 window.setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT)); // 設(shè)置PopupWindow是否能響應(yīng)外部點擊事件 window.setOutsideTouchable(true); // 設(shè)置PopupWindow是否能響應(yīng)點擊事件 window.setTouchable(true); // 顯示PopupWindow，其中： // 第一個參數(shù)是PopupWindow的錨點，第二和第三個參數(shù)分別是PopupWindow相對錨點的x、y偏移 window.showAsDropDown(anchor, xoff, yoff); // 或者也可以調(diào)用此方法顯示PopupWindow，其中： // 第一個參數(shù)是PopupWindow的父View，第二個參數(shù)是PopupWindow相對父View的位置， // 第三和第四個參數(shù)分別是PopupWindow相對父View的x、y偏移 // window.showAtLocation(parent, gravity, x, y);
每個方法的作用都寫在注解里了，相信大家都能看懂。不過這里要注意這兩行：
window.setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT)); window.setOutsideTouchable(true);
只有同時設(shè)置PopupWindow的背景和可以響應(yīng)外部點擊事件，它才能“真正”響應(yīng)外部點擊事件。也就是說，當你點擊PopupWindow的外部或者按下“Back”鍵時，PopupWindow才會消失。
使用showAsDropDown方法顯示PopupWindow
通常情況下，調(diào)用showAsDropDown方法后PopupWindow將會在錨點的左下方顯示（drop down）。但是，有時想讓PopupWindow在錨點的上方顯示，或者在錨點的中間位置顯示，此時就需要用到showAsDropDown方法的xoff和yoff參數(shù)了。
這里我們的目的不僅包括上面提到的兩種情況（錨點上方或錨點中部），而是囊括了水平和垂直方向各5種顯示方式：
水平方向：
ALIGN_LEFT：在錨點內(nèi)部的左邊；
ALIGN_RIGHT：在錨點內(nèi)部的右邊；
CENTER_HORI：在錨點水平中部；
TO_RIGHT：在錨點外部的右邊；
TO_LEFT：在錨點外部的左邊。
垂直方向：
ALIGN_ABOVE：在錨點內(nèi)部的上方；
ALIGN_BOTTOM：在錨點內(nèi)部的下方；
CENTER_VERT：在錨點垂直中部；
TO_BOTTOM：在錨點外部的下方；
TO_ABOVE：在錨點外部的上方。
下面來看張圖：
我們先定義一個類對PopupWindow進行簡單的封裝：
重慶分公司
重慶分公司
public abstract class CommonPopupWindow {
protected Context context;
protected View contentView;
protected PopupWindow mInstance;
public CommonPopupWindow(Context c, int layoutRes, int w, int h) {
context=c;
contentView=LayoutInflater.from(c).inflate(layoutRes, null, false);
initView();
initEvent();
mInstance=new PopupWindow(contentView, w, h, true);
initWindow();
}
public View getContentView() { return contentView; }
public PopupWindow getPopupWindow() { return mInstance; }
protected abstract void initView();
protected abstract void initEvent();
protected void initWindow() {
mInstance.setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
mInstance.setOutsideTouchable(true);
mInstance.setTouchable(true);
}
public void showBashOfAnchor(View anchor, LayoutGravity layoutGravity, int xmerge, int ymerge) {
int[] offset=layoutGravity.getOffset(anchor, mInstance);
mInstance.showAsDropDown(anchor, offset[0]+xmerge, offset[1]+ymerge);
}
public void showAsDropDown(View anchor, int xoff, int yoff) {
mInstance.showAsDropDown(anchor, xoff, yoff);
}
public void showAtLocation(View parent, int gravity, int x, int y) {
mInstance.showAtLocation(parent, gravity, x, y);
}
}
這里我們要實現(xiàn)的就是“showBashOfAnchor”方法，其中有一個“LayoutGravity”類型的參數(shù)，這就是控制PopupWindow相對錨點位置的對象。下面來定義“LayoutGravity”：
public static class LayoutGravity {
private int layoutGravity;
// waring, don't change the order of these constants!
public static final int ALIGN_LEFT=0x1;
public static final int ALIGN_ABOVE=0x2;
public static final int ALIGN_RIGHT=0x4;
public static final int ALIGN_BOTTOM=0x8;
public static final int TO_LEFT=0x10;
public static final int TO_ABOVE=0x20;
public static final int TO_RIGHT=0x40;
public static final int TO_BOTTOM=0x80;
public static final int CENTER_HORI=0x100;
public static final int CENTER_VERT=0x200;
public LayoutGravity(int gravity) {
layoutGravity=gravity;
}
public int getLayoutGravity() { return layoutGravity; }
public void setLayoutGravity(int gravity) { layoutGravity=gravity; }
public void setHoriGravity(int gravity) {
layoutGravity&=(0x2+0x8+0x20+0x80+0x200);
layoutGravity|=gravity;
}
public void setVertGravity(int gravity) {
layoutGravity&=(0x1+0x4+0x10+0x40+0x100);
layoutGravity|=gravity;
}
public boolean isParamFit(int param) {
return (layoutGravity & param) > 0;
}
public int getHoriParam() {
for(int i=0x1; i<=0x100; i=i<<2)
if(isParamFit(i))
return i;
return ALIGN_LEFT;
}
public int getVertParam() {
for(int i=0x2; i<=0x200; i=i<<2)
if(isParamFit(i))
return i;
return TO_BOTTOM;
}
public int[] getOffset(View anchor, PopupWindow window) {
int anchWidth=anchor.getWidth();
int anchHeight=anchor.getHeight();
int winWidth=window.getWidth();
int winHeight=window.getHeight();
View view=window.getContentView();
if(winWidth<=0)
winWidth=view.getWidth();
if(winHeight<=0)
winHeight=view.getHeight();
int xoff=0;
int yoff=0;
switch (getHoriParam()) {
case ALIGN_LEFT:
xoff=0; break;
case ALIGN_RIGHT:
xoff=anchWidth-winWidth; break;
case TO_LEFT:
xoff=-winWidth; break;
case TO_RIGHT:
xoff=anchWidth; break;
case CENTER_HORI:
xoff=(anchWidth-winWidth)/2; break;
default:break;
}
switch (getVertParam()) {
case ALIGN_ABOVE:
yoff=-anchHeight; break;
case ALIGN_BOTTOM:
yoff=-winHeight; break;
case TO_ABOVE:
yoff=-anchHeight-winHeight; break;
case TO_BOTTOM:
yoff=0; break;
case CENTER_VERT:
yoff=(-winHeight-anchHeight)/2; break;
default:break;
}
return new int[]{ xoff, yoff };
}
}
這里的主要方法就是“getOffset”，它會根據(jù)水平和垂直方向的gravity決定PopupWindow相對錨點的位置。
使用“LayoutGravity”時，可以通過“setHoriGravity”和“setVertGravity”方法設(shè)置水平和垂直方向的gravity，或者新建一個“LayoutGravity”對象。
下面是一個demo：
使用setAnimationStyle方法添加動畫
上面我們提到了為PopupWindow設(shè)置背景和注冊事件監(jiān)聽器，現(xiàn)在我們再來為PopupWindow添加動畫。
這里的動畫是指PopupWindow出現(xiàn)和消失時的動畫。默認是直接彈出和消失，這樣難免讓用戶有一種突兀的感覺；如果PopupWindow能夠“滑入”屏幕和“滑出”屏幕（或者其他方式），用戶體驗會更好。
為PopupWindow添加動畫可以調(diào)用`setAnimationStyle`方法，該方法只有一個參數(shù)，就是指定動畫的樣式，因此我們需要定義動畫資源和樣式資源。
下面是一個“滑入滑出”動畫：
<?xml version="1.0" encoding="utf-8"?>
<?xml version="1.0" encoding="utf-8"?>
然后定義“滑動”動畫樣式：
現(xiàn)在我們就可以為PopupWindow添加“滑動”動畫了：
window.setAnimationStyle(R.style.animTranslate);
我們來看下效果：
PS：這里由于動畫的時間太短（200ms），另外轉(zhuǎn)GIF的時候可能截取的頻率有點低，導(dǎo)致滑動效果不是很明顯，建議自己運行demo查看
現(xiàn)在PopupWindow的出現(xiàn)/消失已經(jīng)不是那么突兀了。不過，當彈窗出現(xiàn)后，發(fā)現(xiàn)彈窗和背景不是很容易區(qū)分，如果此時彈窗的背景能“變暗”就好了。
沒問題，我們可以在彈窗出現(xiàn)后讓背景變暗，并在彈窗消失后讓背景還原：
window.setOnDismissListener(new PopupWindow.OnDismissListener() {
@Override
public void onDismiss() {
WindowManager.LayoutParams lp=getWindow().getAttributes();
lp.alpha=1.0f;
getWindow().clearFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND);
getWindow().setAttributes(lp);
}
});
window.showAtLocation(activityPopup, Gravity.BOTTOM, 0, 0);
WindowManager.LayoutParams lp=getWindow().getAttributes();
lp.alpha=0.3f;
getWindow().addFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND);
getWindow().setAttributes(lp);
現(xiàn)在再來看下效果：
現(xiàn)在PopupWindow就比較明顯了。
另外，我們還實現(xiàn)了透明度、縮放和旋轉(zhuǎn)三種動畫樣式，實現(xiàn)方式和上述大同小異，這里就不再贅述。
源代碼
上述所有代碼（包括未給出的）都已上傳到GitHub：
https://github.com/jzyhywxz/PopupWindow
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
