PopupWindow在android中的使用分析
PopupWindow是应用开发中经常用到的组建，使用它可以在当前屏幕的上层显示一个弹窗，同时也可以指定弹窗的位置以及背景色等特性，大大提高用户体验，那么这里我就以下几点介绍它的使用：
1
从指定的位置弹出这个窗口（淡入淡出动画）
2
从屏幕底部弹出这个窗口（带有透明度背景，自定义触摸其他位置自动关闭弹窗）
我的效果图如下：
下面直接上代码，具体如下所示（按开发顺序排列）
1
自定义一个继承自PopupWindow的类
publicclassPopupDialog
extendsPopupWindow {
publicPopupDialog(View
view,intwidth,intheight)
{
super(view,width,height);
}
}
2自定义一个负责设定PopupWindow特性的属性类
publicclassPopup
{
privateintxPos;
//弹出窗口的x方向位置
privateintyPos;
//弹出窗口的y方向位置
privateintvWidth;
//窗口显示内容的视图宽度
privateintvHeight;
//窗口显示内容的视图高度
privateintanimFadeInOut;
//窗口显示动画
privateintcontentView;
//潜入在窗口的视图
privateView
customView;
//潜入的窗口视图view
privatebooleanisClickable;
//视图外部是否可以点击
privateOnDismissListener
listener;
//监听弹窗是否dismiss
privateOnTouchListener
touchListener;
//监听触摸位置
privatefloatbgAlpha;
//背景遮罩的透明度
publicintgetxPos()
{
returnxPos;
}
publicvoidsetxPos(intxPos)
{
this.xPos=
xPos;
}
publicintgetyPos()
{
returnyPos;
}
publicvoidsetyPos(intypos)
{
this.yPos=
ypos;
}
publicintgetvWidth()
{
returnvWidth;
}
publicvoidsetvWidth(intvWidth)
{
this.vWidth=
vWidth;
}
publicintgetvHeight()
{
returnvHeight;
}
publicvoidsetvHeight(intvHeight)
{
this.vHeight=
vHeight;
}
publicintgetAnimFadeInOut()
{
returnanimFadeInOut;
}
publicvoidsetAnimFadeInOut(intanimFadeInOut){
this.animFadeInOut=
animFadeInOut;
}
publicintgetContentView()
{
returncontentView;
}
publicvoidsetContentView(intcontentView){
this.contentView=
contentView;
}
publicbooleanisClickable()
{
returnisClickable;
}
publicvoidsetClickable(booleanisClickable){
this.isClickable=
isClickable;
}
publicView getCustomView() {
returncustomView;
}
publicvoidsetCustomView(View
customView){
this.customView=
customView;
}
publicOnDismissListener getListener()
{
returnlistener;
}
publicvoidsetListener(OnDismissListener
listener){
this.listener=
listener;
}
publicfloatgetBgAlpha()
{
returnbgAlpha;
}
publicvoidsetBgAlpha(floatbgAlpha)
{
this.bgAlpha=
bgAlpha;
}
publicOnTouchListener getTouchListener()
{
returntouchListener;
}
publicvoidsetTouchListener(OnTouchListener
touchListener){
this.touchListener=
touchListener;
}
3
自定义一个用来管理PopupWindow的工具类
publicclassPopupUtils
{
privatestaticPopupDialog
popupDialog=
null;
@SuppressLint("NewApi")
publicstaticPopupDialog
createPopupDialog(Context context,Popupdialog) {
dismissPopupDialog();
Viewview =null;
if(ValueUtils.isEmpty(dialog.getCustomView())){
LayoutInflaterinflater =LayoutInflater.from(context);
view=
inflater.inflate(dialog.getContentView(),null);
}else{
view=
dialog.getCustomView();
}
view.setOnTouchListener(dialog.getTouchListener());
if(0!=
dialog.getBgAlpha()){
view.setAlpha(dialog.getBgAlpha());
}
popupDialog=
newPopupDialog(view,dialog.getvWidth(),dialog.getvHeight());
ColorDrawabledw =
newColorDrawable(Color.TRANSPARENT);
//follow two lines is used for back key -00000
popupDialog.setBackgroundDrawable(dw);
popupDialog.setAnimationStyle(dialog.getAnimFadeInOut());
popupDialog.setOutsideTouchable(dialog.isClickable());
popupDialog.setFocusable(true);
//not allow user click popupwindowbackground event or not permit
popupDialog.setOnDismissListener(dialog.getListener());
popupDialog.update();
returnpopupDialog;
}
publicstaticvoiddismissPopupDialog()
{
if(ValueUtils.isNotEmpty(popupDialog)&&
popupDialog.isShowing()){
popupDialog.dismiss();
popupDialog=
null;
}
}
publicstaticbooleanisPopupShowing()
{
if(ValueUtils.isNotEmpty(popupDialog)&&
popupDialog.isShowing()){
returntrue;
}else{
returnfalse;
}
}
}
接下来，我们需要准备相关的资源文件了，比如：导航按钮页面，采购清单弹窗页面以，选择美图窗口页面以及需要用到的动画文件和圆角背景文件，具体如下：
导航按钮页面xml：
<ScrollViewxmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/main"
android:background="#f2f3f4">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<Button
android:id="@+id/btnDropDownPopupDialog"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_gravity="center_horizontal"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:background="#FFFFFF"
android:textColor="#5084FE"
android:text="采购清单"
/>
<Button
android:id="@+id/btnDownUpPopupDialog"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_gravity="center_horizontal"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:background="#FFFFFF"
android:textColor="#5084FE"
android:text="选择美图"
/>
</LinearLayout>
</ScrollView>
采购清单弹窗页面xml：
<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#c9cbce"
android:gravity="center"
>
<TextView
android:id="@+id/tvbillTypeYc"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="粤菜"
android:textColor="#5084FE"
android:padding="10dp"
android:layout_margin="10dp"
android:gravity="center"
android:background="@drawable/corners_bk_gray2"
/>
<TextView
android:id="@+id/tvbillTypeCc"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="川菜"
android:textColor="#5084FE"
android:padding="10dp"
android:layout_margin="10dp"
android:gravity="center"
android:layout_below="@id/tvbillTypeYc"
android:background="@drawable/corners_bk_gray2"
/>
<TextView
android:id="@+id/tvbillTypeXc"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="湘菜"
android:textColor="#5084FE"
android:padding="10dp"
android:layout_margin="10dp"
android:gravity="center"
android:layout_below="@id/tvbillTypeCc"
android:background="@drawable/corners_bk_gray2"
/>
<TextView
android:id="@+id/tvbillTypeMore"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="..."
android:textColor="#5084FE"
android:padding="10dp"
android:layout_margin="10dp"
android:gravity="center"
android:layout_below="@id/tvbillTypeXc"
android:background="@drawable/corners_bk_gray2"
/>
</RelativeLayout>
选择美图弹窗页面xml：
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#00000000"
>
<FrameLayout
android:id="@+id/flMaskLayer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000"
/>
<LinearLayout
android:id="@+id/llHeader"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:orientation="vertical"
android:layout_alignParentBottom="true"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="81.0dp"
android:background="@drawable/corners_bk_white"
>
<TextView
android:id="@+id/tvTakeHeader"
android:layout_width="match_parent"
android:layout_height="40dp"
android:text="拍照"
android:textColor="#5084FE"
android:gravity="center"
/>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@color/gray"
android:layout_centerVertical="true"
/>
<TextView
android:id="@+id/tvHeaderFromSD"
android:layout_width="match_parent"
android:layout_height="40dp"
android:text="从相册中选"
android:textColor="#5084FE"
android:gravity="center"
android:layout_below="@id/tvTakeHeader"
/>
</RelativeLayout>
<TextView
android:id="@+id/tvCancel"
android:layout_width="match_parent"
android:layout_height="40dp"
android:text="取消"
android:textColor="#5084FE"
android:background="@drawable/corners_bk_white"
android:gravity="center"
android:layout_marginTop="18dp"
/>
</LinearLayout>
</RelativeLayout>
淡入淡出动画文件xml：
淡入动画：
<?xmlversion="1.0"encoding="utf-8"standalone="no"?>
<setxmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/decelerate_interpolator">
<alpha
android:duration="500"
android:fromAlpha="0.0"
android:toAlpha="1.0"/>
</set>
淡出动画：
<?xmlversion="1.0"encoding="utf-8"standalone="no"?>
<setxmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/decelerate_interpolator">
<alpha
android:duration="300"
android:fromAlpha="1.0"
android:toAlpha="0.0"/>
</set>
圆角背景文件xml：
采购清单背景：
<?xmlversion="1.0"encoding="utf-8"?>
<shapexmlns:android="http://schemas.android.com/apk/res/android">
<solidandroid:color="#efece0"/>
<corners
android:radius="4dp"/>
<padding
android:bottom="5dp"
android:left="10dp"
android:right="10dp"
android:top="5dp"/>
<stroke
android:width="1dp"
android:color="#efece0"/>
</shape>
底部弹窗：
<?xmlversion="1.0"encoding="utf-8"?>
<shapexmlns:android="http://schemas.android.com/apk/res/android">
<solidandroid:color="#FFFFFF"/>
<corners
android:bottomLeftRadius="6dp"
android:bottomRightRadius="6dp"
android:topLeftRadius="6dp"
android:topRightRadius="6dp"/>
</shape>
到这里，我们已经准备了所有需要的工作，接下来就是在我们的前段页面中调用即可。主要是通过参数对象包装参数，并调用上面的工具类进行展示和隐藏我们需要的PopupWindow即可，具体如下：
publicclassViewUtilsActivity
extendsFragmentActivity {
privatestaticViewUtilsFragment
fragment=
null;
@Override
protectedvoidonCreate(Bundle
bundle){
super.onCreate(bundle);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_base_main);
if(null==
bundle){
FragmentTransactionft =getSupportFragmentManager().beginTransaction();
fragment=
newViewUtilsFragment();
ft.add(R.id.container,fragment);
ft.commit();
}
}
publicclassViewUtilsFragment
extendsFragment
implementsView.OnClickListener {
privatePopupDialog
popupDialog=
null;
privateButton
btnDropDownPopupDialog=
null;
privateButton
btnDownUpPopupDialog=
null;
@Override
publicView onCreateView(LayoutInflater
inflater,ViewGroup
container,
BundlesavedInstanceState){
ViewrootView =(View)
inflater.inflate(R.layout.fragment_viewutils,container,false);
btnDropDownPopupDialog= (Button)rootView.findViewById(R.id.btnDropDownPopupDialog);
btnDropDownPopupDialog.setOnClickListener(this);
btnDownUpPopupDialog= (Button)
rootView.findViewById(R.id.btnDownUpPopupDialog);
btnDownUpPopupDialog.setOnClickListener(this);
returnrootView;
}
@Override
publicvoidonClick(View
v){
switch(v.getId()){
caseR.id.btnDropDownPopupDialog:
showDropDownPopupDialog();
break;
caseR.id.btnDownUpPopupDialog:
showDownUpPopupDialog();
break;
default:
break;
}
}
privatevoidshowDropDownPopupDialog()
{
Popuppopup =
newPopup();
//这里是获得屏幕宽度使弹窗水平居中
intxPos
=(AppUtils.getScreenWidth(getActivity())-
btnDropDownPopupDialog.getWidth())/ 2;
popup.setxPos(xPos);
popup.setyPos(0);
popup.setvWidth(LayoutParams.WRAP_CONTENT);
popup.setvHeight(LayoutParams.WRAP_CONTENT);
popup.setClickable(true);
popup.setAnimFadeInOut(R.style.AnimationFade);
popup.setContentView(R.layout.view_popup_dialog);
popupDialog= ViewUtils.createPopupDialog(getActivity(),popup);
popupDialog.showAsDropDown(btnDropDownPopupDialog,popup.getxPos(),popup.getyPos());
}
@SuppressLint({"NewApi","ClickableViewAccessibility"})
privatevoidshowDownUpPopupDialog()
{
Popuppopup =
newPopup();
popup.setvWidth(LayoutParams.MATCH_PARENT);
popup.setvHeight(LayoutParams.MATCH_PARENT);
popup.setClickable(true);
popup.setContentView(R.layout.view_userheader_modifydetail);
//设置触摸其他位置时关闭窗口
OnTouchListenerlistener =newOnTouchListener()
{
@Override
publicbooleanonTouch(View
view,MotionEvent
event){
intheight
=view.findViewById(R.id.llHeader).getTop();
inty
= (int)event.getY();
if(event.getAction()==MotionEvent.ACTION_UP){
if(y<height){
ViewUtils.dismissPopupDialog();
}
}
returntrue;
}
};
popup.setTouchListener(listener);
popupDialog= ViewUtils.createPopupDialog(getActivity(),popup);
popupDialog.showAtLocation(getActivity().findViewById(R.id.main),
Gravity.BOTTOM|Gravity.CENTER_HORIZONTAL,popup.getxPos(),popup.getyPos());
Viewview =popupDialog.getContentView();
//背景透明度设置
view.findViewById(R.id.flMaskLayer).setAlpha(0.75f);
View.OnClickListenerl =
newView.OnClickListener() {
@Override
publicvoidonClick(View
v){
if(v.getId()==
R.id.tvCancel){
ViewUtils.dismissPopupDialog();
}
elseif(v.getId()==
R.id.tvTakeHeader){
//take phone
Toast.makeText(getActivity(),"拍照",Toast.LENGTH_SHORT).show();
ViewUtils.dismissPopupDialog();
}
elseif(v.getId()==
R.id.tvHeaderFromSD){
//pick picture from
sd
Toast.makeText(getActivity(),"从相册中选",Toast.LENGTH_SHORT).show();
ViewUtils.dismissPopupDialog();
}
}
};
view.findViewById(R.id.tvCancel).setOnClickListener(l);
view.findViewById(R.id.tvTakeHeader).setOnClickListener(l);
view.findViewById(R.id.tvHeaderFromSD).setOnClickListener(l);
}
publicPopupDialog getPopupDialog()
{
returnpopupDialog;
}
}
//监听返回按钮
@Override
publicbooleanonKeyDown(intkeyCode,KeyEvent
event){
switch(keyCode){
caseKeyEvent.KEYCODE_BACK:
{
booleanflag
=ViewUtils.isPopupShowing();
if(flag){
ViewUtils.dismissPopupDialog();
returnfalse;
}
}
break;
default:
break;
}
returnsuper.onKeyDown(keyCode,event);
}
好了，到这里我们的工作就完成啦，可以欣赏自己的作品了。
如果有问题，可以在评论中或群(179914858)进行讨论，谢谢。