android 自定义下拉菜单

本实例的自定义下拉菜单主要是继承PopupWindow类来实现的弹出窗体，各种布局效果可以根据自己定义设计。弹出的动画效果主要用到了translate、alpha、scale，具体实现步骤如下：

先上效果图如下：左边下拉菜单、中间下拉菜单、右边下拉菜单

 
          

1.主界面布局 activity_main.xml：

[html] view
plain copy

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
2. xmlns:tools="http://schemas.android.com/tools"
3. android:layout_width="match_parent"
4. android:layout_height="match_parent"
5. android:background="#ffffff" >
6. <include
7. android:id="@+id/main_top"
8. android:layout_width="match_parent"
9. android:layout_height="wrap_content"
10. layout="@layout/urm_top" />
11. <TextView
12. android:id="@+id/rule_line_tv"
13. android:layout_width="match_parent"
14. android:layout_height="0.5dp"
15. android:layout_below="@id/main_top"
16. android:background="@color/reserve_line" />
17. <LinearLayout
18. android:id="@+id/main_ll"
19. android:layout_width="match_parent"
20. android:layout_height="wrap_content"
21. android:layout_below="@id/rule_line_tv"
22. android:gravity="center_vertical"
23. android:orientation="horizontal"
24. android:padding="10dp" >
25. <TextView
26. android:id="@+id/left_tv"
27. android:layout_width="0dp"
28. android:layout_height="wrap_content"
29. android:layout_weight="1"
30. android:ellipsize="end"
31. android:gravity="center_horizontal"
32. android:maxLength="4"
33. android:singleLine="true"
34. android:text="我负责的线索" />
35. <TextView
36. android:id="@+id/middle_tv"
37. android:layout_width="0dp"
38. android:layout_height="wrap_content"
39. android:layout_weight="1"
40. android:ellipsize="end"
41. android:gravity="center_horizontal"
42. android:maxLength="4"
43. android:singleLine="true"
44. android:text="团队" />
45. <TextView
46. android:id="@+id/right_tv"
47. android:layout_width="0dp"
48. android:layout_height="wrap_content"
49. android:layout_weight="1"
50. android:ellipsize="end"
51. android:gravity="center_horizontal"
52. android:maxLength="4"
53. android:singleLine="true"
54. android:text="自定义" />
55. </LinearLayout>
56. <TextView
57. android:id="@+id/rule_line01_tv"
58. android:layout_width="match_parent"
59. android:layout_height="0.5dp"
60. android:layout_below="@id/main_ll"
61. android:background="@color/reserve_line" />
62. <TextView
63. android:id="@+id/main_tv"
64. android:layout_width="wrap_content"
65. android:layout_height="wrap_content"
66. android:layout_centerInParent="true"
67. android:text="主界面" />
68. </RelativeLayout>

2.主界面测试类 MainActivity.java

[java] view
plain copy

