700字范文 > 【ExpandTabView】Android 仿大众美团下拉菜单ExpandTabView

【ExpandTabView】Android 仿大众美团下拉菜单ExpandTabView

时间：2021-03-09 09:09:36

原文地址：/yueyueniao/ExpandTabView

参考地址：/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 plaincopypackagecom.example.expandtabview; importjava.util.ArrayList; importandroid.app.Activity; importandroid.os.Bundle; importandroid.util.Log; importandroid.view.View; importandroid.widget.Toast; importcom.example.view.ExpandTabView; importcom.example.view.ViewLeft; importcom.example.view.ViewMiddle; importcom.example.view.ViewRight; publicclassMainActivityextendsActivity{ privatestaticfinalStringTAG="MainActivity"; privateExpandTabViewexpandTabView; privateArrayList<View>mViewArray=newArrayList<View>(); privateViewLeftviewLeft; privateViewMiddleviewMiddle; privateViewRightviewRight; @Override protectedvoidonCreate(BundlesavedInstanceState){ super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initView(); initVaule(); initListener(); } privatevoidinitView(){ Log.d(TAG,"initView"); expandTabView=(ExpandTabView)findViewById(R.id.expandtab_view); viewLeft=newViewLeft(this); viewMiddle=newViewMiddle(this); viewRight=newViewRight(this); } privatevoidinitVaule(){ Log.d(TAG,"initValue"); mViewArray.add(viewLeft); mViewArray.add(viewMiddle); mViewArray.add(viewRight); ArrayList<String>mTextArray=newArrayList<String>(); 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); } privatevoidinitListener(){ Log.d(TAG,"initListener"); viewLeft.setOnSelectListener(newViewLeft.OnSelectListener(){ @Override publicvoidgetValue(Stringdistance,StringshowText){ Log.d("ViewLeft","OnSelectListener,getValue"); onRefresh(viewLeft,showText); } }); viewMiddle.setOnSelectListener(newViewMiddle.OnSelectListener(){ @Override publicvoidgetValue(StringshowText){ Log.d("ViewMiddle","OnSelectListener,getValue"); onRefresh(viewMiddle,showText); } }); viewRight.setOnSelectListener(newViewRight.OnSelectListener(){ @Override publicvoidgetValue(Stringdistance,StringshowText){ Log.d("ViewRight","OnSelectListener,getValue"); onRefresh(viewRight,showText); } }); } privatevoidonRefresh(Viewview,StringshowText){ Log.d(TAG,"onRefresh,view:"+view+",showText:"+showText); expandTabView.onPressBack(); intposition=getPositon(view); if(position>=0&&!expandTabView.getTitle(position).equals(showText)){ expandTabView.setTitle(showText,position); } Toast.makeText(MainActivity.this,showText,Toast.LENGTH_SHORT).show(); } privateintgetPositon(ViewtView){ Log.d(TAG,"getPosition"); for(inti=0;i<mViewArray.size();i++){ if(mViewArray.get(i)==tView){ returni; } } return-1; } @Override publicvoidonBackPressed(){ if(!expandTabView.onPressBack()){ finish(); } } }

4 ，ExpandTabView

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

