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

最新推荐文章于 2021-05-26 07:37:27 发布
最新推荐文章于 2021-05-26 07:37:27 发布
阅读量1k 收藏
点赞数
分类专栏： 弹出框 recyclerview使用 文章标签： android

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

作者：Arbo_Xjb 字体：[增加 减小] 类型：转载 时间：2016-10-22 我要评论

这篇文章主要为大家详细介绍了Android实现底部弹出PopupWindow背景逐渐变暗效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
scrolling="no" src="//pos.baidu.com/s?hei=100&wid=680&di=u2866688&ltu=http%3A%2F%2Fwww.jb51.net%2Farticle%2F95437.htm&ccd=24&ti=Android%E5%AE%9E%E7%8E%B0%E5%BA%95%E9%83%A8%E5%BC%B9%E5%87%BAPopupWindow%E8%83%8C%E6%99%AF%E9%80%90%E6%B8%90%E5%8F%98%E6%9A%97%E6%95%88%E6%9E%9C_Android_%E8%84%9A%E6%9C%AC%E4%B9%8B%E5%AE%B6&pss=1349x12757&ant=0&dis=0&tcn=1504602939&cpl=0&cec=gbk&cja=false&pcs=1349x604&ari=2&cce=true&chi=2&ps=826x179&dai=1&drs=1&tpr=1504602938925&exps=111000&col=zh-CN&cmi=0&psr=1366x768&dri=1&cdo=-1&tlm=1504602938&pis=-1x-1&dc=2&dtm=HTML_POST&par=1366x728&cfv=0" width="680" height="100"> 
    <div id="content">

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

PopupMenuPopupWindow

一、PopupMenu实现：

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

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
< 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并添加点击事件:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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()方法即可:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<? 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并为其添加点击事件：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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() ：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
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 :

?
1
2
3
4
5
<? 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：

?
1
2
3
4
5
<? 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中添加我们的这两个动画：

?
1
2
3
4
< style name = "Popupwindow" >
  < item name = "android:windowEnterAnimation" >@anim/window_out</ item >
  < item name = "android:windowExitAnimation" >@anim/window_back</ item >
  </ style >

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

