Android：实现一种浮动选择菜单的效果

前几天更新了一下我手机上的百阅软件，上面的浮动对话框选择很好看，就模仿了一下。先看一下运行效果。

 

 

 

 

 

 

 

 

　　主要原理是在dialog里扔进一个GridView，可以作为一个组件使用。源码如下

 

---

 

对话框使用的layout:grid_dialog.xml

[xhtml]  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.               android:id="@+id/layout_root"  
4.               android:layout_width="wrap_content"  
5.               android:layout_height="wrap_content"  
6.               >  
7.     <GridView android:id="@+id/mygridview"   
8.       android:numColumns="3"   
9.       android:gravity="center"   
10.       android:layout_width="wrap_content"   
11.       android:layout_height="wrap_content"   
12.       android:padding="10dp"  
13.       android:verticalSpacing="20dp"  
14.       android:horizontalSpacing="10dp"  
15.       android:stretchMode="columnWidth"  
16.     >  
17.     </GridView>   
18. </RelativeLayout>  

 

 

对话框列表中的项目layout:grid_item.xml

[xhtml]  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:id="@+id/RelativeLayout01"   
4.     android:layout_width="fill_parent"  
5.     android:layout_height="fill_parent"  
6.     android:gravity="center"  
7.     >   
8.   
9.       <ImageView android:id="@+id/item_image"   
10.       android:layout_width="wrap_content"  
11.       android:layout_height="wrap_content"  
12.       android:layout_centerHorizontal="true"  
13.       />  
14.         
15.       <TextView android:id="@+id/item_text"   
16.       android:layout_width="wrap_content"  
17.       android:layout_height="wrap_content"  
18.       android:layout_below="@id/item_image"  
19.       android:layout_centerHorizontal="true"  
20.       android:text="@+id/item_text"/>  
21.   
22. </RelativeLayout>   

 

  

自定义的对话框类：GridDialog.java

[java]  view plain copy

