Android开发之多级下拉列表菜单实现(仿美团,淘宝等)
我们在常用的电商或者旅游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](http://blog.csdn.net/minimicall/article/details/39484493#)[copy](http://blog.csdn.net/minimicall/article/details/39484493#)[](https://code.csdn.net/snippets/473461)[](https://code.csdn.net/snippets/473461/fork) <div> </div> </div> - <span style="color: black;"><span class="keyword" style="font-weight: bold; color: #006699;">package</span> com.example.expandtabview; </span> - <span style="color: black;"> </span> - <span style="color: black;"> </span> - <span style="color: black;"><span class="keyword" style="font-weight: bold; color: #006699;">import</span> java.util.ArrayList; </span> - <span style="color: black;"> </span> - <span style="color: black;"><span class="keyword" style="font-weight: bold; color: #006699;">import</span> android.app.Activity; </span> - <span style="color: black;"><span class="keyword" style="font-weight: bold; color: #006699;">import</span> android.os.Bundle; </span> - <span style="color: black;"><span class="keyword" style="font-weight: bold; color: #006699;">import</span> android.util.Log; </span> - <span style="color: black;"><span class="keyword" style="font-weight: bold; color: #006699;">import</span> android.view.View; </span> - <span style="color: black;"><span class="keyword" style="font-weight: bold; color: #006699;">import</span> android.widget.Toast; </span> - <span style="color: black;"> </span> - <span style="color: black;"><span class="keyword" style="font-weight: bold; color: #006699;">import</span> com.example.view.ExpandTabView; </span> - <span style="color: black;"><span class="keyword" style="font-weight: bold; color: #006699;">import</span> com.example.view.ViewLeft; </span> - <span style="color: black;"><span class="keyword" style="font-weight: bold; color: #006699;">import</span> com.example.view.ViewMiddle; </span> - <span style="color: black;"><span class="keyword" style="font-weight: bold; color: #006699;">import</span> com.example.view.ViewRight; </span> - <span style="color: black;"> </span> - <span style="color: black;"><span class="keyword" style="font-weight: bold; color: #006699;">public</span> <span class="keyword" style="font-weight: bold; color: #006699;">class</span> MainActivity <span class="keyword" style="font-weight: bold; color: #006699;">extends</span> Activity { </span> - <span style="color: black;"> <span class="keyword" style="font-weight: bold; color: #006699;">private</span> <span class="keyword" style="font-weight: bold; color: #006699;">static</span> <span class="keyword" style="font-weight: bold; color: #006699;">final</span> String TAG = <span class="string" style="color: blue;">“MainActivity”</span>; </span> - <span style="color: black;"> <span class="keyword" style="font-weight: bold; color: #006699;">private</span> ExpandTabView expandTabView; </span> - <span style="color: black;"> <span class="keyword" style="font-weight: bold; color: #006699;">private</span> ArrayList<View> mViewArray = <span class="keyword" style="font-weight: bold; color: #006699;">new</span> ArrayList<View>(); </span> - <span style="color: black;"> <span class="keyword" style="font-weight: bold; color: #006699;">private</span> ViewLeft viewLeft; </span> - <span style="color: black;"> <span class="keyword" style="font-weight: bold; color: #006699;">private</span> ViewMiddle viewMiddle; </span> - <span style="color: black;"> <span class="keyword" style="font-weight: bold; color: #006699;">private</span> ViewRight viewRight; </span> - <span style="color: black;"> </span> - <span style="color: black;"> <span class="annotation" style="color: #646464;">@Override</span> </span> - <span style="color: black;"> <span class="keyword" style="font-weight: bold; color: #006699;">protected</span> <span class="keyword" style="font-weight: bold; color: #006699;">void</span> onCreate(Bundle savedInstanceState) { </span> - <span style="color: black;"> </span> - <span style="color: black;"> <span class="keyword" style="font-weight: bold; color: #006699;">super</span>.onCreate(savedInstanceState); </span> - <span style="color: black;"> setContentView(R.layout.activity_main); </span> - <span style="color: black;"> initView(); </span> - <span style="color: black;"> initVaule(); </span> - <span style="color: black;"> initListener(); </span> - <span style="color: black;"> </span> - <span style="color: black;"> } </span> - <span style="color: black;"> </span> - <span style="color: black;"> <span class="keyword" style="font-weight: bold; color: #006699;">private</span> <span class="keyword" style="font-weight: bold; color: #006699;">void</span> initView() { </span> - <span style="color: black;"> Log.d(TAG,<span class="string" style="color: blue;">“initView”</span>); </span> - <span style="color: black;"> expandTabView = (ExpandTabView) findViewById(R.id.expandtab_view); </span> - <span style="color: black;"> viewLeft = <span class="keyword" style="font-weight: bold; color: #006699;">new</span> ViewLeft(<span class="keyword" style="font-weight: bold; color: #006699;">this</span>); </span> - <span style="color: black;"> viewMiddle = <span class="keyword" style="font-weight: bold; color: #006699;">new</span> ViewMiddle(<span class="keyword" style="font-weight: bold; color: #006699;">this</span>); </span> - <span style="color: black;"> viewRight = <span class="keyword" style="font-weight: bold; color: #006699;">new</span> ViewRight(<span class="keyword" style="font-weight: bold; color: #006699;">this</span>); </span> - <span style="color: black;"> </span> - <span style="color: black;"> } </span> - <span style="color: black;"> </span> - <span style="color: black;"> <span class="keyword" style="font-weight: bold; color: #006699;">private</span> <span class="keyword" style="font-weight: bold; color: #006699;">void</span> initVaule() { </span> - <span style="color: black;"> Log.d(TAG,<span class="string" style="color: blue;">“initValue”</span>); </span> - <span style="color: black;"> mViewArray.add(viewLeft); </span> - <span style="color: black;"> mViewArray.add(viewMiddle); </span> - <span style="color: black;"> mViewArray.add(viewRight); </span> - <span style="color: black;"> ArrayList<String> mTextArray = <span class="keyword" style="font-weight: bold; color: #006699;">new</span> ArrayList<String>(); </span> - <span style="color: black;"> mTextArray.add(<span class="string" style="color: blue;">“距离”</span>); </span> - <span style="color: black;"> mTextArray.add(<span class="string" style="color: blue;">“区域”</span>); </span> - <span style="color: black;"> mTextArray.add(<span class="string" style="color: blue;">“距离”</span>); </span> - <span style="color: black;"> expandTabView.setValue(mTextArray, mViewArray);<span class="comment" style="color: #008200;">//将三个下拉列表设置进去</span> </span> - <span style="color: black;"> expandTabView.setTitle(viewLeft.getShowText(), <span class="number" style="color: #c00000;"></span>); </span> - <span style="color: black;"> expandTabView.setTitle(viewMiddle.getShowText(), <span class="number" style="color: #c00000;">1</span>); </span> - <span style="color: black;"> expandTabView.setTitle(viewRight.getShowText(), <span class="number" style="color: #c00000;">2</span>); </span> - <span style="color: black;"> </span> - <span style="color: black;"> } </span> - <span style="color: black;"> </span> - <span style="color: black;"> <span class="keyword" style="font-weight: bold; color: #006699;">private</span> <span class="keyword" style="font-weight: bold; color: #006699;">void</span> initListener() { </span> - <span style="color: black;"> Log.d(TAG,<span class="string" style="color: blue;">“initListener”</span>); </span> - <span style="color: black;"> viewLeft.setOnSelectListener(<span class="keyword" style="font-weight: bold; color: #006699;">new</span> ViewLeft.OnSelectListener() { </span> - <span style="color: black;"> </span> - <span style="color: black;"> <span class="annotation" style="color: #646464;">@Override</span> </span> - <span style="color: black;"> <span class="keyword" style="font-weight: bold; color: #006699;">public</span> <span class="keyword" style="font-weight: bold; color: #006699;">void</span> getValue(String distance, String showText) { </span> - <span style="color: black;"> Log.d(<span class="string" style="color: blue;">“ViewLeft”</span>, <span class="string" style="color: blue;">“OnSelectListener, getValue”</span>); </span> - <span style="color: black;"> onRefresh(viewLeft, showText); </span> - <span style="color: black;"> } </span> - <span style="color: black;"> }); </span> - <span style="color: black;"> </span> - <span style="color: black;"> viewMiddle.setOnSelectListener(<span class="keyword" style="font-weight: bold; color: #006699;">new</span> ViewMiddle.OnSelectListener() { </span> - <span style="color: black;"> </span> - <span style="color: black;"> <span class="annotation" style="color: #646464;">@Override</span> </span> - <span style="color: black;"> <span class="keyword" style="font-weight: bold; color: #006699;">public</span> <span class="keyword" style="font-weight: bold; color: #006699;">void</span> getValue(String showText) { </span> - <span style="color: black;"> Log.d(<span class="string" style="color: blue;">“ViewMiddle”</span>,<span class="string" style="color: blue;">“OnSelectListener, getValue”</span>); </span> - <span style="color: black;"> onRefresh(viewMiddle,showText); </span> - <span style="color: black;"> </span> - <span style="color: black;"> } </span> - <span style="color: black;"> }); </span> - <span style="color: black;"> </span> - <span style="color: black;"> viewRight.setOnSelectListener(<span class="keyword" style="font-weight: bold; color: #006699;">new</span> ViewRight.OnSelectListener() { </span> - <span style="color: black;"> </span> - <span style="color: black;"> <span class="annotation" style="color: #646464;">@Override</span> </span> - <span style="color: black;"> <span class="keyword" style="font-weight: bold; color: #006699;">public</span> <span class="keyword" style="font-weight: bold; color: #006699;">void</span> getValue(String distance, String showText) { </span> - <span style="color: black;"> Log.d(<span class="string" style="color: blue;">“ViewRight”</span>,<span class="string" style="color: blue;">“OnSelectListener, getValue”</span>); </span> - <span style="color: black;"> onRefresh(viewRight, showText); </span> - <span style="color: black;"> } </span> - <span style="color: black;"> }); </span> - <span style="color: black;"> </span> - <span style="color: black;"> } </span> - <span style="color: black;"> </span> - <span style="color: black;"> <span class="keyword" style="font-weight: bold; color: #006699;">private</span> <span class="keyword" style="font-weight: bold; color: #006699;">void</span> onRefresh(View view, String showText) { </span> - <span style="color: black;"> Log.d(TAG,<span class="string" style="color: blue;">“onRefresh,view:”</span>+view+<span class="string" style="color: blue;">“,showText:”</span>+showText); </span> - <span style="color: black;"> expandTabView.onPressBack(); </span> - <span style="color: black;"> <span class="keyword" style="font-weight: bold; color: #006699;">int</span> position = getPositon(view); </span> - <span style="color: black;"> <span class="keyword" style="font-weight: bold; color: #006699;">if</span> (position >= <span class="number" style="color: #c00000;"></span> && !expandTabView.getTitle(position).equals(showText)) { </span> - <span style="color: black;"> expandTabView.setTitle(showText, position); </span> - <span style="color: black;"> } </span> - <span style="color: black;"> Toast.makeText(MainActivity.<span class="keyword" style="font-weight: bold; color: #006699;">this</span>, showText, Toast.LENGTH_SHORT).show(); </span> - <span style="color: black;"> </span> - <span style="color: black;"> } </span> - <span style="color: black;"> </span> - <span style="color: black;"> <span class="keyword" style="font-weight: bold; color: #006699;">private</span> <span class="keyword" style="font-weight: bold; color: #006699;">int</span> getPositon(View tView) { </span> - <span style="color: black;"> Log.d(TAG,<span class="string" style="color: blue;">“getPosition”</span>); </span> - <span style="color: black;"> <span class="keyword" style="font-weight: bold; color: #006699;">for</span> (<span class="keyword" style="font-weight: bold; color: #006699;">int</span> i = <span class="number" style="color: #c00000;"></span>; i < mViewArray.size(); i++) { </span> - <span style="color: black;"> <span class="keyword" style="font-weight: bold; color: #006699;">if</span> (mViewArray.get(i) == tView) { </span> - <span style="color: black;"> <span class="keyword" style="font-weight: bold; color: #006699;">return</span> i; </span> - <span style="color: black;"> } </span> - <span style="color: black;"> } </span> - <span style="color: black;"> <span class="keyword" style="font-weight: bold; color: #006699;">return</span> –<span class="number" style="color: #c00000;">1</span>; </span> - <span style="color: black;"> } </span> - <span style="color: black;"> </span> - <span style="color: black;"> <span class="annotation" style="color: #646464;">@Override</span> </span> - <span style="color: black;"> <span class="keyword" style="font-weight: bold; color: #006699;">public</span> <span class="keyword" style="font-weight: bold; color: #006699;">void</span> onBackPressed() { </span> - <span style="color: black;"> </span> - <span style="color: black;"> <span class="keyword" style="font-weight: bold; color: #006699;">if</span> (!expandTabView.onPressBack()) { </span> - <span style="color: black;"> finish(); </span> - <span style="color: black;"> } </span> - <span style="color: black;"> </span> - <span style="color: black;"> } </span> - <span style="color: black;"> </span> - <span style="color: black;">} </span> 4 ,ExpandTabView 最主要就是如何处理当我们点击这些ToggleButton的时候要弹出或者收起这些PopupWindow。 ...