1. package com.popuptest;
2. import java.util.ArrayList;
3. import android.os.Bundle;
4. import android.util.DisplayMetrics;
5. import android.view.View;
6. import android.view.View.OnClickListener;
7. import android.view.Window;
8. import android.widget.AdapterView;
9. import android.widget.Button;
10. import android.widget.ImageButton;
11. import android.widget.ImageView;
12. import android.widget.LinearLayout;
13. import android.widget.TextView;
14. import android.widget.AdapterView.OnItemClickListener;
15. import android.widget.RelativeLayout.LayoutParams;
16. import android.app.Activity;
17. public class MainActivity extends Activity implements OnClickListener {
18. public static int screenW, screenH;
19. private ImageButton backBtn, createBtn;
20. private Button confirmBtn;
21. private TextView topTv;
22. private LinearLayout topll;
23. private ImageView topIv;
24. private TextView topLineTv;
25. private TopMiddlePopup middlePopup;
26. @Override
27. protected void onCreate(Bundle savedInstanceState) {
28. super.onCreate(savedInstanceState);
29. requestWindowFeature(Window.FEATURE_NO_TITLE);
30. setContentView(R.layout.activity_main);
31. getScreenPixels();
32. initWidget();
33. }
34. /**
35. * 初始化控件
36. */
37. private void initWidget() {
38. backBtn = (ImageButton) findViewById(R.id.urm_back_btn);
39. createBtn = (ImageButton) findViewById(R.id.urm_create_btn);
40. confirmBtn = (Button) findViewById(R.id.urm_confirm_btn);
41. topll = (LinearLayout) findViewById(R.id.urm_top_ll);
42. topIv = (ImageView) findViewById(R.id.urm_top_iv);
43. topLineTv = (TextView) findViewById(R.id.rule_line_tv);
44. topTv = (TextView) findViewById(R.id.urm_top_tv);
45. topTv.setText("企业客户");
46. backBtn.setOnClickListener(this);
47. createBtn.setOnClickListener(this);
48. confirmBtn.setOnClickListener(this);
49. topll.setOnClickListener(this);
50. }
51. /**
52. * 设置弹窗
53. *
54. * @param type
55. */
56. private void setPopup(int type) {
57. middlePopup = new TopMiddlePopup(MainActivity.this, screenW, screenH,
58. onItemClickListener, getItemsName(), type);
59. }
60. /**
61. * 设置弹窗内容
62. *
63. * @return
64. */
65. private ArrayList<String> getItemsName() {
66. ArrayList<String> items = new ArrayList<String>();
67. items.add("企业客户");
68. items.add("集团客户");
69. items.add("公海客户");
70. return items;
71. }
72. @Override
73. public void onClick(View v) {
74. switch (v.getId()) {
75. case R.id.urm_back_btn:
76. setPopup(1);
77. middlePopup.show(topLineTv);
78. break;
79. case R.id.urm_create_btn:
80. setPopup(2);
81. middlePopup.show(topLineTv);
82. break;
83. case R.id.urm_confirm_btn:
84. break;
85. case R.id.urm_top_ll:
86. setPopup(0);
87. middlePopup.show(topLineTv);
88. break;
89. }
90. }
91. /**
92. * 弹窗点击事件
93. */
94. private OnItemClickListener onItemClickListener = new OnItemClickListener() {
95. @Override
96. public void onItemClick(AdapterView<?> parent, View view, int position,
97. long id) {
98. System.out.println("--onItemClickListener--:");
99. middlePopup.dismiss();
100. }
101. };
102. /**
103. * 获取屏幕的宽和高
104. */
105. public void getScreenPixels() {
106. DisplayMetrics metrics = new DisplayMetrics();
107. getWindowManager().getDefaultDisplay().getMetrics(metrics);
108. screenW = metrics.widthPixels;
109. screenH = metrics.heightPixels;
110. }
111. }

3.自定义弹窗类 TopMiddlePopup.java

[java] view
plain copy

