(工具)自定义Dialog仿ios弹出底部菜单

先上效果图，自定义Dialog仿iOS弹出底部菜单如下所示：

        根据弹出的效果可以确定其中   取消按钮跟上面的功能按钮有一定的间距，而且取消按钮是固定存在的，上面的功能按钮可以动态添加一个或者多个。

        看到这种自定义控件一般都会感叹ios的UI确实很美观，所以安卓端各个大神们就会有更高大上的自定义控件来实现想要的各种效果。作为后辈自然也是很幸运，前辈们已经封装好了很多各种各样的功能demo分享给我们用，但是在实行cp大法（copy  and paste大法）肯定也不能忘了学习前辈们的实现思路和过程。菜鸟级别的我没做之前看着UI需求是处于有思路但敲不出代码的发呆状态，看完大神的demo后便恍然大悟，赶紧cp实现功能。

        然后来看看大神的代码封装得好看起来也就通俗易懂了，首先自定义Dialog类ActionSheetDialog.class

[html] view plain copy

1. public class ActionSheetDialog {  
2.     private Context context;  
3.     private Dialog dialog;  
4.     private TextView txt_title;  
5.     private TextView txt_cancel;  
6.     private LinearLayout lLayout_content;  
7.     private ScrollView sLayout_content;  
8.     private boolean showTitle = false;  
9.     private List<SheetItem> sheetItemList;  
10.     private Display display;  
11.   
12.     public ActionSheetDialog(Context context) {  
13.         this.context = context;  
14.         WindowManager windowManager = (WindowManager) context  
15.                 .getSystemService(Context.WINDOW_SERVICE);  
16.         display = windowManager.getDefaultDisplay();  
17.     }  
18.   
19.     public ActionSheetDialog builder() {  
20.         // 获取Dialog布局  
21.         View view = LayoutInflater.from(context).inflate(  
22.                 R.layout.toast_view_actionsheet, null);  
23.   
24.         // 设置Dialog最小宽度为屏幕宽度  
25.         view.setMinimumWidth(display.getWidth());  
26.   
27.         // 获取自定义Dialog布局中的控件  
28.         sLayout_content = (ScrollView) view.findViewById(R.id.sLayout_content);  
29.         lLayout_content = (LinearLayout) view  
30.                 .findViewById(R.id.lLayout_content);  
31.         txt_title = (TextView) view.findViewById(R.id.txt_title);  
32.         txt_cancel = (TextView) view.findViewById(R.id.txt_cancel);  
33.         txt_cancel.setOnClickListener(new OnClickListener() {  
34.             @Override  
35.             public void onClick(View v) {  
36.                 dialog.dismiss();  
37.             }  
38.         });  
39.   
40.         // 定义Dialog布局和参数  
41.         dialog = new Dialog(context, R.style.ActionSheetDialogStyle);  
42.         dialog.setContentView(view);  
43.         Window dialogWindow = dialog.getWindow();  
44.         dialogWindow.setGravity(Gravity.LEFT | Gravity.BOTTOM);  
45.         WindowManager.LayoutParams lp = dialogWindow.getAttributes();  
46.         lp.x = 0;  
47.         lp.y = 0;  
48.         dialogWindow.setAttributes(lp);  
49.   
50.         return this;  
51.     }  
52.   
53.     public ActionSheetDialog setTitle(String title) {  
54.         showTitle = true;  
55.         txt_title.setVisibility(View.VISIBLE);  
56.         txt_title.setText(title);  
57.         return this;  
58.     }  
59.   
60.     public ActionSheetDialog setCancelable(boolean cancel) {  
61.         dialog.setCancelable(cancel);  
62.         return this;  
63.     }  
64.   
65.     public ActionSheetDialog setCanceledOnTouchOutside(boolean cancel) {  
66.         dialog.setCanceledOnTouchOutside(cancel);  
67.         return this;  
68.     }  
69.   
70.     /**  
71.      *   
72.      * @param strItem  
73.      *            条目名称  
74.      * @param color  
75.      *            条目字体颜色，设置null则默认蓝色  
76.      * @param listener  
77.      * @return  
78.      */  
79.     public ActionSheetDialog addSheetItem(String strItem, SheetItemColor color,  
80.             OnSheetItemClickListener listener) {  
81.         if (sheetItemList == null) {  
82.             sheetItemList = new ArrayList<SheetItem>();  
83.         }  
84.         sheetItemList.add(new SheetItem(strItem, color, listener));  
85.         return this;  
86.     }  
87.   
88.     /** 设置条目布局 */  
89.     private void setSheetItems() {  
90.         if (sheetItemList == null || sheetItemList.size() <= 0) {  
91.             return;  
92.         }  
93.   
94.         int size = sheetItemList.size();  
95.   
96.         // TODO 高度控制，非最佳解决办法  
97.         // 添加条目过多的时候控制高度  
98.         if (size >= 7) {  
99.             LinearLayout.LayoutParams params = (LayoutParams) sLayout_content  
100.                     .getLayoutParams();  
101.             params.height = display.getHeight() / 2;  
102.             sLayout_content.setLayoutParams(params);  
103.         }  
104.   
105.         // 循环添加条目  
106.         for (int i = 1; i <= size; i++) {  
107.             final int index = i;  
108.             SheetItem sheetItem = sheetItemList.get(i - 1);  
109.             String strItem = sheetItem.name;  
110.             SheetItemColor color = sheetItem.color;  
111.             final OnSheetItemClickListener listener = (OnSheetItemClickListener) sheetItem.itemClickListener;  
112.   
113.             TextView textView = new TextView(context);  
114.             textView.setText(strItem);  
115.             textView.setTextSize(18);  
116.             textView.setGravity(Gravity.CENTER);  
117.   
118.             // 背景图片  
119.             if (size == 1) {  
120.                 if (showTitle) {  
121.                     textView.setBackgroundResource(R.drawable.actionsheet_bottom_selector);  
122.                 } else {  
123.                     textView.setBackgroundResource(R.drawable.actionsheet_single_selector);  
124.                 }  
125.             } else {  
126.                 if (showTitle) {  
127.                     if (i >= 1 && i < size) {  
128.                         textView.setBackgroundResource(R.drawable.actionsheet_middle_selector);  
129.                     } else {  
130.                         textView.setBackgroundResource(R.drawable.actionsheet_bottom_selector);  
131.                     }  
132.                 } else {  
133.                     if (i == 1) {  
134.                         textView.setBackgroundResource(R.drawable.actionsheet_top_selector);  
135.                     } else if (i < size) {  
136.                         textView.setBackgroundResource(R.drawable.actionsheet_middle_selector);  
137.                     } else {  
138.                         textView.setBackgroundResource(R.drawable.actionsheet_bottom_selector);  
139.                     }  
140.                 }  
141.             }  
142.   
143.             // 字体颜色  
144.             if (color == null) {  
145.                 textView.setTextColor(Color.parseColor(SheetItemColor.Blue  
146.                         .getName()));  
147.             } else {  
148.                 textView.setTextColor(Color.parseColor(color.getName()));  
149.             }  
150.   
151.             // 高度  
152.             float scale = context.getResources().getDisplayMetrics().density;  
153.             int height = (int) (45 * scale + 0.5f);  
154.             textView.setLayoutParams(new LinearLayout.LayoutParams(  
155.                     LayoutParams.MATCH_PARENT, height));  
156.   
157.             // 点击事件  
158.             textView.setOnClickListener(new OnClickListener() {  
159.                 @Override  
160.                 public void onClick(View v) {  
161.                     listener.onClick(index);  
162.                     dialog.dismiss();  
163.                 }  
164.             });  
165.   
166.             lLayout_content.addView(textView);  
167.         }  
168.     }  
169.   
170.     public void show() {  
171.         setSheetItems();  
172.         dialog.show();  
173.     }  
174.   
175.     public interface OnSheetItemClickListener {  
176.         void onClick(int which);  
177.     }  
178.   
179.     public class SheetItem {  
180.         String name;  
181.         OnSheetItemClickListener itemClickListener;  
182.         SheetItemColor color;  
183.   
184.         public SheetItem(String name, SheetItemColor color,  
185.                 OnSheetItemClickListener itemClickListener) {  
186.             this.name = name;  
187.             this.color = color;  
188.             this.itemClickListener = itemClickListener;  
189.         }  
190.     }  
191.   
192.     public enum SheetItemColor {  
193.         Blue("#037BFF"), Red("#FD4A2E");  
194.   
195.         private String name;  
196.   
197.         private SheetItemColor(String name) {  
198.             this.name = name;  
199.         }  
200.   
201.         public String getName() {  
202.             return name;  
203.         }  
204.   
205.         public void setName(String name) {  
206.             this.name = name;  
207.         }  
208.     }  
209. }  

