注：本文转载于：http://blog.csdn.net/minimicall/article/details/39484493

我们在常用的电商或者旅游APP中，例如美团，手机淘宝等等，都能够看的到有那种下拉式的二级列表菜单。具体如图所示：

上面两张图就是美团的一个二级列表菜单的一个展示。我相信很多人都想开发一个跟它一样的功能放到自己的APP中。好，接下来我们就开始动手，解决它。

1，结构分析

首先，我们给出这个下来菜单需要的组建。我们用线框图来分析。

1）如上图所示，最外围的是一个Activity，顶部包含了一个View的容器，这个容器主要是装载ToggleButton来实现诸如美团里面的“美食，全城，理我最近，刷选”这一行。这一行一点就会弹出对应的下来菜单。

2）下拉菜单是如何实现的呢？，这里我们利用了PopupWindow来实现这一弹出式窗口。然后我们在弹出式窗口里面再定义我们的下来列表项，是单列还是二级菜单，都是由里面来定。

3）不同的菜单，需要一级或者需要二级，在这里根据我的需求而变动。我们在PopupWindow上面加一个自定义的LeftView，或者是MiddleView，RightView。主要是一个ToggleButton，你弹出一个窗口，你就定制一个窗口。

3）视图里面嵌入ListView，就形成了列表项。

好分析就到上面为止，接下来我们一步步的说明实现。

2，项目结构

本项目的项目结构如图所示：

1） Adapter。适配器，主要是为ListView提供数据适配的。

2）MainActivity。主活动页面。

3）ExpandTabView。本项目的核心类，它包含ToggleButton容器和PopupWindow，是控制弹出窗口的核心类。

4）ViewLeft,ViewMiddle,ViewRight。是弹出里面嵌套的类，实现不同的列表菜单。

3，MainActivity

承载所有元素。看代码比看文字实在。
[java] view
plaincopy

  1. package com.example.expandtabview;
  2. import java.util.ArrayList;
  3. import android.app.Activity;
  4. import android.os.Bundle;
  5. import android.util.Log;
  6. import android.view.View;
  7. import android.widget.Toast;
  8. import com.example.view.ExpandTabView;
  9. import com.example.view.ViewLeft;
  10. import com.example.view.ViewMiddle;
  11. import com.example.view.ViewRight;
  12. public class MainActivity extends Activity {
  13. private static final String TAG = "MainActivity";
  14. private ExpandTabView expandTabView;
  15. private ArrayList<View> mViewArray = new ArrayList<View>();
  16. private ViewLeft viewLeft;
  17. private ViewMiddle viewMiddle;
  18. private ViewRight viewRight;
  19. @Override
  20. protected void onCreate(Bundle savedInstanceState) {
  21. super.onCreate(savedInstanceState);
  22. setContentView(R.layout.activity_main);
  23. initView();
  24. initVaule();
  25. initListener();
  26. }
  27. private void initView() {
  28. Log.d(TAG,"initView");
  29. expandTabView = (ExpandTabView) findViewById(R.id.expandtab_view);
  30. viewLeft = new ViewLeft(this);
  31. viewMiddle = new ViewMiddle(this);
  32. viewRight = new ViewRight(this);
  33. }
  34. private void initVaule() {
  35. Log.d(TAG,"initValue");
  36. mViewArray.add(viewLeft);
  37. mViewArray.add(viewMiddle);
  38. mViewArray.add(viewRight);
  39. ArrayList<String> mTextArray = new ArrayList<String>();
  40. mTextArray.add("距离");
  41. mTextArray.add("区域");
  42. mTextArray.add("距离");
  43. expandTabView.setValue(mTextArray, mViewArray);//将三个下拉列表设置进去
  44. expandTabView.setTitle(viewLeft.getShowText(), 0);
  45. expandTabView.setTitle(viewMiddle.getShowText(), 1);
  46. expandTabView.setTitle(viewRight.getShowText(), 2);
  47. }
  48. private void initListener() {
  49. Log.d(TAG,"initListener");
  50. viewLeft.setOnSelectListener(new ViewLeft.OnSelectListener() {
  51. @Override
  52. public void getValue(String distance, String showText) {
  53. Log.d("ViewLeft", "OnSelectListener, getValue");
  54. onRefresh(viewLeft, showText);
  55. }
  56. });
  57. viewMiddle.setOnSelectListener(new ViewMiddle.OnSelectListener() {
  58. @Override
  59. public void getValue(String showText) {
  60. Log.d("ViewMiddle","OnSelectListener, getValue");
  61. onRefresh(viewMiddle,showText);
  62. }
  63. });
  64. viewRight.setOnSelectListener(new ViewRight.OnSelectListener() {
  65. @Override
  66. public void getValue(String distance, String showText) {
  67. Log.d("ViewRight","OnSelectListener, getValue");
  68. onRefresh(viewRight, showText);
  69. }
  70. });
  71. }
  72. private void onRefresh(View view, String showText) {
  73. Log.d(TAG,"onRefresh,view:"+view+",showText:"+showText);
  74. expandTabView.onPressBack();
  75. int position = getPositon(view);
  76. if (position >= 0 && !expandTabView.getTitle(position).equals(showText)) {
  77. expandTabView.setTitle(showText, position);
  78. }
  79. Toast.makeText(MainActivity.this, showText, Toast.LENGTH_SHORT).show();
  80. }
  81. private int getPositon(View tView) {
  82. Log.d(TAG,"getPosition");
  83. for (int i = 0; i < mViewArray.size(); i++) {
  84. if (mViewArray.get(i) == tView) {
  85. return i;
  86. }
  87. }
  88. return -1;
  89. }
  90. @Override
  91. public void onBackPressed() {
  92. if (!expandTabView.onPressBack()) {
  93. finish();
  94. }
  95. }
  96. }