1. package com.popuptest;
2. import java.util.ArrayList;
3. import android.content.Context;
4. import android.graphics.drawable.ColorDrawable;
5. import android.view.LayoutInflater;
6. import android.view.MotionEvent;
7. import android.view.View;
8. import android.view.View.OnTouchListener;
9. import android.view.ViewGroup.LayoutParams;
10. import android.widget.LinearLayout;
11. import android.widget.ListView;
12. import android.widget.PopupWindow;
13. import android.widget.AdapterView.OnItemClickListener;
14. public class TopMiddlePopup extends PopupWindow {
15. private Context myContext;
16. private ListView myLv;
17. private OnItemClickListener myOnItemClickListener;
18. private ArrayList<String> myItems;
19. private int myWidth;
20. private int myHeight;
21. private int myType;
22. // 判断是否需要添加或更新列表子类项
23. private boolean myIsDirty = true;
24. private LayoutInflater inflater = null;
25. private View myMenuView;
26. private LinearLayout popupLL;
27. private PopupAdapter adapter;
28. public TopMiddlePopup(Context context) {
29. // TODO Auto-generated constructor stub
30. }
31. public TopMiddlePopup(Context context, int width, int height,
32. OnItemClickListener onItemClickListener, ArrayList<String> items,
33. int type) {
34. inflater = (LayoutInflater) context
35. .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
36. myMenuView = inflater.inflate(R.layout.top_popup, null);
37. this.myContext = context;
38. this.myItems = items;
39. this.myOnItemClickListener = onItemClickListener;
40. this.myType = type;
41. this.myWidth = width;
42. this.myHeight = height;
43. System.out.println("--myWidth--:" + myWidth + "--myHeight--:"
44. + myHeight);
45. initWidget();
46. setPopup();
47. }
48. /**
49. * 初始化控件
50. */
51. private void initWidget() {
52. myLv = (ListView) myMenuView.findViewById(R.id.popup_lv);
53. popupLL = (LinearLayout) myMenuView.findViewById(R.id.popup_layout);
54. myLv.setOnItemClickListener(myOnItemClickListener);
55. if (myType == 1) {
56. android.widget.RelativeLayout.LayoutParams lpPopup = (android.widget.RelativeLayout.LayoutParams) popupLL
57. .getLayoutParams();
58. lpPopup.width = (int) (myWidth * 1.0 / 4);
59. lpPopup.setMargins(0, 0, (int) (myWidth * 3.0 / 4), 0);
60. popupLL.setLayoutParams(lpPopup);
61. } else if (myType == 2) {
62. android.widget.RelativeLayout.LayoutParams lpPopup = (android.widget.RelativeLayout.LayoutParams) popupLL
63. .getLayoutParams();
64. lpPopup.width = (int) (myWidth * 1.0 / 4);
65. lpPopup.setMargins((int) (myWidth * 3.0 / 4), 0, 0, 0);
66. popupLL.setLayoutParams(lpPopup);
67. }
68. }
69. /**
70. * 设置popup的样式
71. */
72. private void setPopup() {
73. // 设置AccessoryPopup的view
74. this.setContentView(myMenuView);
75. // 设置AccessoryPopup弹出窗体的宽度
76. this.setWidth(LayoutParams.MATCH_PARENT);
77. // 设置AccessoryPopup弹出窗体的高度
78. this.setHeight(LayoutParams.MATCH_PARENT);
79. // 设置AccessoryPopup弹出窗体可点击
80. this.setFocusable(true);
81. // 设置AccessoryPopup弹出窗体的动画效果
82. if (myType == 1) {
83. this.setAnimationStyle(R.style.AnimTopLeft);
84. } else if (myType == 2) {
85. this.setAnimationStyle(R.style.AnimTopRight);
86. } else {
87. //this.setAnimationStyle(R.style.AnimTop);
88. this.setAnimationStyle(R.style.AnimTopMiddle);
89. }
90. // 实例化一个ColorDrawable颜色为半透明
91. ColorDrawable dw = new ColorDrawable(0x33000000);
92. // 设置SelectPicPopupWindow弹出窗体的背景
93. this.setBackgroundDrawable(dw);
94. myMenuView.setOnTouchListener(new OnTouchListener() {
95. @Override
96. public boolean onTouch(View v, MotionEvent event) {
97. int height = popupLL.getBottom();
98. int left = popupLL.getLeft();
99. int right = popupLL.getRight();
100. System.out.println("--popupLL.getBottom()--:"
101. + popupLL.getBottom());
102. int y = (int) event.getY();
103. int x = (int) event.getX();
104. if (event.getAction() == MotionEvent.ACTION_UP) {
105. if (y > height || x < left || x > right) {
106. System.out.println("---点击位置在列表下方--");
107. dismiss();
108. }
109. }
110. return true;
111. }
112. });
113. }
114. /**
115. * 显示弹窗界面
116. *
117. * @param view
118. */
119. public void show(View view) {
120. if (myIsDirty) {
121. myIsDirty = false;
122. adapter = new PopupAdapter(myContext, myItems, myType);
123. myLv.setAdapter(adapter);
124. }
125. showAsDropDown(view, 0, 0);
126. }
127. }

4.自定义弹窗布局 top_popup.xml

[html] view
plain copy

