devbox
小丑西瓜9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Android开发之多级下拉列表菜单实现（仿美团，淘宝等）_移动端多级菜单

作者：小丑西瓜9 | 2024-02-19 01:52:17

赞

踩

移动端多级菜单

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


下载地址：http://download.csdn.net/detail/minimicall/7956483

我们在常用的电商或者旅游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 plain copy 在CODE上查看代码片 派生到我的代码片
  1. package com.example.expandtabview;  
  2.   
  3.   
  4. import java.util.ArrayList;  
  5.   
  6. import android.app.Activity;  
  7. import android.os.Bundle;  
  8. import android.util.Log;  
  9. import android.view.View;  
  10. import android.widget.Toast;  
  11.   
  12. import com.example.view.ExpandTabView;  
  13. import com.example.view.ViewLeft;  
  14. import com.example.view.ViewMiddle;  
  15. import com.example.view.ViewRight;  
  16.   
  17. public class MainActivity extends Activity {  
  18.     private static final String TAG = "MainActivity";  
  19.     private ExpandTabView expandTabView;  
  20.     private ArrayList<View> mViewArray = new ArrayList<View>();  
  21.     private ViewLeft viewLeft;  
  22.     private ViewMiddle viewMiddle;  
  23.     private ViewRight viewRight;  
  24.       
  25.     @Override  
  26.     protected void onCreate(Bundle savedInstanceState) {  
  27.           
  28.         super.onCreate(savedInstanceState);  
  29.         setContentView(R.layout.activity_main);  
  30.         initView();  
  31.         initVaule();  
  32.         initListener();  
  33.           
  34.     }  
  35.   
  36.     private void initView() {  
  37.         Log.d(TAG,"initView");  
  38.         expandTabView = (ExpandTabView) findViewById(R.id.expandtab_view);  
  39.         viewLeft = new ViewLeft(this);  
  40.         viewMiddle = new ViewMiddle(this);  
  41.         viewRight = new ViewRight(this);  
  42.           
  43.     }  
  44.   
  45.     private void initVaule() {  
  46.         Log.d(TAG,"initValue");  
  47.         mViewArray.add(viewLeft);  
  48.         mViewArray.add(viewMiddle);  
  49.         mViewArray.add(viewRight);  
  50.         ArrayList<String> mTextArray = new ArrayList<String>();  
  51.         mTextArray.add("距离");  
  52.         mTextArray.add("区域");  
  53.         mTextArray.add("距离");  
  54.         expandTabView.setValue(mTextArray, mViewArray);//将三个下拉列表设置进去  
  55.         expandTabView.setTitle(viewLeft.getShowText(), 0);  
  56.         expandTabView.setTitle(viewMiddle.getShowText(), 1);  
  57.         expandTabView.setTitle(viewRight.getShowText(), 2);  
  58.           
  59.     }  
  60.   
  61.     private void initListener() {  
  62.         Log.d(TAG,"initListener");  
  63.         viewLeft.setOnSelectListener(new ViewLeft.OnSelectListener() {  
  64.   
  65.             @Override  
  66.             public void getValue(String distance, String showText) {  
  67.                 Log.d("ViewLeft", "OnSelectListener, getValue");  
  68.                 onRefresh(viewLeft, showText);  
  69.             }  
  70.         });  
  71.           
  72.         viewMiddle.setOnSelectListener(new ViewMiddle.OnSelectListener() {  
  73.               
  74.             @Override  
  75.             public void getValue(String showText) {  
  76.                 Log.d("ViewMiddle","OnSelectListener, getValue");  
  77.                 onRefresh(viewMiddle,showText);  
  78.                   
  79.             }  
  80.         });  
  81.           
  82.         viewRight.setOnSelectListener(new ViewRight.OnSelectListener() {  
  83.   
  84.             @Override  
  85.             public void getValue(String distance, String showText) {  
  86.                 Log.d("ViewRight","OnSelectListener, getValue");  
  87.                 onRefresh(viewRight, showText);  
  88.             }  
  89.         });  
  90.           
  91.     }  
  92.       
  93.     private void onRefresh(View view, String showText) {  
  94.         Log.d(TAG,"onRefresh,view:"+view+",showText:"+showText);  
  95.         expandTabView.onPressBack();  
  96.         int position = getPositon(view);  
  97.         if (position >= 0 && !expandTabView.getTitle(position).equals(showText)) {  
  98.             expandTabView.setTitle(showText, position);  
  99.         }  
  100.         Toast.makeText(MainActivity.this, showText, Toast.LENGTH_SHORT).show();  
  101.   
  102.     }  
  103.       
  104.     private int getPositon(View tView) {  
  105.         Log.d(TAG,"getPosition");  
  106.         for (int i = 0; i < mViewArray.size(); i++) {  
  107.             if (mViewArray.get(i) == tView) {  
  108.                 return i;  
  109.             }  
  110.         }  
  111.         return -1;  
  112.     }  
  113.       
  114.     @Override  
  115.     public void onBackPressed() {  
  116.           
  117.         if (!expandTabView.onPressBack()) {  
  118.             finish();  
  119.         }  
  120.           
  121.     }  
  122.   
  123. }  