?
1
2
3
4
5
6
btnmenu.setOnClickListener( new View.OnClickListener() {
   @Override
   public void onClick(View view) {
   bottomwindow(btnmenu);
   }
  }

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

底部弹出

底部弹出

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

?
1
2
3
4
5
6
7
8
9
10
/**
  * 设置添加屏幕的背景透明度
  * @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来动态地改变背景的透明度。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//在调用弹出的方法后，开启一个子线程
   @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();
   }

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
/**
  * 返回或者点击空白位置的时候将背景透明度改回来
  */
  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里面我们调用改变背景透明的方法即可：

?
1
2
3
4
5
6
7
8
9
10
Handler mHandler = new Handler(){
  @Override
  public void handleMessage(Message msg) {
   switch (msg.what){
   case 1 :
    backgroundAlpha(( float )msg.obj);
    break ;
   }
  }
  };

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

最终效果

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

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

如对本文有疑问，请提交到交流社区，广大热心网友会为你解答！！ 点击进入社区

您可能感兴趣的文章:
scrolling="no" src="http://pos.baidu.com/s?hei=250&wid=650&di=u3025827&ltu=http%3A%2F%2Fwww.jb51.net%2Farticle%2F95437.htm&tlm=1504602938&tpr=1504602938925&pcs=1349x604&chi=2&ps=0x0&exps=111000&ant=0&cec=gbk&dri=1&ari=2&dai=2&cpl=0&col=zh-CN&drs=1&dis=0&cdo=-1&dc=2&cfv=0&cce=true&ccd=24&ti=Android%E5%AE%9E%E7%8E%B0%E5%BA%95%E9%83%A8%E5%BC%B9%E5%87%BAPopupWindow%E8%83%8C%E6%99%AF%E9%80%90%E6%B8%90%E5%8F%98%E6%9A%97%E6%95%88%E6%9E%9C_Android_%E8%84%9A%E6%9C%AC%E4%B9%8B%E5%AE%B6&pis=-1x-1&psr=1366x768&cja=false&pss=1349x12857&cmi=0&tcn=1504602939&dtm=HTML_POST&par=1366x728" width="650" height="250">
Tags： Android PopupWindow 变暗

相关文章

scrolling="no" src="http://pos.baidu.com/s?hei=200&wid=680&di=u2866701&ltu=http%3A%2F%2Fwww.jb51.net%2Farticle%2F95437.htm&ari=2&cja=false&cce=true&pss=1349x13107&chi=2&exps=111000&ti=Android%E5%AE%9E%E7%8E%B0%E5%BA%95%E9%83%A8%E5%BC%B9%E5%87%BAPopupWindow%E8%83%8C%E6%99%AF%E9%80%90%E6%B8%90%E5%8F%98%E6%9A%97%E6%95%88%E6%9E%9C_Android_%E8%84%9A%E6%9C%AC%E4%B9%8B%E5%AE%B6&tlm=1504602939&pis=-1x-1&cfv=0&cmi=0&cdo=-1&ps=12927x179&dtm=HTML_POST&dri=1&par=1366x728&cpl=0&cec=gbk&dis=0&tpr=1504602938925&pcs=1349x604&ant=0&dc=2&dai=3&col=zh-CN&drs=1&psr=1366x768&ccd=24&tcn=1504602939" width="680" height="200">

最新评论

评论 (2人参与，0条评论)
搜狐“我来说两句”用户公约
来说两句吧…
发布
等级不够，发表评论升至指定级别才能获得该特权。详情请参见等级说明。
还没有评论，快来抢沙发吧！ 
  </div>
图克斯
关注
专栏目录
Android 动画效果弹出PopupWindow，同时屏幕背景变暗
10-17
最近做项目的时候，希望弹出一个PopupWindow，但是效果并不美观，所以自己写了个效果，动画弹出PopupWindow，是飞入/飞出，加上渐变的效果。在弹出PopupWindow的同时，改变屏幕背景的透明度，使屏幕背景变暗。具体请看http://blog.csdn.net/ddxxll2008/article/details/49201925
android 弹出PopupWindow后背景逐渐变暗
谢岩的博客
03-06 1597
今天，简单讲讲android在弹出  PopupWindow后如何使背景逐渐变暗。 我之前做的效果是在PopupWindow弹出时立即将背景变暗，这个也很简单。 在PopupWindow弹出时，将背景变暗： //popWindow消失监听方法 WindowManager.LayoutParams lp = getWindow().getAttributes(); lp.a
【Android开发】动画弹出PopupWindow并使背景变暗
Roy的专栏
03-17 2万+
我们在平常的android应用开发过程中，当应用数据太多太繁杂时，通常都会通过分类筛选让用户更好的找到自己想要的信息。因此利用PopupWindow或Dialog让用户快速选择定位是一个很好的选择。如我们想在美团上查找附近有什么电影院时：点击按钮弹出popupwindow，popupwindow是很好实现的，只需要使用PopupWindow的构造方法再将自己写的布局引入进去即可
Android底部弹出PopupWindow实现背景渐暗效果教程
本文将重点讲述如何在Android中实现底部弹出PopupWindow，并附带一个背景渐变变暗的效果，提升用户体验。 首先，我们从PopupMenu开始。PopupMenu是Android提供的一种轻量级的选择器，它适合用于小型、快速的交互。...
Android-实现底部弹出PopupWindow并让背景逐渐变暗
许建波的博客
10-21 1万+
Android-实现底部弹出PopupWindow并让背景逐渐变暗在android开发中，经常需要通过点击某个按钮弹出对话框或者选择框，通过Dialog或者PopupMenu、PopupWindow都能实现。 这里主要介绍后两者：PopupMenu、PopupWindow的实现。 先看两个效果图左边PopupMenu，右边PopupWindow： Android-实现底部弹出PopupWind
android popupwindow背景变暗,PopupWindow的使用及背景变暗设置
weixin_34392227的博客
05-26 596
//弹出PopupWindow的封装方法public void showpop(){PopupWindow pop=new PopupWindow(width-40,LayoutParams.MATCH_PARENT);pop.setContentView(view_pop);//点击空白区关闭//p.setFocusable(true);pop.setBackgroundDrawable(new...
Android 弹出popupWindow 屏幕变暗
dorytmx的博客
12-30 601
在项目中我们经常需要在activity中弹出一个popupWindow，为了追求用户体验，我们会设置弹框出现后，activity背景变会，弹框消失，屏幕变量 //初始化PopupWindow private void initPop() { LayoutInflater inflater = LayoutInflater.from(this); View view = in
Popupwindow点击事件+popupwindow以外的背景变暗
07-14
Popupwindow点击事件+popupwindow以外的背景变暗 地址 ： http://blog.csdn.net/u012062810/article/details/46873781
随着pupop窗口弹出，主页面逐渐变暗
08-02
随着pupop窗口弹出，主页面逐渐变暗。里面有事例视频演示。
popupwindow以及渐变背景
05-13
popupwindow使用以及渐变背景
解决Android popupWindow设置背景透明度无效的问题
08-24
主要介绍了解决Android popupWindow设置背景透明度无效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
android弹出PopupWindow
08-02
自定义popupwindow，解决了7.0弹出位置的错乱。点击按钮实现在控件的上下左右弹出的效果。还实现的dp和px的相互转换
PopupWindow弹出后其他地方变暗的效果如何实现
热门推荐
qiuqingpo的专栏
01-21 6万+
PopupWindow弹出后其他地方变暗的效果如何实现 现实的解决方法,总结了一下,共有两种 第一种方法,简单有效: popupwindow 的界面本来就是和整个屏幕一样的大小，  只是有内容的部分集中在下面了，通过设置他的背景色透明来遮盖后面的背景实现透明。 代码及实现 比较简单,就是修改弹出layout的背景颜色 android:background="#b3b3b3"
Android Popupwindow弹框后，背景变暗实现方法
码点
07-16 1541
项目中使用到了popupwindow，现在没有让popupwindow占满手机屏幕，而是从手机底部弹出，popupwindow的高度是手机屏幕的0.618（黄金比例）。基于这个前提下，当popupwindow创建完成并显示后，将popupwindow的背景变暗；当popupwindow消失时，恢复背景亮度。这样做可以提高用户体验。 /** * 设置窗口的背景透明度 * @par...
弹出PopupWindow后让背景变暗的方法
jxq1994的博客
05-01 6541
在Android上使用AlertDialog和PopupWindow都可以很方便的实现弹窗，AlertDialog弹出后背景会变暗，而PopupWindow不具有此特性。StackOVerflow上的这个问题里给出了三种方法以实现弹出PopupWindow后让背景变暗的效果，整理如下。1. 方法一使用WindowManager.LayoutParams.FLAG_DIM_BEHIND可以实现变暗的...
android popWindow 弹出时背景透明度渐变
fumeidonga的博客
03-30 6022
网上有另外一种方式       设置背景的透明度 http://blog.csdn.net/ddxxll2008/article/details/49201925  // 设置屏幕透明度       public void backgroundAlpha(float bgAlpha) {           WindowManager.LayoutParams lp = get
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值