Android实现底部弹出PopupWindow背景逐渐变暗效果

在android开发中，经常需要通过点击某个按钮弹出对话框或者选择框，通过dialog或者popupmenu、popupwindow都能实现。
这里主要介绍后两者：popupmenu、popupwindow的实现。 先看两个效果图上边popupmenu，下边popupwindow：
popupmenu popupwindow

一、popupmenu实现：

popupmenu实现起来比较简单，主要用来实现根据按钮附近弹出的对话框。

首先定义一个menu文件\res\menu\headmenu.xml：

<menu xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 xmlns:tools="http://schemas.android.com/tools" tools:context="com.arbo.hero.loginactivity">
 <item
 android:id="@+id/camera"
 android:title="拍照"
 android:orderincategory="100"
 app:showasaction="never" />
 <item
 android:id="@+id/gallery"
 android:title="从相册中选取"
 android:orderincategory="100"
 app:showasaction="never" />
 <item
 android:id="@+id/cancel"
 android:title="取消"
 android:orderincategory="100"
 app:showasaction="never" />

</menu>

创建一个popupmenu并添加点击事件:

private void showpopmenu(view view){
 popupmenu = new popupmenu(this,view);
 popupmenu.getmenuinflater().inflate(r.menu.headmenu,popupmenu.getmenu());
 popupmenu.setonmenuitemclicklistener(new popupmenu.onmenuitemclicklistener() {
  @override
  public boolean onmenuitemclick(menuitem item) {
  switch(item.getitemid()){
   case r.id.camera:
   toast.maketext(headportrait.this,"click camera",toast.length_short).show();
   break;
   case r.id.gallery:
   toast.maketext(headportrait.this,"click gallery",toast.length_short).show();
   break;
   case r.id.cancel:
   toast.maketext(headportrait.this,"click cancel",toast.length_short).show();
   break;
  }
  return false;
  }
 });
 popupmenu.show();
 }

mainactivity很简单，点击按钮调用showpopmenu()方法即可:

public class mainactivity extends activity{
 @override
 protected void oncreate(bundle savedinstancestate) {
 super.oncreate(savedinstancestate);
 //main.xml页面主布局只有一个按钮，这里就不贴代码了
 setcontentview(r.layout.main);
 button button = (button) findviewbyid(r.id.button);
 button.setonclicklistener(new view.onclicklistener() {
  @override
  public void onclick(view view) {
  //点击按钮就创建并显示一个popupmenu
  showpopmenu(btnmenu);
  }
 }
 }
}

以上，就实现了利用popupmenu在按钮附近弹出一个选择框。
popupmenu的优点：简单；根据菜单大小自适应位置，在按钮附近弹出；适合某些情景。

缺点：形式比较单一，效果一般。

二、popupwindow实现：

相比之下，popupwindow的实现复杂一些，但是自定义性更强，它可以将任意界面设置为popupwindow。

先看弹出window布局window_popup.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:layout_marginleft="@dimen/activity_horizontal_margin"
 android:layout_marginright="@dimen/activity_horizontal_margin"
 android:background="#dadada"
 android:orientation="vertical">
 <linearlayout
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:orientation="vertical">
 <button
  android:id="@+id/camera"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:text="拍照"
  android:background="#f0f0f0"
  />
 <textview
  android:layout_width="match_parent"
  android:layout_height="1dp"
  android:background="#2d2c2c"
  />
 <button
  android:background="#f0f0f0"
  android:id="@+id/gallery"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:text="从手机相册选择"/>
 <textview
  android:layout_width="match_parent"
  android:layout_height="1dp"
  android:background="#2d2c2c"
  />
 <button
  android:background="#f0f0f0"
  android:id="@+id/savepicture"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:text="保存图片"/>

 </linearlayout>

 <linearlayout
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_margintop="10dp"
 android:orientation="vertical">

