Android 控件——利用Dialog实现底部弹出对话框

前言： 实现底部弹框的方式有多种，下面来说说我目前项目中使用到的一种方式效果图如下

使用情景：当用户触发某一事件的时候即可弹出此页面，具体来看看代码是怎么实现的。

（1）在Activity页面中调用如下代码

[java]  view plain  copy

1. Dialog mCameraDialog = new Dialog(this, R.style.my_dialog);  
2.         LinearLayout root = (LinearLayout) LayoutInflater.from(this).inflate(  
3.                 R.layout.layout_camera_control, null);  
4.         root.findViewById(R.id.btn_open_camera).setOnClickListener(btnlistener);  
5.         root.findViewById(R.id.btn_choose_img).setOnClickListener(btnlistener);  
6.         root.findViewById(R.id.btn_cancel).setOnClickListener(btnlistener);  
7.         mCameraDialog.setContentView(root);  
8.         Window dialogWindow = mCameraDialog.getWindow();  
9.         dialogWindow.setGravity(Gravity.BOTTOM);  
10.         dialogWindow.setWindowAnimations(R.style.dialogstyle); // 添加动画  
11.         WindowManager.LayoutParams lp = dialogWindow.getAttributes(); // 获取对话框当前的参数值  
12.         lp.x = 0; // 新位置X坐标  
13.         lp.y = -20; // 新位置Y坐标  
14.         lp.width = (int) getResources().getDisplayMetrics().widthPixels; // 宽度  
15. //      lp.height = WindowManager.LayoutParams.WRAP_CONTENT; // 高度  
16. //      lp.alpha = 9f; // 透明度  
17.         root.measure(0, 0);  
18.         lp.height = root.getMeasuredHeight();  
19.         lp.alpha = 9f; // 透明度  
20.         dialogWindow.setAttributes(lp);  
21.         mCameraDialog.show();  

（2）R.layout.layout_camera_control 布局文件

[java]  view plain  copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="fill_parent"  
4.     android:layout_height="wrap_content"  
5.     android:background="#ffffff"  
6.     android:gravity="center"  
7.     android:orientation="vertical"  
8.     android:paddingBottom="43dp"  
9.     android:paddingLeft="22.5dp"  
10.     android:paddingRight="22.5dp"  
11.     android:paddingTop="46dp" >  
12.   
13.     <Button  
14.         android:id="@+id/btn_open_camera"  
15.         android:layout_width="fill_parent"  
16.         android:layout_height="42dip"  
17.         android:background="@drawable/btn_done_selector"  
18.         android:gravity="center"  
19.         android:text="拍照"  
20.         android:textColor="#ffffff"  
21.         android:textSize="18sp" />  
22.   
23.     <Button  
24.         android:id="@+id/btn_choose_img"  
25.         android:layout_width="fill_parent"  
26.         android:layout_height="42dip"  
27.         android:layout_marginTop="16dip"  
28.         android:background="@drawable/btn_done_selector"  
29.         android:gravity="center"  
30.         android:text="从相册中选择"  
31.         android:textColor="#ffffff"  
32.         android:textSize="18sp" />  
33.   
34.     <Button  
35.         android:id="@+id/btn_cancel"  
36.         android:layout_width="fill_parent"  
37.         android:layout_height="42dip"  
38.         android:layout_marginTop="16dip"  
39.         android:background="@drawable/btn_round_selector"  
40.         android:gravity="center"  
41.         android:text="取消"  
42.         android:textColor="#888888"  
43.         android:textSize="18sp" />  
44.   
45. </LinearLayout>  

 （3）R.style.my_dialog的样式

[java]  view plain  copy

1. <style name="my_dialog">  
2.     <item name="android:windowNoTitle">true</item>  
3.     <item name="android:backgroundDimEnabled">true</item>  
4. </style>  

（4） 添加R.style.dialogstyle的动画样式

[java]  view plain  copy

1. <span style="font-size:18px;"><style name="dialogstyle" parent="android:Animation">  
2.         <item name="@android:windowEnterAnimation">@anim/dialog_enter</item>  
3.         <item name="@android:windowExitAnimation">@anim/dialog_exit</item>  
4.     </style></span>  

（5） @anim/dialog_enter 样式

[java]  view plain  copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <set xmlns:android="http://schemas.android.com/apk/res/android">      
3.     <translate android:fromYDelta="100%p"  android:duration="400"/>  
4. </set>  

（6） @anim/dialog_exit 样式

[java]  view plain  copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <set xmlns:android="http://schemas.android.com/apk/res/android">      
3.     <translate android:toYDelta="100%p"       android:duration="400"/>  
4. </set>  

（7） 处理相应的点击事件

[java]  view plain  copy

1. private View.OnClickListener btnlistener = new View.OnClickListener() {  
2.   
3.         @Override  
4.         public void onClick(View v) {  
5.             switch (v.getId()) {  
6.             case R.id.btn_open_camera: // 打开照相机  
7.                   
8.                 break;  
9.             // 打开相册  
10.             case R.id.btn_choose_img:  
11.                   
12.                 break;  
13.             // 取消  
14.             case R.id.btn_cancel:  
15.                 if (mCameraDialog != null) {  
16.                     mCameraDialog.dismiss();  
17.                 }  
18.                 break;  
19.             }  
20.         }  
21.     };  