1. import java.util.ArrayList;  
2. import java.util.HashMap;  
3. import java.util.List;  
4. import java.util.Map;  
5.   
6. import android.app.Activity;  
7. import android.app.Dialog;  
8. import android.content.Context;  
9. import android.content.Intent;  
10. import android.view.Gravity;  
11. import android.view.View;  
12. import android.view.Window;  
13. import android.view.WindowManager.LayoutParams;  
14. import android.widget.AdapterView;  
15. import android.widget.AdapterView.OnItemClickListener;  
16. import android.widget.GridView;  
17. import android.widget.SimpleAdapter;  
18. import android.widget.Toast;  
19.   
20.   
21. public class GridDialog extends Dialog {  
22.       
23.     private List<int[]> griditem = new ArrayList<int[]>();  
24.     {  
25.         griditem.add(new int[] { R.drawable.edit, R.string.edit });//图片资源，标题,可自己设定  
26.         griditem.add(new int[] { R.drawable.delete, R.string.delete });  
27.         griditem.add(new int[] { R.drawable.favsaddto, R.string.favsaddto });  
28.         griditem.add(new int[] { R.drawable.favs, R.string.favs });  
29.         griditem.add(new int[] { R.drawable.settings, R.string.settings });  
30.         griditem.add(new int[] { R.drawable.sync, R.string.sync });  
31.         griditem.add(new int[] { R.drawable.save, R.string.save });  
32.         griditem.add(new int[] { R.drawable.search, R.string.search });  
33.         griditem.add(new int[] { R.drawable.camera, R.string.camera });  
34.     };  
35.   
36.     private GridView gridview;  
37.   
38.     public GridDialog(Context context, boolean cancelable,  
39.             OnCancelListener cancelListener) {  
40.         super(context, cancelable, cancelListener);  
41.     }  
42.   
43.     public GridDialog(Context context, int theme) {  
44.         super(context, theme);  
45.     }  
46.   
47.     private void initGrid() {  
48.         List<Map<String, Object>> items = new ArrayList<Map<String, Object>>();  
49.   
50.         for (int[] item : griditem) {  
51.             Map<String, Object> map = new HashMap<String, Object>();  
52.             map.put("image", item[0]);  
53.             map.put("title", getContext().getString(item[1]));  
54.             items.add(map);  
55.         }  
56.   
57.         SimpleAdapter adapter = new SimpleAdapter(getContext(),  
58.                 items, // 列表内容  
59.                 R.layout.grid_item, new String[] { "title", "image" },  
60.                 new int[] { R.id.item_text, R.id.item_image });  
61.   
62.         gridview = (GridView) findViewById(R.id.mygridview);  
63.         // 为GridView设置数据  
64.         gridview.setAdapter(adapter);  
65.   
66.     }  
67.   
68.     public GridDialog(Context context) {  
69.   
70.         super(context);  
71.         requestWindowFeature(Window.FEATURE_NO_TITLE); // 灭掉对话框标题，要放在setContentView前面否则会报错  
72.   
73.         setContentView(R.layout.grid_dialog);  
74.   
75.         setCanceledOnTouchOutside(true);// 点击对话框外部取消对话框显示  
76.         LayoutParams lp = getWindow().getAttributes();  
77.         getWindow().setAttributes(lp);  
78.           
79.         getWindow().addFlags(LayoutParams.FLAG_BLUR_BEHIND);// 添加模糊效果  
80.           
81.         // 设置透明度，对话框透明(包括对话框中的内容)alpha在0.0f到1.0f之间。1.0完全不透明，0.0f完全透明  
82.         // lp.alpha = 0.5f;  
83.   
84.         lp.dimAmount = 0.1f;// 设置对话框显示时的黑暗度，0.0f和1.0f之间，在我这里设置成0.0f会出现黑屏状态，求解。  
85.   
86.         initGrid();// 添加表格按钮内容  
87.     }  
88.   
89.     /** 
90.      * 绑定事件到指定的Activity上 
91.      *  
92.      * @param activity 
93.      */  
94.     public void bindEvent(Activity activity) {  
95.   
96.         setOwnerActivity(activity);// )把对话框附着到一个Activity上  
97.   
98.         gridview.setOnItemClickListener(new OnItemClickListener() {  
99.   
100.             public void onItemClick(AdapterView<?> parent, View v,  
101.                     int position, long id) {  
102.   
103.                 switch (position) {// position从0开始，GridView中按钮的位置  
104.                 case 0:  
105.                     Toast.makeText(getContext(), "测试", Toast.LENGTH_SHORT)  
106.                             .show();  
107.                     break;  
108.                 }  
109.             }  
110.         });  
111.     }  
112. }  

 

上面的代码没有实现active的跳转。如果想实现跳转采用下面方法：

[java]  view plain copy

1. private void redirect(Class<?> cls) {  
2.     if (getOwnerActivity().getClass() != cls) {//如果不是对话框绑定的active则跳转  
3.         dismiss();//关闭对话框  
4.         Intent intent = new Intent();  
5.         intent.setClass(getContext(), cls);  
6.         getContext().startActivity(intent);//跳转  
7.     }   
8. }  

 

 

对话框调用方法：

 

[java]  view plain copy

1. public class MainActivity extends Activity {  
2.     /** Called when the activity is first created. */  
3.     @Override  
4.     public void onCreate(Bundle savedInstanceState) {  
5.         super.onCreate(savedInstanceState);  
6.         setContentView(R.layout.main);  
7.        Button button=(Button) findViewById(R.id.Button01);  
8.         button.setOnClickListener(new Button.OnClickListener(){  
9.             @Override  
10.             public void onClick(View arg0) {  
11.                 GridDialog dialog=new GridDialog(MainActivity.this);  
12.                 dialog.bindEvent(MainActivity.this);  
13.                   
14.                 dialog.show();  
15.             }  
16.               
17.               
18.         });  
19.     }  
20. }  

---

 

这个功能还是比较弱，比如无法动态增加按钮。这里为了简洁将一些style效果写到代码里了，还是写入xml里容易控制。第一次写日志排版很差，欢迎各位拍砖