 <button
  android:background="#f0f0f0"
  android:id="@+id/cancel"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:text="取消"
  />
 </linearlayout>
</linearlayout>

布局的效果图：

创建popupwindow并为其添加点击事件：

void bottomwindow(view view) {
 if (popupwindow != null && popupwindow.isshowing()) {
  return;
 }
 linearlayout layout = (linearlayout) getlayoutinflater().inflate(r.layout.window_popup, null);
 popupwindow = new popupwindow(layout,
  viewgroup.layoutparams.match_parent,
  viewgroup.layoutparams.wrap_content);
 //点击空白处时，隐藏掉pop窗口
 popupwindow.setfocusable(true);
 popupwindow.setbackgrounddrawable(new bitmapdrawable());
 //添加弹出、弹入的动画
 popupwindow.setanimationstyle(r.style.popupwindow);
 int[] location = new int[2];
 view.getlocationonscreen(location);
 popupwindow.showatlocation(view, gravity.left | gravity.bottom, 0, -location[1]);
 //添加按键事件监听
 setbuttonlisteners(layout);
 //添加pop窗口关闭事件，主要是实现关闭时改变背景的透明度
 popupwindow.setondismisslistener(new popondismisslistener());
 backgroundalpha(1f);
 }

事件监听的函数setbuttonlisteners() ：

private void setbuttonlisteners(linearlayout layout) {
 button camera = (button) layout.findviewbyid(r.id.camera);
 button gallery = (button) layout.findviewbyid(r.id.gallery);
 button savepicture = (button) layout.findviewbyid(r.id.savepicture);
 button cancel = (button) layout.findviewbyid(r.id.cancel);

 camera.setonclicklistener(new view.onclicklistener() {
  @override
  public void onclick(view view) {
  if (popupwindow != null && popupwindow.isshowing()) {
   //在此处添加你的按键处理 xxx
   popupwindow.dismiss();
  }
  }
 });
 gallery.setonclicklistener(new view.onclicklistener() {
  @override
  public void onclick(view view) {
  if (popupwindow != null && popupwindow.isshowing()) {
   //在此处添加你的按键处理 xxx
   popupwindow.dismiss();
  }
  }
 });
 savepicture.setonclicklistener(new view.onclicklistener() {
  @override
  public void onclick(view view) {
  if (popupwindow != null && popupwindow.isshowing()) {
   //在此处添加你的按键处理 xxx
   popupwindow.dismiss();
  }
  }
 });
 cancel.setonclicklistener(new view.onclicklistener() {
  @override
  public void onclick(view view) {
  if (popupwindow != null && popupwindow.isshowing()) {
   popupwindow.dismiss();
  }
  }
 });
 }

弹出、收回的动画：

若res文件夹下没有anim目录，则自己添加一个：new–>android resource directory 名字填anim。然后新建两个tranlate文件：

弹出 window_out.xml :

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
 android:interpolator="@android:anim/decelerate_interpolator"
 android:fromydelta="100%" android:toydelta="0"
 android:duration="300"/>

收回 window_back.xml：

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
 android:interpolator="@android:anim/accelerate_interpolator"
 android:fromydelta="0" android:toydelta="100%"
 android:duration="200"/>

然后在style.xml中添加我们的这两个动画：

<style name="popupwindow">
 <item name="android:windowenteranimation">@anim/window_out</item>
 <item name="android:windowexitanimation">@anim/window_back</item>
 </style>

还是上面的同一个mainactivity，把按钮点击事件的处理函数换成popupwindow的即可：

btnmenu.setonclicklistener(new view.onclicklistener() {
  @override
  public void onclick(view view) {
  bottomwindow(btnmenu);
  }
 }

以上，就可以实现这样的点击按钮从屏幕底部弹出window窗口的效果，如下：

底部弹出

但是，这样的效果并不好，我们希望弹出windows的时候，其他背景可以变成半透明，这样可以突出重点。网上的方法是通过这段代码来改变背景的透明度的：

/**
 * 设置添加屏幕的背景透明度
 * @param bgalpha
 */
 public void backgroundalpha(float bgalpha)
 {
 windowmanager.layoutparams lp = getwindow().getattributes();
 lp.alpha = bgalpha; //0.0-1.0
 getwindow().setattributes(lp);  getwindow().addflags(windowmanager.layoutparams.flag_dim_behind);
 }

然后在弹出的时候将背景设为半透明：

bottomwindow(btnmenu);
backgroundalpha(0.5f);

在返回的时候设置回来：

backgroundalpha(1f);

这的确是可以实现效果，但是点击的时候突然变暗和变亮，效果不太好！如下：

我希望是弹出的过程中，慢慢变暗。是有一个过程的，而不是一下子就暗下来了。这里利用延时和handler来动态地改变背景的透明度。

//在调用弹出的方法后，开启一个子线程
  @override
  public void onclick(view view) {
  bottomwindow(btnmenu);
  new thread(new runnable(){
   @override
   public void run() {
   while(alpha>0.5f){
    try {
    //4是根据弹出动画时间和减少的透明度计算
    thread.sleep(4);
    } catch (interruptedexception e) {
    e.printstacktrace();
    }
    message msg =mhandler.obtainmessage();
    msg.what = 1;
    //每次减少0.01，精度越高，变暗的效果越流畅
    alpha-=0.01f;
    msg.obj =alpha ;
    mhandler.sendmessage(msg);
   }
   }

  }).start();
  }

同理，返回的时候把透明度跳回来：

/**
 * 返回或者点击空白位置的时候将背景透明度改回来
 */
 class popondismisslistener implements popupwindow.ondismisslistener{

 @override
 public void ondismiss() {
  // todo auto-generated method stub
  new thread(new runnable(){
  @override
  public void run() {
   //此处while的条件alpha不能<= 否则会出现黑屏
   while(alpha<1f){
   try {
    thread.sleep(4);
   } catch (interruptedexception e) {
    e.printstacktrace();
   }
   log.d("headportrait","alpha:"+alpha);
   message msg =mhandler.obtainmessage();
   msg.what = 1;
   alpha+=0.01f;
   msg.obj =alpha ;
   mhandler.sendmessage(msg);
   }
  }

  }).start();
 }

 }

在handler里面我们调用改变背景透明的方法即可：

handler mhandler = new handler(){
 @override
 public void handlemessage(message msg) {
  switch (msg.what){
  case 1:
   backgroundalpha((float)msg.obj);
   break;
  }
 }
 };

这样修改以后，效果是这样的：

以上，基本达到了逐渐变暗、变量的目的。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。