前言： 实现底部弹框的方式有多种，下面来说说我目前项目中使用到的一种方式效果图如下

使用情景：当用户触发某一事件的时候即可弹出此页面，具体来看看代码是怎么实现的。

（1）在Activity页面中调用如下代码

[java]  view plain  copy

1. Dialog mCameraDialog = new Dialog(this, R.style.my_dialog);  
2.         LinearLayout root = (LinearLayout) LayoutInflater.from(this).inflate(  
3.                 R.layout.layout_camera_control, null);  
4.         root.findViewById(R.id.btn_open_camera).setOnClickListener(btnlistener);  
5.         root.findViewById(R.id.btn_choose_img).setOnClickListener(btnlistener);  
6.         root.findViewById(R.id.btn_cancel).setOnClickListener(btnlistener);  
7.         mCameraDialog.setContentView(root);  
8.         Window dialogWindow = mCameraDialog.getWindow();  
9.         dialogWindow.setGravity(Gravity.BOTTOM);  
10.         dialogWindow.setWindowAnimations(R.style.dialogstyle); // 添加动画  
11.         WindowManager.LayoutParams lp = dialogWindow.getAttributes(); // 获取对话框当前的参数值  
12.         lp.x = 0; // 新位置X坐标  
13.         lp.y = -20; // 新位置Y坐标  
14.         lp.width = (int) getResources().getDisplayMetrics().widthPixels; // 宽度  
15. //      lp.height = WindowManager.LayoutParams.WRAP_CONTENT; // 高度  
16. //      lp.alpha = 9f; // 透明度  
17.         root.measure(0, 0);  
18.         lp.height = root.getMeasuredHeight();  
19.         lp.alpha = 9f; // 透明度  
20.         dialogWindow.setAttributes(lp);  
21.         mCameraDialog.show();  

（2）R.layout.layout_camera_control 布局文件

[java]  view plain  copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="fill_parent"  
4.     android:layout_height="wrap_content"  
5.     android:background="#ffffff"  
6.     android:gravity="center"  
7.     android:orientation="vertical"  
8.     android:paddingBottom="43dp"  
9.     android:paddingLeft="22.5dp"  
10.     android:paddingRight="22.5dp"  
11.     android:paddingTop="46dp" >  
12.   
13.     <Button  
14.         android:id="@+id/btn_open_camera"  
15.         android:layout_width="fill_parent"  
16.         android:layout_height="42dip"  
17.         android:background="@drawable/btn_done_selector"  
18.         android:gravity="center"  
19.         android:text="拍照"  
20.         android:textColor="#ffffff"  
21.         android:textSize="18sp" />  
22.   
23.     <Button  
24.         android:id="@+id/btn_choose_img"  
25.         android:layout_width="fill_parent"  
26.         android:layout_height="42dip"  
27.         android:layout_marginTop="16dip"  
28.         android:background="@drawable/btn_done_selector"  
29.         android:gravity="center"  
30.         android:text="从相册中选择"  
31.         android:textColor="#ffffff"  
32.         android:textSize="18sp" />  
33.   
34.     <Button  
35.         android:id="@+id/btn_cancel"  
36.         android:layout_width="fill_parent"  
37.         android:layout_height="42dip"  
38.         android:layout_marginTop="16dip"  
39.         android:background="@drawable/btn_round_selector"  
40.         android:gravity="center"  
41.         android:text="取消"  
42.         android:textColor="#888888"  
43.         android:textSize="18sp" />  
44.   
45. </LinearLayout>  

 （3）R.style.my_dialog的样式

[java]  view plain  copy

1. <style name="my_dialog">  
2.     <item name="android:windowNoTitle">true</item>  
3.     <item name="android:backgroundDimEnabled">true</item>  
4. </style>  

（4） 添加R.style.dialogstyle的动画样式

[java]  view plain  copy

1. <span style="font-size:18px;"><style name="dialogstyle" parent="android:Animation">  
2.         <item name="@android:windowEnterAnimation">@anim/dialog_enter</item>  
3.         <item name="@android:windowExitAnimation">@anim/dialog_exit</item>  
4.     </style></span>  

（5） @anim/dialog_enter 样式

[java]  view plain  copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <set xmlns:android="http://schemas.android.com/apk/res/android">      
3.     <translate android:fromYDelta="100%p"  android:duration="400"/>  
4. </set>  

（6） @anim/dialog_exit 样式

[java]  view plain  copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <set xmlns:android="http://schemas.android.com/apk/res/android">      
3.     <translate android:toYDelta="100%p"       android:duration="400"/>  
4. </set>  

（7） 处理相应的点击事件

[java]  view plain  copy

1. private View.OnClickListener btnlistener = new View.OnClickListener() {  
2.   
3.         @Override  
4.         public void onClick(View v) {  
5.             switch (v.getId()) {  
6.             case R.id.btn_open_camera: // 打开照相机  
7.                   
8.                 break;  
9.             // 打开相册  
10.             case R.id.btn_choose_img:  
11.                   
12.                 break;  
13.             // 取消  
14.             case R.id.btn_cancel:  
15.                 if (mCameraDialog != null) {  
16.                     mCameraDialog.dismiss();  
17.                 }  
18.                 break;  
19.             }  
20.         }  
21.     };