xml:

[html] 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="match_parent"  
4.     android:layout_height="wrap_content"  
5.     android:orientation="vertical"  
6.     android:padding="8dp" >  
7.   
8.     <TextView  
9.         android:id="@+id/txt_title"  
10.         android:layout_width="match_parent"  
11.         android:layout_height="wrap_content"  
12.         android:background="@drawable/toast_actionsheet_top_normal"  
13.         android:gravity="center"  
14.         android:minHeight="45dp"  
15.         android:paddingTop="10dp"  
16.         android:paddingBottom="10dp"  
17.         android:paddingLeft="15dp"  
18.         android:paddingRight="15dp"  
19.         android:textColor="@color/actionsheet_gray"  
20.         android:textSize="13sp"  
21.         android:visibility="gone" />  
22.   
23.     <ScrollView  
24.         android:id="@+id/sLayout_content"  
25.         android:layout_width="match_parent"  
26.         android:layout_height="wrap_content"  
27.         android:fadingEdge="none"  
28.          >  
29.   
30.         <LinearLayout  
31.             android:id="@+id/lLayout_content"  
32.             android:layout_width="match_parent"  
33.             android:layout_height="wrap_content"  
34.             android:orientation="vertical" >  
35.         </LinearLayout>  
36.     </ScrollView>  
37.   
38.     <TextView  
39.         android:id="@+id/txt_cancel"  
40.         android:layout_width="match_parent"  
41.         android:layout_height="45dp"  
42.         android:layout_marginTop="8dp"  
43.         android:background="@drawable/actionsheet_single_selector"  
44.         android:gravity="center"  
45.         android:text="取消"  
46.         android:textColor="@color/actionsheet_blue"  
47.         android:textSize="18sp"  
48.         android:textStyle="bold" />  
49.   
50. </LinearLayout>  

anim弹出框和弹入框动画：首先是弹入in，后面是弹出out

[html] view plain copy

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

[html] view plain copy

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

接下去就是需要使用到的drawable了，主要是对一些背景样式的设计，可以根据公司UI要求自定义设计，不清楚的小伙伴可以看完整的demo,此处就不贴代码了

最后就是最重要的使用了：

new ActionSheetDialog(MainActivity.this)  
                    .builder()  
                    .setCancelable(true)  
                    .setCanceledOnTouchOutside(true)  
                    .addSheetItem("用相机更换头像", SheetItemColor.Blue,  
                            new OnSheetItemClickListener() {  
                                @Override  
                                public void onClick(int which) {  
                                    Toast.makeText(MainActivity.this, "用相机更换头像", Toast.LENGTH_SHORT).show();  
                                }  
                            })  
                    .addSheetItem("去相册选择头像", SheetItemColor.Blue,  
                            new OnSheetItemClickListener() {  
                                @Override  
                                public void onClick(int which) {  
                                    Toast.makeText(MainActivity.this, "去相册选择头像", Toast.LENGTH_SHORT).show();  
                                }