1. <?xml version="1.0" encoding="utf-8"?>
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="match_parent"
4. android:layout_height="match_parent" >
5. <LinearLayout
6. android:id="@+id/popup_layout"
7. android:layout_width="match_parent"
8. android:layout_height="wrap_content"
9. android:layout_alignParentTop="true"
10. android:background="#ffffff"
11. android:orientation="vertical" >
12. <ListView
13. android:id="@+id/popup_lv"
14. android:layout_width="match_parent"
15. android:layout_height="match_parent"
16. android:divider="@color/content_line"
17. android:dividerHeight="0.5dp" >
18. </ListView>
19. <TextView
20. android:layout_width="match_parent"
21. android:layout_height="0.5dp"
22. android:background="@color/reserve_line" />
23. </LinearLayout>
24. </RelativeLayout>

5.弹窗类表适配器类 PopupAdapter

[java] view
plain copy

1. package com.popuptest;
2. import java.util.ArrayList;
3. import android.content.Context;
4. import android.view.Gravity;
5. import android.view.LayoutInflater;
6. import android.view.View;
7. import android.view.ViewGroup;
8. import android.widget.BaseAdapter;
9. import android.widget.RelativeLayout.LayoutParams;
10. import android.widget.TextView;
11. public class PopupAdapter extends BaseAdapter {
12. private Context myContext;
13. private LayoutInflater inflater;
14. private ArrayList<String> myItems;
15. private int myType;
16. public PopupAdapter(Context context, ArrayList<String> items, int type) {
17. this.myContext = context;
18. this.myItems = items;
19. this.myType = type;
20. inflater = LayoutInflater.from(myContext);
21. }
22. @Override
23. public int getCount() {
24. return myItems.size();
25. }
26. @Override
27. public String getItem(int position) {
28. return myItems.get(position);
29. }
30. @Override
31. public long getItemId(int position) {
32. return 0;
33. }
34. @Override
35. public View getView(int position, View convertView, ViewGroup parent) {
36. PopupHolder holder = null;
37. if (convertView == null) {
38. holder = new PopupHolder();
39. convertView = inflater.inflate(R.layout.top_popup_item, null);
40. holder.itemNameTv = (TextView) convertView
41. .findViewById(R.id.popup_tv);
42. if (myType == 0) {
43. holder.itemNameTv.setGravity(Gravity.CENTER);
44. } else if (myType == 1) {
45. holder.itemNameTv.setGravity(Gravity.LEFT);
46. } else if (myType == 2) {
47. holder.itemNameTv.setGravity(Gravity.RIGHT);
48. }
49. convertView.setTag(holder);
50. } else {
51. holder = (PopupHolder) convertView.getTag();
52. }
53. String itemName = getItem(position);
54. holder.itemNameTv.setText(itemName);
55. return convertView;
56. }
57. private class PopupHolder {
58. TextView itemNameTv;
59. }
60. }

6.子item布局 top_popup_item.xml

[html] view
plain copy

1. <?xml version="1.0" encoding="utf-8"?>
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="match_parent"
4. android:layout_height="wrap_content"
5. android:background="#ffffff"
6. android:padding="10dp" >
7. <TextView
8. android:id="@+id/popup_tv"
9. android:layout_width="match_parent"
10. android:layout_height="wrap_content"
11. style="@style/urm_tv"/>
12. </RelativeLayout>

7.主界面顶部布局 urm_top.xml

[html] view
plain copy