4 ，ExpandTabView

最主要就是如何处理当我们点击这些ToggleButton的时候要弹出或者收起这些PopupWindow。

[java] view
plaincopy

  1. package com.example.view;
  2. import java.util.ArrayList;
  3. import com.example.expandtabview.R;
  4. import android.app.Activity;
  5. import android.content.Context;
  6. import android.util.AttributeSet;
  7. import android.util.Log;
  8. import android.view.LayoutInflater;
  9. import android.view.View;
  10. import android.widget.LinearLayout;
  11. import android.widget.PopupWindow;
  12. import android.widget.PopupWindow.OnDismissListener;
  13. import android.widget.RelativeLayout;
  14. import android.widget.TextView;
  15. import android.widget.ToggleButton;
  16. /**
  17. * 菜单控件头部，封装了下拉动画，动态生成头部按钮个数
  18. *
  19. * @author zengjinlong
  20. */
  21. public class ExpandTabView extends LinearLayout implements OnDismissListener {
  22. private static final String TAG = "ExpandTabView";
  23. private ToggleButton selectedButton;
  24. private ArrayList<String> mTextArray = new ArrayList<String>();
  25. private ArrayList<RelativeLayout> mViewArray = new ArrayList<RelativeLayout>();
  26. private ArrayList<ToggleButton> mToggleButton = new ArrayList<ToggleButton>();
  27. private Context mContext;
  28. private final int SMALL = 0;
  29. private int displayWidth;
  30. private int displayHeight;
  31. private PopupWindow popupWindow;
  32. private int selectPosition;
  33. public ExpandTabView(Context context) {
  34. super(context);
  35. init(context);
  36. }
  37. public ExpandTabView(Context context, AttributeSet attrs) {
  38. super(context, attrs);
  39. init(context);
  40. }
  41. /**
  42. * 根据选择的位置设置tabitem显示的值
  43. */
  44. public void setTitle(String valueText, int position) {
  45. if (position < mToggleButton.size()) {
  46. mToggleButton.get(position).setText(valueText);
  47. }
  48. }
  49. public void setTitle(String title){
  50. }
  51. /**
  52. * 根据选择的位置获取tabitem显示的值
  53. */
  54. public String getTitle(int position) {
  55. if (position < mToggleButton.size() && mToggleButton.get(position).getText() != null) {
  56. return mToggleButton.get(position).getText().toString();
  57. }
  58. return "";
  59. }
  60. /**
  61. * 设置tabitem的个数和初始值
  62. * @param textArray 标题数组
  63. * @param viewArray 控件数组
  64. */
  65. public void setValue(ArrayList<String> textArray, ArrayList<View> viewArray) {
  66. if (mContext == null) {
  67. return;
  68. }
  69. LayoutInflater inflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
  70. Log.d(TAG,"setValue");
  71. mTextArray = textArray;
  72. for (int i = 0; i < viewArray.size(); i++) {
  73. final RelativeLayout r = new RelativeLayout(mContext);
  74. int maxHeight = (int) (displayHeight * 0.7);
  75. RelativeLayout.LayoutParams rl = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, maxHeight);
  76. rl.leftMargin = 10;
  77. rl.rightMargin = 10;
  78. r.addView(viewArray.get(i), rl);
  79. mViewArray.add(r);
  80. r.setTag(SMALL);
  81. ToggleButton tButton = (ToggleButton) inflater.inflate(R.layout.toggle_button, this, false);
  82. addView(tButton);
  83. View line = new TextView(mContext);
  84. line.setBackgroundResource(R.drawable.choosebar_line);
  85. if (i < viewArray.size() - 1) {
  86. LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(2, LinearLayout.LayoutParams.MATCH_PARENT);
  87. addView(line, lp);
  88. }
  89. mToggleButton.add(tButton);
  90. tButton.setTag(i);
  91. tButton.setText(mTextArray.get(i));
  92. r.setOnClickListener(new OnClickListener() {
  93. @Override
  94. public void onClick(View v) {
  95. Log.d("RelativeLayout","view:"+v);
  96. onPressBack();
  97. }
  98. });
  99. r.setBackgroundColor(mContext.getResources().getColor(R.color.popup_main_background));
  100. tButton.setOnClickListener(new OnClickListener() {
  101. @Override
  102. public void onClick(View view) {
  103. Log.d("tButton","setOnClickListener(l)");
  104. // initPopupWindow();
  105. ToggleButton tButton = (ToggleButton) view;
  106. if (selectedButton != null && selectedButton != tButton) {
  107. selectedButton.setChecked(false);
  108. }
  109. selectedButton = tButton;
  110. selectPosition = (Integer) selectedButton.getTag();
  111. startAnimation();
  112. if (mOnButtonClickListener != null && tButton.isChecked()) {
  113. mOnButtonClickListener.onClick(selectPosition);
  114. }
  115. }
  116. });
  117. }// for..
  118. }
  119. private void startAnimation() {
  120. Log.d(TAG,"startAnimation");
  121. if (popupWindow == null) {
  122. Log.d(TAG,"startAnimation(),new popupWindow now");
  123. popupWindow = new PopupWindow(mViewArray.get(selectPosition), displayWidth, displayHeight);
  124. popupWindow.setAnimationStyle(R.style.PopupWindowAnimation);
  125. popupWindow.setFocusable(false);
  126. popupWindow.setOutsideTouchable(true);
  127. }
  128. Log.d(TAG,"startAnimation(),selectedButton:"+selectedButton+",isChecked:"+selectedButton.isChecked()+
  129. ",popupWindow.isShowing:"+popupWindow.isShowing());
  130. if (selectedButton.isChecked()) {
  131. if (!popupWindow.isShowing()) {
  132. showPopup(selectPosition);
  133. } else {
  134. popupWindow.setOnDismissListener(this);
  135. popupWindow.dismiss();
  136. hideView();
  137. }
  138. } else {
  139. if (popupWindow.isShowing()) {
  140. popupWindow.dismiss();
  141. hideView();
  142. }
  143. }
  144. }
  145. private void showPopup(int position) {
  146. View tView = mViewArray.get(selectPosition).getChildAt(0);
  147. if (tView instanceof ViewBaseAction) {
  148. ViewBaseAction f = (ViewBaseAction) tView;
  149. f.show();
  150. }
  151. if (popupWindow.getContentView() != mViewArray.get(position)) {
  152. popupWindow.setContentView(mViewArray.get(position));
  153. }
  154. popupWindow.showAsDropDown(this, 0, 0);
  155. }
  156. /**
  157. * 如果菜单成展开状态，则让菜单收回去
  158. */
  159. public boolean onPressBack() {
  160. Log.d(TAG,"onPressBack");
  161. if (popupWindow != null && popupWindow.isShowing()) {
  162. popupWindow.dismiss();
  163. hideView();
  164. if (selectedButton != null) {
  165. selectedButton.setChecked(false);
  166. }
  167. return true;
  168. } else {
  169. return false;
  170. }
  171. }
  172. private void hideView() {
  173. Log.d(TAG, "hide()");
  174. View tView = mViewArray.get(selectPosition).getChildAt(0);
  175. if (tView instanceof ViewBaseAction) {
  176. ViewBaseAction f = (ViewBaseAction) tView;
  177. f.hide();
  178. }
  179. }
  180. private void init(Context context) {
  181. mContext = context;
  182. displayWidth = ((Activity) mContext).getWindowManager().getDefaultDisplay().getWidth();
  183. displayHeight = ((Activity) mContext).getWindowManager().getDefaultDisplay().getHeight();
  184. setOrientation(LinearLayout.HORIZONTAL);
  185. }
  186. @Override
  187. public void onDismiss() {
  188. Log.d(TAG,"onDismiss,selectPosition:"+selectPosition);
  189. showPopup(selectPosition);
  190. popupWindow.setOnDismissListener(null);
  191. }
  192. private OnButtonClickListener mOnButtonClickListener;
  193. /**
  194. * 设置tabitem的点击监听事件
  195. */
  196. public void setOnButtonClickListener(OnButtonClickListener l) {
  197. mOnButtonClickListener = l;
  198. }
  199. /**
  200. * 自定义tabitem点击回调接口
  201. */
  202. public interface OnButtonClickListener {
  203. public void onClick(int selectPosition);
  204. }
  205. }

