手把手教会popupWindow从下往上弹出效果的实现

来源:互联网 发布:jquery.pano.js 编辑:程序博客网 时间:2024/04/29 20:10

效果如图所示,点击开始按钮,popWindow从下往上出来,再点击popWindow外面,popWindow又从上往下消失


可以看出来,上面的popupWindow是半透明的,后面我会细说。

最基本的是activity_main了,很简单,就只是一个button,这里我就不贴代码了。

接下来的是,popWindow的界面了


代码如下:这里注意我里面的那个注释

[java] view plaincopy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="wrap_content"  
  5.     android:layout_margin="5dp"  
  6.     android:orientation="vertical" >  
  7.   
  8.     <!-- 这里的linearLayout加android:background=""这个属性要谨慎,如果加了后,popwindow是不能半透明了的 -->  
  9.   
  10.     <Button  
  11.         android:id="@+id/first"  
  12.         android:layout_width="match_parent"  
  13.         android:layout_height="wrap_content"  
  14.         android:layout_marginBottom="5dp"  
  15.         android:layout_marginLeft="10dp"  
  16.         android:layout_marginRight="10dp"  
  17.         android:layout_marginTop="5dp"  
  18.         android:background="@android:color/holo_red_light"  
  19.         android:text="第一个按钮" />  
  20.   
  21.     <Button  
  22.         android:id="@+id/second"  
  23.         android:layout_width="match_parent"  
  24.         android:layout_height="wrap_content"  
  25.         android:layout_marginBottom="5dp"  
  26.         android:layout_marginLeft="10dp"  
  27.         android:layout_marginRight="10dp"  
  28.         android:background="@android:color/holo_red_light"  
  29.         android:text="第二个按钮" />  
  30.   
  31.     <Button  
  32.         android:id="@+id/third"  
  33.         android:layout_width="match_parent"  
  34.         android:layout_height="wrap_content"  
  35.         android:layout_marginBottom="5dp"  
  36.         android:layout_marginLeft="10dp"  
  37.         android:layout_marginRight="10dp"  
  38.         android:background="@android:color/holo_red_light"  
  39.         android:text="第三个按钮" />  
  40.   
  41. </LinearLayout>  
然后在res/下新建一个文件夹anim,进而anim下新建两个xml文件,如图所示:


其中,pophidden_anim的代码如下

[java] view plaincopy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <set xmlns:android="http://schemas.android.com/apk/res/android">  
  3.       
  4.      <translate  
  5.         android:duration="1000"  
  6.         android:fromYDelta="0"  
  7.         android:toYDelta="50%p" />  
  8.   
  9.     <alpha  
  10.         android:duration="1000"  
  11.         android:fromAlpha="1.0"  
  12.         android:toAlpha="0.0" />  
  13. </set>  

popshow_anim的代码如下

[java] view plaincopy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <set xmlns:android="http://schemas.android.com/apk/res/android">  
  3.      <translate  
  4.         android:duration="1000"  
  5.         android:fromYDelta="100%p"  
  6.         android:toYDelta="0" />  
  7.   
  8.     <alpha  
  9.         android:duration="1000"  
  10.         android:fromAlpha="0.0"  
  11.         android:toAlpha="1.0" />  
  12. </set>  

然后在values/styles.xml加入以下代码,变成这个样子,上面的那些是自带的

[java] view plaincopy
  1. <resources>  
  2.   
  3.     <!--  
  4.         Base application theme, dependent on API level. This theme is replaced  
  5.         by AppBaseTheme from res/values-vXX/styles.xml on newer devices.  
  6.   
  7.     -->  
  8.     <style name="AppBaseTheme" parent="android:Theme.Light">  
  9.         <!--  
  10.             Theme customizations available in newer API levels can go in  
  11.             res/values-vXX/styles.xml, while customizations related to  
  12.             backward-compatibility can go here.  
  13.   
  14.         -->  
  15.     </style>  
  16.   
  17.     <!-- Application theme. -->  
  18.     <style name="AppTheme" parent="AppBaseTheme">  
  19.         <!-- All customizations that are NOT specific to a particular API-level can go here. -->  
  20.     </style>  
  21.   
  22.    <!--  这个是加入的代码 -->  
  23.     <style name="mypopwindow_anim_style">  
  24.         <item name="android:windowEnterAnimation">@anim/popshow_anim</item>  
  25.  <!-- 指定显示的动画xml -->  
  26.   
  27.         <item name="android:windowExitAnimation">@anim/pophidden_anim</item>  
  28.  <!-- 指定消失的动画xml -->  
  29.     </style>  
  30.   
  31. </resources>  