4 ，ExpandTabView

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

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


5，ViewLeft

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

[java]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. package com.example.view;  
  2.   
  3.   
  4. import com.example.adapter.TextAdapter;  
  5. import com.example.expandtabview.R;  
  6.   
  7.   
  8. import android.content.Context;  
  9. import android.util.AttributeSet;  
  10. import android.view.LayoutInflater;  
  11. import android.view.View;  
  12. import android.widget.ListView;  
  13. import android.widget.RelativeLayout;  
  14. import android.widget.Toast;  
  15.   
  16.   
  17.   
  18.   
  19. public class ViewLeft extends RelativeLayout implements ViewBaseAction{  
  20.     private static final String TAG = "ViewLeft";  
  21.     private ListView mListView;  
  22.     private final String[] items = new String[] { "item1", "item2", "item3", "item4", "item5", "item6" };//显示字段  
  23.     private final String[] itemsVaule = new String[] { "1", "2", "3", "4", "5", "6" };//隐藏id  
  24.     private OnSelectListener mOnSelectListener;  
  25.     private TextAdapter adapter;  
  26.     private String mDistance;  
  27.     private String showText = "item1";  
  28.     private Context mContext;  
  29.   
  30.   
  31.     public String getShowText() {  
  32.         return showText;  
  33.     }  
  34.   
  35.   
  36.     public ViewLeft(Context context) {  
  37.         super(context);  
  38.         init(context);  
  39.     }  
  40.   
  41.   
  42.     public ViewLeft(Context context, AttributeSet attrs, int defStyle) {  
  43.         super(context, attrs, defStyle);  
  44.         init(context);  
  45.     }  
  46.   
  47.   
  48.     public ViewLeft(Context context, AttributeSet attrs) {  
  49.         super(context, attrs);  
  50.         init(context);  
  51.     }  
  52.   
  53.   
  54.     private void init(Context context) {  
  55.         mContext = context;  
  56.         LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);  
  57.         inflater.inflate(R.layout.view_distance, this, true);  
  58.         setBackgroundDrawable(getResources().getDrawable(R.drawable.choosearea_bg_mid));  
  59.         mListView = (ListView) findViewById(R.id.listView);  
  60.         adapter = new TextAdapter(context, items, R.drawable.choose_item_right, R.drawable.choose_eara_item_selector);  
  61.         adapter.setTextSize(17);  
  62.         if (mDistance != null) {  
  63.             for (int i = 0; i < itemsVaule.length; i++) {  
  64.                 if (itemsVaule[i].equals(mDistance)) {  
  65.                     adapter.setSelectedPositionNoNotify(i);  
  66.                     showText = items[i];  
  67.                     break;  
  68.                 }  
  69.             }  
  70.         }  
  71.         mListView.setAdapter(adapter);  
  72.         adapter.setOnItemClickListener(new TextAdapter.OnItemClickListener() {  
  73.   
  74.   
  75.             @Override  
  76.             public void onItemClick(View view, int position) {  
  77.   
  78.   
  79.                 if (mOnSelectListener != null) {  
  80.                     showText = items[position];  
  81.                     mOnSelectListener.getValue(itemsVaule[position], items[position]);  
  82.                 }  
  83.             }  
  84.         });  
  85.     }  
  86.   
  87.   
  88.     public void setOnSelectListener(OnSelectListener onSelectListener) {  
  89.         mOnSelectListener = onSelectListener;  
  90.     }  
  91.   
  92.   
  93.     public interface OnSelectListener {  
  94.         public void getValue(String distance, String showText);  
  95.     }  
  96.   
  97.   
  98.     @Override  
  99.     public void hide() {  
  100.           
  101.     }  
  102.   
  103.   
  104.     @Override  
  105.     public void show() {  
  106.           
  107.     }  
  108.   
  109.   
  110. }  

6，效果图



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



声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/111911
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号