5，ViewLeft

其中的一个示例，其他两个就不列举了

[java] view
plaincopy

  1. package com.example.view;
  2. import com.example.adapter.TextAdapter;
  3. import com.example.expandtabview.R;
  4. import android.content.Context;
  5. import android.util.AttributeSet;
  6. import android.view.LayoutInflater;
  7. import android.view.View;
  8. import android.widget.ListView;
  9. import android.widget.RelativeLayout;
  10. import android.widget.Toast;
  11. public class ViewLeft extends RelativeLayout implements ViewBaseAction{
  12. private static final String TAG = "ViewLeft";
  13. private ListView mListView;
  14. private final String[] items = new String[] { "item1", "item2", "item3", "item4", "item5", "item6" };//显示字段
  15. private final String[] itemsVaule = new String[] { "1", "2", "3", "4", "5", "6" };//隐藏id
  16. private OnSelectListener mOnSelectListener;
  17. private TextAdapter adapter;
  18. private String mDistance;
  19. private String showText = "item1";
  20. private Context mContext;
  21. public String getShowText() {
  22. return showText;
  23. }
  24. public ViewLeft(Context context) {
  25. super(context);
  26. init(context);
  27. }
  28. public ViewLeft(Context context, AttributeSet attrs, int defStyle) {
  29. super(context, attrs, defStyle);
  30. init(context);
  31. }
  32. public ViewLeft(Context context, AttributeSet attrs) {
  33. super(context, attrs);
  34. init(context);
  35. }
  36. private void init(Context context) {
  37. mContext = context;
  38. LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
  39. inflater.inflate(R.layout.view_distance, this, true);
  40. setBackgroundDrawable(getResources().getDrawable(R.drawable.choosearea_bg_mid));
  41. mListView = (ListView) findViewById(R.id.listView);
  42. adapter = new TextAdapter(context, items, R.drawable.choose_item_right, R.drawable.choose_eara_item_selector);
  43. adapter.setTextSize(17);
  44. if (mDistance != null) {
  45. for (int i = 0; i < itemsVaule.length; i++) {
  46. if (itemsVaule[i].equals(mDistance)) {
  47. adapter.setSelectedPositionNoNotify(i);
  48. showText = items[i];
  49. break;
  50. }
  51. }
  52. }
  53. mListView.setAdapter(adapter);
  54. adapter.setOnItemClickListener(new TextAdapter.OnItemClickListener() {
  55. @Override
  56. public void onItemClick(View view, int position) {
  57. if (mOnSelectListener != null) {
  58. showText = items[position];
  59. mOnSelectListener.getValue(itemsVaule[position], items[position]);
  60. }
  61. }
  62. });
  63. }
  64. public void setOnSelectListener(OnSelectListener onSelectListener) {
  65. mOnSelectListener = onSelectListener;
  66. }
  67. public interface OnSelectListener {
  68. public void getValue(String distance, String showText);
  69. }
  70. @Override
  71. public void hide() {
  72. }
  73. @Override
  74. public void show() {
  75. }
  76. }