之后就是Activity里面的代码了,我里面都写好了所有的注释,应该可以看得很清楚


[java] view plaincopy
  1. package com.example.popwindow;  
  2.   
  3. import android.os.Bundle;  
  4. import android.app.Activity;  
  5. import android.content.Context;  
  6. import android.graphics.drawable.BitmapDrawable;  
  7. import android.graphics.drawable.ColorDrawable;  
  8. import android.view.Gravity;  
  9. import android.view.LayoutInflater;  
  10. import android.view.Menu;  
  11. import android.view.View;  
  12. import android.view.View.OnClickListener;  
  13. import android.view.WindowManager;  
  14. import android.widget.Button;  
  15. import android.widget.PopupWindow;  
  16. import android.widget.PopupWindow.OnDismissListener;  
  17. import android.widget.Toast;  
  18.   
  19. public class MainActivity extends Activity {  
  20.   
  21.     @Override  
  22.     protected void onCreate(Bundle savedInstanceState) {  
  23.         super.onCreate(savedInstanceState);  
  24.         setContentView(R.layout.activity_main);  
  25.         Button start = (Button) findViewById(R.id.start);  
  26.         start.setOnClickListener(new OnClickListener() {  
  27.   
  28.             @Override  
  29.             public void onClick(View v) {  
  30.                 showPopwindow();  
  31.             }  
  32.   
  33.         });  
  34.     }  
  35.   
  36.     /** 
  37.      * 显示popupWindow 
  38.      */  
  39.     private void showPopwindow() {  
  40.         // 利用layoutInflater获得View  
  41.         LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);  
  42.         View view = inflater.inflate(R.layout.popwindowlayout, null);  
  43.   
  44.         // 下面是两种方法得到宽度和高度 getWindow().getDecorView().getWidth()  
  45.   
  46.         PopupWindow window = new PopupWindow(view,  
  47.                 WindowManager.LayoutParams.MATCH_PARENT,  
  48.                 WindowManager.LayoutParams.WRAP_CONTENT);  
  49.   
  50.         // 设置popWindow弹出窗体可点击,这句话必须添加,并且是true  
  51.         window.setFocusable(true);  
  52.   
  53.   
  54.         // 实例化一个ColorDrawable颜色为半透明  
  55.         ColorDrawable dw = new ColorDrawable(0xb0000000);  
  56.         window.setBackgroundDrawable(dw);  
  57.   
  58.           
  59.         // 设置popWindow的显示和消失动画  
  60.         window.setAnimationStyle(R.style.mypopwindow_anim_style);  
  61.         // 在底部显示  
  62.         window.showAtLocation(MainActivity.this.findViewById(R.id.start),  
  63.                 Gravity.BOTTOM, 00);  
  64.   
  65.         // 这里检验popWindow里的button是否可以点击  
  66.         Button first = (Button) view.findViewById(R.id.first);  
  67.         first.setOnClickListener(new OnClickListener() {  
  68.   
  69.             @Override  
  70.             public void onClick(View v) {  
  71.   
  72.                 System.out.println("第一个按钮被点击了");  
  73.             }  
  74.         });  
  75.           
  76.         //popWindow消失监听方法  
  77.         window.setOnDismissListener(new OnDismissListener() {  
  78.               
  79.             @Override  
  80.             public void onDismiss() {  
  81.                 System.out.println("popWindow消失");  
  82.             }  
  83.         });  
  84.   
  85.     }  
  86. }  

其中window.setFocusable(true)和window.setBackgroundDrawable()必须填写,如果是想让popWindow半透明,就是上面的那个方法,

如果只是单纯的调用这个方法就这样写window.setBackgroundDrawable(new BitmapDrawable());

点击下载源码

2 0
原创粉丝点击