Android仿美团淘宝实现多级下拉列表菜单功能

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

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

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

1.结构分析

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

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

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

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

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

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

2.项目结构

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

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

2）MainActivity。主活动页面。

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

4）VIEwleft,VIEwMIDdle,VIEwRight。是d出里面嵌套的类，实现不同的列表菜单。

 

3.MainActivity

承载所有元素。看代码比看文字实在。

package com.example.expandtabvIEw; import java.util.ArrayList; import AndroID.app.Activity; import androID.os.Bundle; import androID.util.Log; import androID.vIEw.VIEw; import androID.Widget.Toast; import com.example.vIEw.ExpandTabVIEw; import com.example.vIEw.VIEwleft; import com.example.vIEw.VIEwMIDdle; import com.example.vIEw.VIEwRight; public class MainActivity extends Activity {   private static final String TAG = "MainActivity";   private ExpandTabVIEw expandTabVIEw;   private ArrayList mVIEwArray = new ArrayList();   private VIEwleft vIEwleft;   private VIEwMIDdle vIEwMIDdle;   private VIEwRight vIEwRight;   @OverrIDe   protected voID onCreate(Bundle savedInstanceState) {     super.onCreate(savedInstanceState);     setContentVIEw(R.layout.activity_main);     initVIEw();     initVaule();     initListener();   }   private voID initVIEw() {     Log.d(TAG,"initVIEw");     expandTabVIEw = (ExpandTabVIEw) findVIEwByID(R.ID.expandtab_vIEw);     vIEwleft = new VIEwleft(this);     vIEwMIDdle = new VIEwMIDdle(this);     vIEwRight = new VIEwRight(this);   }   private voID initVaule() {     Log.d(TAG,"initValue");     mVIEwArray.add(vIEwleft);     mVIEwArray.add(vIEwMIDdle);     mVIEwArray.add(vIEwRight);     ArrayList mTextArray = new ArrayList();     mTextArray.add("距离");     mTextArray.add("区域");     mTextArray.add("距离");     expandTabVIEw.setValue(mTextArray,mVIEwArray);//将三个下拉列表设置进去     expandTabVIEw.setTitle(vIEwleft.getshowtext(),0);     expandTabVIEw.setTitle(vIEwMIDdle.getshowtext(),1);     expandTabVIEw.setTitle(vIEwRight.getshowtext(),2);   }   private voID initListener() {     Log.d(TAG,"initListener");     vIEwleft.setonSelectListener(new VIEwleft.OnSelectListener() {       @OverrIDe       public voID getValue(String distance,String showtext) {         Log.d("VIEwleft","OnSelectListener,getValue");         onRefresh(vIEwleft,showtext);       }     });     vIEwMIDdle.setonSelectListener(new VIEwMIDdle.OnSelectListener() {       @OverrIDe       public voID getValue(String showtext) {         Log.d("VIEwMIDdle",getValue");         onRefresh(vIEwMIDdle,showtext);       }     });     vIEwRight.setonSelectListener(new VIEwRight.OnSelectListener() {       @OverrIDe       public voID getValue(String distance,String showtext) {         Log.d("VIEwRight",getValue");         onRefresh(vIEwRight,showtext);       }     });   }   private voID onRefresh(VIEw vIEw,String showtext) {     Log.d(TAG,"onRefresh,vIEw:"+vIEw+",showtext:"+showtext);     expandTabVIEw.onPressBack();     int position = getPositon(vIEw);     if (position >= 0 && !expandTabVIEw.getTitle(position).equals(showtext)) {       expandTabVIEw.setTitle(showtext,position);     }     Toast.makeText(MainActivity.this,showtext,Toast.LENGTH_SHORT).show();   }   private int getPositon(VIEw tVIEw) {     Log.d(TAG,"getposition");     for (int i = 0; i < mVIEwArray.size(); i++) {       if (mVIEwArray.get(i) == tVIEw) {         return i;       }     }     return -1;   }   @OverrIDe   public voID onBackpressed() {     if (!expandTabVIEw.onPressBack()) {       finish();     }   } } 

4 .ExpandTabVIEw

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

package com.example.vIEw; import java.util.ArrayList; import com.example.expandtabvIEw.R; import androID.app.Activity; import androID.content.Context; import androID.util.AttributeSet; import androID.util.Log; import androID.vIEw.LayoutInflater; import androID.vIEw.VIEw; import androID.Widget.linearLayout; import androID.Widget.PopupWindow; import androID.Widget.PopupWindow.OndismissListener; import androID.Widget.relativeLayout; import androID.Widget.TextVIEw; import androID.Widget.Togglebutton; /**  * 菜单控件头部，封装了下拉动画，动态生成头部按钮个数  *  * @author Zengjinlong  */ public class ExpandTabVIEw extends linearLayout implements OndismissListener {   private static final String TAG = "ExpandTabVIEw";   private Togglebutton selectedbutton;   private ArrayList mTextArray = new ArrayList();   private ArrayList mVIEwArray = new ArrayList();   private ArrayList mTogglebutton = new ArrayList();   private Context mContext;   private final int SMALL = 0;   private int displayWIDth;   private int displayHeight;   private PopupWindow popupWindow;   private int selectposition;   public ExpandTabVIEw(Context context) {     super(context);     init(context);   }   public ExpandTabVIEw(Context context,AttributeSet attrs) {     super(context,attrs);     init(context);   }   /**    * 根据选择的位置设置tabitem显示的值    */   public voID setTitle(String valueText,int position) {     if (position < mTogglebutton.size()) {       mTogglebutton.get(position).setText(valueText);     }   }   public voID setTitle(String Title){   }   /**    * 根据选择的位置获取tabitem显示的值    */   public String getTitle(int position) {     if (position < mTogglebutton.size() && mTogglebutton.get(position).getText() != null) {       return mTogglebutton.get(position).getText().toString();     }     return "";   }   /**    * 设置tabitem的个数和初始值    * @param textArray 标题数组    * @param vIEwArray 控件数组    */   public voID setValue(ArrayList textArray,ArrayList vIEwArray) {     if (mContext == null) {       return;     }     LayoutInflater inflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);     Log.d(TAG,"setValue");     mTextArray = textArray;     for (int i = 0; i < vIEwArray.size(); i++) {       final relativeLayout r = new relativeLayout(mContext);       int maxHeight = (int) (displayHeight * 0.7);       relativeLayout.LayoutParams rl = new relativeLayout.LayoutParams(relativeLayout.LayoutParams.MATCH_PARENT,maxHeight);       rl.leftmargin = 10;       rl.rightmargin = 10;       r.addVIEw(vIEwArray.get(i),rl);       mVIEwArray.add(r);       r.setTag(SMALL);       Togglebutton tbutton = (Togglebutton) inflater.inflate(R.layout.toggle_button,this,false);       addVIEw(tbutton);       VIEw line = new TextVIEw(mContext);       line.setBackgroundResource(R.drawable.choosebar_line);       if (i < vIEwArray.size() - 1) {         linearLayout.LayoutParams lp = new linearLayout.LayoutParams(2,linearLayout.LayoutParams.MATCH_PARENT);         addVIEw(line,lp);       }       mTogglebutton.add(tbutton);       tbutton.setTag(i);       tbutton.setText(mTextArray.get(i));       r.setonClickListener(new OnClickListener() {         @OverrIDe         public voID onClick(VIEw v) {           Log.d("relativeLayout","vIEw:"+v);           onPressBack();         }       });       r.setBackgroundcolor(mContext.getResources().getcolor(R.color.popup_main_background));       tbutton.setonClickListener(new OnClickListener() {         @OverrIDe         public voID onClick(VIEw vIEw) {           Log.d("tbutton","setonClickListener(l)");           // initPopupWindow();           Togglebutton tbutton = (Togglebutton) vIEw;           if (selectedbutton != null && selectedbutton != tbutton) {             selectedbutton.setChecked(false);           }           selectedbutton = tbutton;           selectposition = (Integer) selectedbutton.getTag();           startAnimation();           if (mOnbuttonClickListener != null && tbutton.isChecked()) {             mOnbuttonClickListener.onClick(selectposition);           }         }       });     }// for..   }   private voID startAnimation() {     Log.d(TAG,"startAnimation");     if (popupWindow == null) {       Log.d(TAG,"startAnimation(),new popupWindow Now");       popupWindow = new PopupWindow(mVIEwArray.get(selectposition),displayWIDth,displayHeight);       popupWindow.setAnimationStyle(R.style.PopupWindowAnimation);       popupWindow.setFocusable(false);       popupWindow.setoutsIDetouchable(true);     }     Log.d(TAG,selectedbutton:"+selectedbutton+",isChecked:"+selectedbutton.isChecked()+         ",popupWindow.isShowing:"+popupWindow.isShowing());     if (selectedbutton.isChecked()) {       if (!popupWindow.isShowing()) {         showPopup(selectposition);       } else {         popupWindow.setondismissListener(this);         popupWindow.dismiss();         hIDeVIEw();       }     } else {       if (popupWindow.isShowing()) {         popupWindow.dismiss();         hIDeVIEw();       }     }   }   private voID showPopup(int position) {     VIEw tVIEw = mVIEwArray.get(selectposition).getChildAt(0);     if (tVIEw instanceof VIEwBaseAction) {       VIEwBaseAction f = (VIEwBaseAction) tVIEw;       f.show();     }     if (popupWindow.getContentVIEw() != mVIEwArray.get(position)) {       popupWindow.setContentVIEw(mVIEwArray.get(position));     }     popupWindow.showAsDropDown(this,0);   }   /**    * 如果菜单成展开状态，则让菜单收回去    */   public boolean onPressBack() {     Log.d(TAG,"onPressBack");     if (popupWindow != null && popupWindow.isShowing()) {       popupWindow.dismiss();       hIDeVIEw();       if (selectedbutton != null) {         selectedbutton.setChecked(false);       }       return true;     } else {       return false;     }   }   private voID hIDeVIEw() {     Log.d(TAG,"hIDe()");     VIEw tVIEw = mVIEwArray.get(selectposition).getChildAt(0);     if (tVIEw instanceof VIEwBaseAction) {       VIEwBaseAction f = (VIEwBaseAction) tVIEw;       f.hIDe();     }   }   private voID init(Context context) {     mContext = context;     displayWIDth = ((Activity) mContext).getwindowManager().getDefaultdisplay().getWIDth();     displayHeight = ((Activity) mContext).getwindowManager().getDefaultdisplay().getHeight();     setorIEntation(linearLayout.HORIZONTAL);   }   @OverrIDe   public voID ondismiss() {     Log.d(TAG,"ondismiss,selectposition:"+selectposition);     showPopup(selectposition);     popupWindow.setondismissListener(null);   }   private OnbuttonClickListener mOnbuttonClickListener;   /**    * 设置tabitem的点击监听事件    */   public voID setonbuttonClickListener(OnbuttonClickListener l) {     mOnbuttonClickListener = l;   }   /**    * 自定义tabitem点击回调接口    */   public interface OnbuttonClickListener {     public voID onClick(int selectposition);   } } 

5.VIEwleft

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

package com.example.vIEw; import com.example.adapter.TextAdapter; import com.example.expandtabvIEw.R; import androID.content.Context; import androID.util.AttributeSet; import androID.vIEw.LayoutInflater; import androID.vIEw.VIEw; import androID.Widget.ListVIEw; import androID.Widget.relativeLayout; import androID.Widget.Toast; public class VIEwleft extends relativeLayout implements VIEwBaseAction{   private static final String TAG = "VIEwleft";   private ListVIEw mListVIEw;   private final String[] items = new String[] { "item1","item2","item3","item4","item5","item6" };//显示字段   private final String[] itemsVaule = new String[] { "1","2","3","4","5","6" };//隐藏ID   private OnSelectListener mOnSelectListener;   private TextAdapter adapter;   private String mdistance;   private String showtext = "item1";   private Context mContext;   public String getshowtext() {     return showtext;   }   public VIEwleft(Context context) {     super(context);     init(context);   }   public VIEwleft(Context context,AttributeSet attrs,int defStyle) {     super(context,attrs,defStyle);     init(context);   }   public VIEwleft(Context context,attrs);     init(context);   }   private voID init(Context context) {     mContext = context;     LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);     inflater.inflate(R.layout.vIEw_distance,true);     setBackgroundDrawable(getResources().getDrawable(R.drawable.choosearea_bg_mID));     mListVIEw = (ListVIEw) findVIEwByID(R.ID.ListVIEw);     adapter = new TextAdapter(context,items,R.drawable.choose_item_right,R.drawable.choose_eara_item_selector);     adapter.setTextSize(17);     if (mdistance != null) {       for (int i = 0; i < itemsVaule.length; i++) {         if (itemsVaule[i].equals(mdistance)) {           adapter.setSelectedpositionNoNotify(i);           showtext = items[i];           break;         }       }     }     mListVIEw.setAdapter(adapter);     adapter.setonItemClickListener(new TextAdapter.OnItemClickListener() {       @OverrIDe       public voID onItemClick(VIEw vIEw,int position) {         if (mOnSelectListener != null) {           showtext = items[position];           mOnSelectListener.getValue(itemsVaule[position],items[position]);         }       }     });   }   public voID setonSelectListener(OnSelectListener onSelectListener) {     mOnSelectListener = onSelectListener;   }   public interface OnSelectListener {     public voID getValue(String distance,String showtext);   }   @OverrIDe   public voID hIDe() {   }   @OverrIDe   public voID show() {   } } 

6.效果图

 

以上所述是小编给大家介绍的AndroID仿美团淘宝实现多级下拉列表菜单功能，多条目的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对编程小技巧网站的支持！

总结

以上是内存溢出为你收集整理的Android仿美团淘宝实现多级下拉列表菜单功能全部内容，希望文章能够帮你解决Android仿美团淘宝实现多级下拉列表菜单功能所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。