6，效果图

好，今天就到这里。。希望有用。


最新文章

  1. u-boot-2015.04 在tq2440上的移植（使用spl引导u-boot）
  2. 【Ionic】---App名字和图标修改+启动画修改（SplashScreen）
  3. 传输层之TCP
  4. Android进程机制
  5. Tuple初探
  6. jQuery扩展两类函数（对象调用，静态调用）
  7. nginx反向代理的nginx.conf配置
  8. 工作常用git命令
  9. Python入门 - 环境搭建
  10. linux中的wc命令
  11. css3 弹性效果上下翻转demo
  12. passat / maintenance / baoyang
  13. python 小练习2
  14. Django之缓存
  15. 《AngularJs实战》学习笔记(慕课网)
  16. JVM7、8参数详解及优化
  17. Java问题汇总（一） ----------2019/2/22
  18. Onenet学习笔记
  19. 【Template】Miller Rabin
  20. VPS性能综合测试（7）：服务器压力测试，VPS系统负载测试

热门文章

  1. vi编辑器选项
  2. URL动态赋值
  3. 一张图告诉你为什么 Gmail 是最好的邮箱，以及大量私货
  4. lightoj1027
  5. poj1014 dp 多重背包
  6. mysql 批量创建表
  7. 一道面试题：按照其描述要求用java语言实现快速排序
  8. UITableView错误 ‘unable to dequeue a cell with identifier Cell&#39;
  9. Packages
  10. Java 解惑：Random 种子的作用、含参与不含参构造函数区别