1. <?xml version="1.0" encoding="utf-8"?>
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="match_parent"
4. android:layout_height="wrap_content"
5. android:background="#eeeeee" >
6. <ImageButton
7. android:id="@+id/urm_back_btn"
8. android:layout_width="wrap_content"
9. android:layout_height="wrap_content"
10. android:layout_alignParentLeft="true"
11. android:background="@null"
12. android:contentDescription="@string/app_name"
13. android:src="@drawable/back" />
14. <LinearLayout
15. android:id="@+id/urm_top_ll"
16. android:layout_width="wrap_content"
17. android:layout_height="wrap_content"
18. android:layout_centerInParent="true"
19. android:gravity="center_vertical"
20. android:orientation="horizontal" >
21. <TextView
22. android:id="@+id/urm_top_tv"
23. style="@style/main_tv_style"
24. android:layout_width="wrap_content"
25. android:layout_height="wrap_content"
26. android:text="企业客户" />
27. <ImageView
28. android:id="@+id/urm_top_iv"
29. android:layout_width="wrap_content"
30. android:layout_height="wrap_content"
31. android:layout_marginLeft="5dp"
32. android:background="@null"
33. android:contentDescription="@string/app_name"
34. android:src="@drawable/switch02" />
35. </LinearLayout>
36. <RelativeLayout
37. android:id="@+id/urm_top_right_rl"
38. android:layout_width="wrap_content"
39. android:layout_height="wrap_content"
40. android:layout_alignParentRight="true"
41. android:layout_centerVertical="true" >
42. <ImageButton
43. android:id="@+id/urm_create_btn"
44. android:layout_width="wrap_content"
45. android:layout_height="wrap_content"
46. android:background="@null"
47. android:contentDescription="@string/app_name"
48. android:src="@drawable/btn_add_2x" />
49. <Button
50. android:id="@+id/urm_confirm_btn"
51. android:layout_width="wrap_content"
52. android:layout_height="wrap_content"
53. android:background="@null"
54. android:gravity="center_vertical"
55. android:padding="10dp"
56. android:text="确定"
57. android:textColor="@color/blue2"
58. android:textSize="18sp"
59. android:visibility="gone" />
60. </RelativeLayout>
61. <ImageButton
62. android:id="@+id/urm_search_btn"
63. android:layout_width="wrap_content"
64. android:layout_height="wrap_content"
65. android:layout_centerVertical="true"
66. android:layout_toLeftOf="@id/urm_top_right_rl"
67. android:background="@null"
68. android:contentDescription="@string/app_name"
69. android:src="@drawable/search"
70. android:visibility="gone" />
71. </RelativeLayout>

8.styles.xml文件

[html] view
plain copy

1. <resources>
2. <!--
3. Base application theme, dependent on API level. This theme is replaced
4. by AppBaseTheme from res/values-vXX/styles.xml on newer devices.
5. -->
6. <style name="AppBaseTheme" parent="android:Theme.Light">
7. <!--
8. Theme customizations available in newer API levels can go in
9. res/values-vXX/styles.xml, while customizations related to
10. backward-compatibility can go here.
11. -->
12. </style>
13. <!-- Application theme. -->
14. <style name="AppTheme" parent="AppBaseTheme">
15. <!-- All customizations that are NOT specific to a particular API-level can go here. -->
16. </style>
17. <style name="AnimTop" parent="@android:style/Animation">
18. <item name="android:windowEnterAnimation">@anim/push_top_in</item>
19. <item name="android:windowExitAnimation">@anim/push_top_out</item>
20. </style>
21. <style name="AnimTopRight" parent="@android:style/Animation">
22. <item name="android:windowEnterAnimation">@anim/top_right_in</item>
23. <item name="android:windowExitAnimation">@anim/top_right_out</item>
24. </style>
25. <style name="AnimTopLeft" parent="@android:style/Animation">
26. <item name="android:windowEnterAnimation">@anim/top_left_in</item>
27. <item name="android:windowExitAnimation">@anim/top_left_out</item>
28. </style>
29. <style name="AnimTopMiddle" parent="@android:style/Animation">
30. <item name="android:windowEnterAnimation">@anim/top_middle_in</item>
31. <item name="android:windowExitAnimation">@anim/top_middle_out</item>
32. </style>
33. <style name="main_tv_style">
34. <item name="android:textSize">20sp</item>
35. <item name="android:textColor">#000000</item>
36. </style>
37. <style name="urm_tv">
38. <item name="android:textSize">18sp</item>
39. </style>
40. </resources>

9.各种动画效果

push_top_in.xml

[html] view
plain copy

1. <?xml version="1.0" encoding="utf-8"?>
2. <!-- 从屏幕上面进入 -->
3. <set xmlns:android="http://schemas.android.com/apk/res/android" >
4. <translate
5. android:duration="500"
6. android:fromYDelta="-100%p"
7. android:toYDelta="0" />
8. <alpha
9. android:duration="500"
10. android:fromAlpha="0.0"
11. android:toAlpha="1.0" />
12. </set>

