PopWindow 从底部动画效果弹出。
MelissaBall
7年前
<p>popwindow从底部弹出，动画，和适配不同手机:</p> <p>现在的app中，popwindow的使用的情况挺多的，列入拍照的时候的弹出的对话框。</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/73bb246e1c491dba21f65a9c800131db.png"></p> <p style="text-align:center">弹窗</p> <p>需求</p> <p>实现一个对话框，从底部逐渐移动出现，。消失的时候，逐渐向下移除屏幕，（伴随着动画）。</p> <ol> <li>点击 显示 按钮时，一个dialog对话框从底部慢慢向上弹出。</li> <li>关闭dialog时， dialog缓慢的移动向底部消失。很平滑的效果。</li> <li style="text-align:center">当对话框弹出来的时候，底层的布局为灰色，对话框消失的时候，屏幕可以恢复回来。<br> <img src="https://simg.open-open.com/show/4243283bd35e015a3f6b160d83ffccb6.gif"> <p>动态</p> <p style="text-align:left">点击按钮弹出对话框</p> <pre> <code class="language-java">btn_pop_anim.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { PopWindow(v); } });</code></pre> <p>popwindow的的代码</p> <p>动态图是放大后的效果，实际的是三个item。</p> </li> </ol> <pre> <code class="language-java">private void PopWindow(View v) { Button btItem1, btItem2, btItem3; View view = LayoutInflater.from(PopWindowActivity.this).inflate(R.layout.popwindow_layout, null); //设置屏幕的高度和宽度 final PopupWindow pop = new PopupWindow(view, getScreenWidth(this)*4/5, getScreentHeight()*3/10); //如果不设置背景颜色的话，无法是pop dimiss掉。 pop.setBackgroundDrawable(getResources().getDrawable(R.drawable.popupwindow_background)); pop.setOutsideTouchable(true); pop.setAnimationStyle(R.style.MyPopupWindow_anim_style); btItem1 = (Button) view.findViewById(R.id.bt_item1); btItem1.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Toast.makeText(PopWindowActivity.this, "相机", Toast.LENGTH_SHORT).show(); pop.dismiss(); } }); btItem2 = (Button) view.findViewById(R.id.bt_item2); btItem2.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Toast.makeText(PopWindowActivity.this, "图库", Toast.LENGTH_SHORT).show(); pop.dismiss(); } }); btItem3= (Button) view.findViewById(R.id.bt_item3); btItem3.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Toast.makeText(PopWindowActivity.this, "取消", Toast.LENGTH_SHORT).show(); pop.dismiss(); } }); /** * 设置popwindow的弹出的位置. * 1：首先要判断是否有navigation bar。如果有的的话，要把他们的高度给加起来。 * * 2：showAtLocation（）；是pop相对于屏幕而言的。 * * 3：如果是 pop.showAsDropDown();则是相对于你要点击的view的位置。设置的坐标。 */ if(checkDeviceHasNavigationBar2(this)){ int heigth_tobottom =100+getNavigationBarHeight(); pop.showAtLocation(v, Gravity.BOTTOM,0,heigth_tobottom); }else { pop.showAtLocation(v, Gravity.BOTTOM,0,100); } //设置 背景的颜色为 0.5f 的透明度 backgroundAlpha(0.5f); pop.setOnDismissListener(new PopupWindow.OnDismissListener() { @Override public void onDismiss() { //当popwindow消失的时候，恢复背景的颜色。 backgroundAlpha(1.0f); } }); }</code></pre> <p>这是popwindow布局的代码</p> <p>popWindow 布局 R.layout.popwindow_layout。</p> <pre> <code class="language-java"><?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:id="@+id/textView1" android:layout_width="match_parent" android:gravity="center" android:layout_height="wrap_content" android:layout_margin="2dp" android:text="这是PopupWindow" /> <Button android:id="@+id/bt_item1" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="3dp" android:text="相机" /> <Button android:id="@+id/bt_item2" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="3dp" android:text="图库" /> <Button android:id="@+id/bt_item3" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="3dp" android:text="取消" /></LinearLayout></code></pre> <p>获取屏幕的宽和高</p> <p>1 获取屏幕的宽和高的代码。主要有两种方式。</p> <p>2 方法1 的方法已经被遗弃了，推荐用方法2 的方法，除获得屏幕的宽和高外还可以获得屏幕的密度。</p> <p>方法一，代码如下:</p> <pre> <code class="language-java">WindowManager wm = (WindowManager)getSystemService(Context.WINDOW_SERVICE); Display display = wm.getDefaultDisplay(); Log.i(tag, "屏幕尺寸1: 宽度 = "+display.getWidth()+"高度 = :"+display.getHeight() )</code></pre> <p>方法二，代码如下:</p> <pre> <code class="language-java">DisplayMetrics dm =getResources().getDisplayMetrics(); int w_screen = dm.widthPixels; int h_screen = dm.heightPixels;</code></pre> <p>为popwindow设置动画。</p> <p>设置动画</p> <p>pop.setAnimationStyle(R.style.MyPopupWindow_anim_style);</p> <ul> <li>设置style 在res-->values-->style 中设置。代码如下： <pre> <code class="language-java"><!-- PopupWindow弹出/隐藏动画 12-28 --> <style name="MyPopupWindow_anim_style"> <itemname="android:windowEnterAnimation">@anim/popupwindow_show_anim</item> <itemname="android:windowExitAnimation">@anim/popupwindow_hidden_anim</item> </style></code></pre> </li> <li>进入时的动画，代码如下：<br> popupwindow_show_anim.xml> 要在res--> 下面建立一个文件夹anim。进入和推出是的动画。</li> </ul> <pre> <code class="language-java"><?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:duration="1000" android:fromYDelta="10%p" android:toYDelta="0" /> <alpha android:duration="1000" android:fromAlpha="0.0" android:toAlpha="1.0" /> </set></code></pre> <ul> <li> <p>推出时的动画，代码如下：</p> <p>popupwindow_hidden_anim.xml</p> </li> </ul> <pre> <code class="language-java"><?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:duration="1000" android:fromYDelta="0" android:toYDelta="10%p" /> <alpha android:duration="1000" android:fromAlpha="1.0" android:toAlpha="0.0" /> </set></code></pre> <p>需要注意的是要为 popwindow设置 背景颜色，不然点击外部区域，无法使其消失，背景颜色如下：res--> drawable下面popupwindow_background.xml 文件</p> <pre> <code class="language-java"><?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <solid android:color="#e1859e" /> <corners android:radius="20dip" /> <stroke android:width="2dip" android:color="#1cb0ba" /> </shape></code></pre> <p>上面就是简单的popwindow 动画。</p> <ol> <li> <p>设置背景颜色</p> pop.setBackgroundDrawable(getResources().getDrawable (R.drawable.popupwindow_background));</li> <li> <p>pop.setOutsideTouchable(true);</p> </li> <li>设置动画<br> pop.setAnimationStyle(R.style.MyPopupWindow_anim_style);</li> <li>在弹出pop的时候屏幕背景颜色的变化 .<br> rubybackgroundAlpha(0.5f);</li> <li>在消失的时候 .<br> rubypop.setOnDismissListener(new PopupWindow.OnDismissListener() { @Override public void onDismiss() { backgroundAlpha(1.0f); } });</li> <li>从屏幕下部弹出 可以选择很多的方向。<br> pop.showAtLocation(v, Gravity.BOTTOM,0,100);</li> </ol> <p>遇到的问题</p> <ol> <li style="text-align:center">在nexus 5 测试的时候一直存在的问题是，我设置为距离屏幕底部为100 但是实际的效果是在屏幕的下方，紧贴着屏幕出现<br> <img src="https://simg.open-open.com/show/90b9b58ad1534676fbd3a76d6be1b0a8.png"> <p>效果</p> 后来在网上搜索是因为 nexus 有Navigationbar的原因，如果设置的高度 小于 navigation的高度。系统会自动判断让效果如图。</li> <li>所以要判断手机的系统是否有Navigationbar效果。</li> <li>第一种方法 ： <pre> <code class="language-java">/** * 判断设备是否有虚拟按键（navifationbar）。第一种方法 */ public static boolean checkDeviceHasNavigationBar(Context activity) { //通过判断设备是否有返回键、菜单键(不是虚拟键,是手机屏幕外的按键)来确定是否有navigation bar boolean hasMenuKey = ViewConfiguration.get(activity) .hasPermanentMenuKey(); boolean hasBackKey = KeyCharacterMap .deviceHasKey(KeyEvent.KEYCODE_BACK); if (!hasMenuKey && !hasBackKey) { // 做任何你需要做的,这个设备有一个导航栏 return true; } return false; }</code></pre> </li> <li style="text-align:center">第二种方法 ： <pre> <code class="language-java">/** * /获取是否存在虚拟按键 NavigationBar：如果是有就返回true,如果是没有就是返回的false。第二种方法 */ private static boolean checkDeviceHasNavigationBar2(Context context) { boolean hasNavigationBar = false; Resources rs = context.getResources(); int id = rs.getIdentifier("config_showNavigationBar", "bool", "android"); if (id > 0) { hasNavigationBar = rs.getBoolean(id); } try { Class systemPropertiesClass = Class.forName("android.os.SystemProperties"); Method m = systemPropertiesClass.getMethod("get", String.class); String navBarOverride = (String) m.invoke(systemPropertiesClass, "qemu.hw.mainkeys"); if ("1".equals(navBarOverride)) { hasNavigationBar = false; } else if ("0".equals(navBarOverride)) { hasNavigationBar = true; } } catch (Exception e) { } return hasNavigationBar; }``` * 获取navigationbar的高度。代码如下：``` ruby/** * 获取navigationbar的高度。 */ private int getNavigationBarHeight() { Resources resources = this.getResources(); int resourceId = resources.getIdentifier("navigation_bar_height","dimen", "android"); int height = resources.getDimensionPixelSize(resourceId); return height; }</code></pre> <p>解决的思路是如果是有navigationbar的手机，</p> pop.showAtLocation(v, Gravity.BOTTOM,X,Y);<br> 如果有Y则加上navigationbar的高度。代码如下: <pre> <code class="language-java">if(checkDeviceHasNavigationBar2(this)){ int heigth_tobottom =100+getNavigationBarHeight(); pop.showAtLocation(v, Gravity.BOTTOM,0,heigth_tobottom); }else { pop.showAtLocation(v, Gravity.BOTTOM,0,100); }</code></pre> 效果 如下图<br> <img src="https://simg.open-open.com/show/8e8056595e4e66103bab33817c2866bc.png"> <p>效果图</p> <p style="text-align:left">有错误的地方请大家多指正，评论，十分感谢你的耐心阅读:relaxed:，图片太大不知道在简书，如何调整大小。。。</p> </li> </ol> <h3> </h3> <p>来自：http://www.jianshu.com/p/1a009b964d00</p> <p> </p>