[java]view plaincopypackagecom.example.view; importjava.util.ArrayList; importcom.example.expandtabview.R; importandroid.app.Activity; importandroid.content.Context; importandroid.util.AttributeSet; importandroid.util.Log; importandroid.view.LayoutInflater; importandroid.view.View; importandroid.widget.LinearLayout; importandroid.widget.PopupWindow; importandroid.widget.PopupWindow.OnDismissListener; importandroid.widget.RelativeLayout; importandroid.widget.TextView; importandroid.widget.ToggleButton; /** *菜单控件头部，封装了下拉动画，动态生成头部按钮个数 * *@authorzengjinlong */ publicclassExpandTabViewextendsLinearLayoutimplementsOnDismissListener{ privatestaticfinalStringTAG="ExpandTabView"; privateToggleButtonselectedButton; privateArrayList<String>mTextArray=newArrayList<String>(); privateArrayList<RelativeLayout>mViewArray=newArrayList<RelativeLayout>(); privateArrayList<ToggleButton>mToggleButton=newArrayList<ToggleButton>(); privateContextmContext; privatefinalintSMALL=0; privateintdisplayWidth; privateintdisplayHeight; privatePopupWindowpopupWindow; privateintselectPosition; publicExpandTabView(Contextcontext){ super(context); init(context); } publicExpandTabView(Contextcontext,AttributeSetattrs){ super(context,attrs); init(context); } /** *根据选择的位置设置tabitem显示的值 */ publicvoidsetTitle(StringvalueText,intposition){ if(position<mToggleButton.size()){ mToggleButton.get(position).setText(valueText); } } publicvoidsetTitle(Stringtitle){ } /** *根据选择的位置获取tabitem显示的值 */ publicStringgetTitle(intposition){ if(position<mToggleButton.size()&&mToggleButton.get(position).getText()!=null){ returnmToggleButton.get(position).getText().toString(); } return""; } /** *设置tabitem的个数和初始值 *@paramtextArray标题数组 *@paramviewArray控件数组 */ publicvoidsetValue(ArrayList<String>textArray,ArrayList<View>viewArray){ if(mContext==null){ return; } LayoutInflaterinflater=(LayoutInflater)mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE); Log.d(TAG,"setValue"); mTextArray=textArray; for(inti=0;i<viewArray.size();i++){ finalRelativeLayoutr=newRelativeLayout(mContext); intmaxHeight=(int)(displayHeight*0.7); RelativeLayout.LayoutParamsrl=newRelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT,maxHeight); rl.leftMargin=10; rl.rightMargin=10; r.addView(viewArray.get(i),rl); mViewArray.add(r); r.setTag(SMALL); ToggleButtontButton=(ToggleButton)inflater.inflate(R.layout.toggle_button,this,false); addView(tButton); Viewline=newTextView(mContext); line.setBackgroundResource(R.drawable.choosebar_line); if(i<viewArray.size()-1){ LinearLayout.LayoutParamslp=newLinearLayout.LayoutParams(2,LinearLayout.LayoutParams.MATCH_PARENT); addView(line,lp); } mToggleButton.add(tButton); tButton.setTag(i); tButton.setText(mTextArray.get(i)); r.setOnClickListener(newOnClickListener(){ @Override publicvoidonClick(Viewv){ Log.d("RelativeLayout","view:"+v); onPressBack(); } }); r.setBackgroundColor(mContext.getResources().getColor(R.color.popup_main_background)); tButton.setOnClickListener(newOnClickListener(){ @Override publicvoidonClick(Viewview){ Log.d("tButton","setOnClickListener(l)"); //initPopupWindow(); ToggleButtontButton=(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.. } privatevoidstartAnimation(){ Log.d(TAG,"startAnimation"); if(popupWindow==null){ Log.d(TAG,"startAnimation(),newpopupWindownow"); popupWindow=newPopupWindow(mViewArray.get(selectPosition),displayWidth,displayHeight); popupWindow.setAnimationStyle(R.style.PopupWindowAnimation); popupWindow.setFocusable(false); popupWindow.setOutsideTouchable(true); } Log.d(TAG,"startAnimation(),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(); } } } privatevoidshowPopup(intposition){ ViewtView=mViewArray.get(selectPosition).getChildAt(0); if(tViewinstanceofViewBaseAction){ ViewBaseActionf=(ViewBaseAction)tView; f.show(); } if(popupWindow.getContentView()!=mViewArray.get(position)){ popupWindow.setContentView(mViewArray.get(position)); } popupWindow.showAsDropDown(this,0,0); } /** *如果菜单成展开状态，则让菜单收回去 */ publicbooleanonPressBack(){ Log.d(TAG,"onPressBack"); if(popupWindow!=null&&popupWindow.isShowing()){ popupWindow.dismiss(); hideView(); if(selectedButton!=null){ selectedButton.setChecked(false); } returntrue; }else{ returnfalse; } } privatevoidhideView(){ Log.d(TAG,"hide()"); ViewtView=mViewArray.get(selectPosition).getChildAt(0); if(tViewinstanceofViewBaseAction){ ViewBaseActionf=(ViewBaseAction)tView; f.hide(); } } privatevoidinit(Contextcontext){ mContext=context; displayWidth=((Activity)mContext).getWindowManager().getDefaultDisplay().getWidth(); displayHeight=((Activity)mContext).getWindowManager().getDefaultDisplay().getHeight(); setOrientation(LinearLayout.HORIZONTAL); } @Override publicvoidonDismiss(){ Log.d(TAG,"onDismiss,selectPosition:"+selectPosition); showPopup(selectPosition); popupWindow.setOnDismissListener(null); } privateOnButtonClickListenermOnButtonClickListener; /** *设置tabitem的点击监听事件 */ publicvoidsetOnButtonClickListener(OnButtonClickListenerl){ mOnButtonClickListener=l; } /** *自定义tabitem点击回调接口 */ publicinterfaceOnButtonClickListener{ publicvoidonClick(intselectPosition); } }

5，ViewLeft

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

[java]view plaincopypackagecom.example.view; importcom.example.adapter.TextAdapter; importcom.example.expandtabview.R; importandroid.content.Context; importandroid.util.AttributeSet; importandroid.view.LayoutInflater; importandroid.view.View; importandroid.widget.ListView; importandroid.widget.RelativeLayout; importandroid.widget.Toast;publicclassViewLeftextendsRelativeLayoutimplementsViewBaseAction{ privatestaticfinalStringTAG="ViewLeft"; privateListViewmListView; privatefinalString[]items=newString[]{"item1","item2","item3","item4","item5","item6"};//显示字段 privatefinalString[]itemsVaule=newString[]{"1","2","3","4","5","6"};//隐藏id privateOnSelectListenermOnSelectListener; privateTextAdapteradapter; privateStringmDistance; privateStringshowText="item1"; privateContextmContext; publicStringgetShowText(){ returnshowText; } publicViewLeft(Contextcontext){ super(context); init(context); } publicViewLeft(Contextcontext,AttributeSetattrs,intdefStyle){ super(context,attrs,defStyle); init(context); } publicViewLeft(Contextcontext,AttributeSetattrs){ super(context,attrs); init(context); } privatevoidinit(Contextcontext){ mContext=context; LayoutInflaterinflater=(LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE); inflater.inflate(R.layout.view_distance,this,true); setBackgroundDrawable(getResources().getDrawable(R.drawable.choosearea_bg_mid)); mListView=(ListView)findViewById(R.id.listView); adapter=newTextAdapter(context,items,R.drawable.choose_item_right,R.drawable.choose_eara_item_selector); adapter.setTextSize(17); if(mDistance!=null){ for(inti=0;i<itemsVaule.length;i++){ if(itemsVaule[i].equals(mDistance)){ adapter.setSelectedPositionNoNotify(i); showText=items[i]; break; } } } mListView.setAdapter(adapter); adapter.setOnItemClickListener(newTextAdapter.OnItemClickListener(){ @Override publicvoidonItemClick(Viewview,intposition){ if(mOnSelectListener!=null){ showText=items[position]; mOnSelectListener.getValue(itemsVaule[position],items[position]); } } }); } publicvoidsetOnSelectListener(OnSelectListeneronSelectListener){ mOnSelectListener=onSelectListener; } publicinterfaceOnSelectListener{ publicvoidgetValue(Stringdistance,StringshowText); } @Override publicvoidhide(){ } @Override publicvoidshow(){ } }