push_top_out.xml

[html] view
plain copy

1. <?xml version="1.0" encoding="utf-8"?>
2. <!-- 从屏幕上面退出 -->
3. <set xmlns:android="http://schemas.android.com/apk/res/android" >
4. <translate
5. android:duration="500"
6. android:fromYDelta="0"
7. android:toYDelta="-100%p" />
8. <alpha
9. android:duration="500"
10. android:fromAlpha="1.0"
11. android:toAlpha="0.0" />
12. </set>

top_left_in.xml

[html] view
plain copy

1. <?xml version="1.0" encoding="utf-8"?>
2. <set xmlns:android="http://schemas.android.com/apk/res/android">
3. <scale
4. android:duration="500"
5. android:fillAfter="false"
6. android:fromXScale="0.0"
7. android:fromYScale="0.0"
8. android:interpolator="@android:anim/accelerate_decelerate_interpolator"
9. android:pivotX="0%"
10. android:pivotY="0%"
11. android:toXScale="1.0"
12. android:toYScale="1.0" />
13. </set>

top_left_out.xml

[html] view
plain copy

1. <?xml version="1.0" encoding="utf-8"?>
2. <set xmlns:android="http://schemas.android.com/apk/res/android" >
3. <scale
4. android:duration="500"
5. android:fillAfter="false"
6. android:fromXScale="1.0"
7. android:fromYScale="1.0"
8. android:interpolator="@android:anim/accelerate_decelerate_interpolator"
9. android:pivotX="0%"
10. android:pivotY="0%"
11. android:toXScale="0.0"
12. android:toYScale="0.0" />
13. </set>

top_middle_in.xml

[html] view
plain copy

1. <?xml version="1.0" encoding="utf-8"?>
2. <set xmlns:android="http://schemas.android.com/apk/res/android">
3. <scale
4. android:duration="500"
5. android:fillAfter="false"
6. android:fromXScale="0.0"
7. android:fromYScale="0.0"
8. android:interpolator="@android:anim/accelerate_decelerate_interpolator"
9. android:pivotX="50%"
10. android:pivotY="0%"
11. android:toXScale="1.0"
12. android:toYScale="1.0" />
13. </set>

top_middle_out.xml

[html] view
plain copy

1. <?xml version="1.0" encoding="utf-8"?>
2. <set xmlns:android="http://schemas.android.com/apk/res/android" >
3. <scale
4. android:duration="500"
5. android:fillAfter="false"
6. android:fromXScale="1.0"
7. android:fromYScale="1.0"
8. android:interpolator="@android:anim/accelerate_decelerate_interpolator"
9. android:pivotX="50%"
10. android:pivotY="0%"
11. android:toXScale="0.0"
12. android:toYScale="0.0" />
13. </set>

top_right_in.xml

[html] view
plain copy

1. <?xml version="1.0" encoding="utf-8"?>
2. <set xmlns:android="http://schemas.android.com/apk/res/android">
3. <scale
4. android:duration="500"
5. android:fillAfter="false"
6. android:fromXScale="0.0"
7. android:fromYScale="0.0"
8. android:interpolator="@android:anim/accelerate_decelerate_interpolator"
9. android:pivotX="100%"
10. android:pivotY="0%"
11. android:toXScale="1.0"
12. android:toYScale="1.0" />
13. </set>

top_right_out.xml

[html] view
plain copy

1. <?xml version="1.0" encoding="utf-8"?>
2. <set xmlns:android="http://schemas.android.com/apk/res/android" >
3. <scale
4. android:duration="500"
5. android:fillAfter="false"
6. android:fromXScale="1.0"
7. android:fromYScale="1.0"
8. android:interpolator="@android:anim/accelerate_decelerate_interpolator"
9. android:pivotX="100%"
10. android:pivotY="0%"
11. android:toXScale="0.0"
12. android:toYScale="0.0" />
13. </set>

运行项目即可搞定！