我刚好最近在开发一个商城项目，实现了一个简单的控件，就和大家一起分享一下。
控件的效果就是类似百度糯米或者美团的二级菜单，我开发ios的客户端菜单功能，直接参考了git一个项目，对应的ui效果：
其实效果看起来还不错。ios开发完成以后，又要准备开发android，发现对应网上的案例还是很少的，或者不是想要的效果。我想参考了别人的项目代码，也为开源项目做点贡献，准备自己开发一个android的menu项目；
折腾了大概三个小时，终于搞定了，效果如下：
从图片不难看出，这是一个多级菜单，控制者填充数据源，所以实现的时候，尽量封装的使用，使用者最好是能两三行代码搞定。
具体实现思路：
1、menuview，实现了第一级菜单的封装
①、view初始化和数据源定义；
②、绘制一级菜单；
③、控制子菜单的popupwindow弹出框
代码具体如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
|
package com.spring.sky.menuproject.view; import android.content.context; import android.util.attributeset; import android.view.gravity; import android.view.view; import android.view.viewgroup; import android.widget.linearlayout; import android.widget.textview; import com.spring.sky.menuproject.appinfoutils; import com.spring.sky.menuproject.r; import java.util.list; /** * created by springsky on 16/10/24. */public class menuview extends linearlayout implements view.onclicklistener, menupopupwindow.onmenulistener { private string[] hinttexts; public list[] datasource; public textview[] textviews; private int textcolor = r.color.gray_80; private int textcolorselected = r.color.orange; private int textsize; private int lineheight ; private menupopupwindow menupopupwindow; private onmenulistener onmenulistener; view lineview; textview lasttv; private indexpath[] indexpaths; public menuview(context context) { super(context); init(context); } public menuview(context context, attributeset attrs) { super(context, attrs); init(context); } public menuview(context context, attributeset attrs, int defstyleattr) { super(context, attrs, defstyleattr); init(context); } public void sethinttexts(string[] hinttexts) { this.hinttexts = hinttexts; } public void setdatasource(list[] datasource) { this.datasource = datasource; reloaddata(); } /*** * 设置当前选中的数据 * @param indexpath */public void setindexpath(indexpath indexpath) { setindexpath(indexpath, false); } /*** * 设置当前选中的内容 * @param indexpath * @param actionmenu 是否通知监听器 */public void setindexpath(indexpath indexpath, boolean actionmenu) { indexpaths[indexpath.column] = indexpath; if (actionmenu) { textview lasttv = textviews[indexpath.column]; list<menumodel> list = datasource[indexpath.column]; if(list == null || indexpath.row >= list.size()){ return; } menumodel left = list.get(indexpath.row); menumodel menumodel = null; if (indexpath.item < 0) { menumodel = left; } else { menumodel right = left.chindmenu.get(indexpath.item); menumodel = right; } lasttv.settext(menumodel.value); if (onmenulistener != null) { onmenulistener.onmenu(indexpath, menumodel); } } } public list[] getdatasource() { return datasource; } /*** * 初始化 * @param context */private void init(context context) { menupopupwindow = new menupopupwindow(context); menupopupwindow.setonmenulistener(this); appinfoutils.getviewheight(this); textsize = appinfoutils.sptopx(6); lineheight = appinfoutils.diptopx(1); } /*** * 绘制一级菜单分类 */private void reloaddata() { removeallviews(); if (datasource == null || datasource.length < 1) { return; } int count = datasource.length; int height = getmeasuredheight() - lineheight; setorientation(linearlayout.vertical); linearlayout menubaseview = new linearlayout(getcontext()); menubaseview.setlayoutparams(new layoutparams(layoutparams.match_parent, height)); menubaseview.setweightsum(count); menubaseview.setgravity(gravity.center); menubaseview.setorientation(linearlayout.horizontal); indexpaths = new indexpath[count]; textviews = new textview[count]; for (int i = 0; i < count; i++) { indexpaths[i] = new indexpath(i, 0, -1); linearlayout tempbaseview = new linearlayout(getcontext()); tempbaseview.setlayoutparams(new layoutparams(layoutparams.match_parent, height, 1)); tempbaseview.setgravity(gravity.center); textview tv = new textview(getcontext()); tv.settextcolor(getresources().getcolor(textcolor)); tv.settextsize(textsize); linearlayout.layoutparams params = new layoutparams(layoutparams.wrap_content, layoutparams.match_parent); tv.setgravity(gravity.center); tv.setlayoutparams(params); tv.setmaxlines(1); tv.setcompounddrawableswithintrinsicbounds(0, 0, r.mipmap.triangle_down, 0); tv.setcompounddrawablepadding(appinfoutils.diptopx(2)); tv.setid(i); tv.setonclicklistener(this); textviews[i] = tv; tempbaseview.addview(tv); menubaseview.addview(tempbaseview); if (hinttexts != null && i < hinttexts.length) { tv.settext(hinttexts[i]); } view lineview = new view(getcontext()); lineview.setbackgroundcolor(getresources().getcolor(r.color.main_bg_in)); menubaseview.addview(lineview, new layoutparams(appinfoutils.diptopx(1), height - appinfoutils.diptopx(8))); } addview(menubaseview); lineview = new view(getcontext()); lineview.setbackgroundcolor(getresources().getcolor(r.color.main_bg_in)); addview(lineview, new layoutparams(viewgroup.layoutparams.match_parent, lineheight)); } /*** * 一级菜单点击事件触发 * @param v */@override public void onclick(view v) { lasttv = (textview) v; int column = v.getid(); list<menumodel> list = datasource[column]; lasttv.setcompounddrawableswithintrinsicbounds(0, 0, r.mipmap.triangle_up, 0); lasttv.settextcolor(getresources().getcolor(textcolorselected)); menupopupwindow.setleftlist(column, list); indexpath indexpath = indexpaths[column]; menupopupwindow.setselect(indexpath.row, indexpath.item); // int[] location = new int[2]; // lineview.getlocationonscreen(location); menupopupwindow.showasdropdown(lineview); // menupopupwindow.showatlocation(this,gravity.bottom,0,0); } /*** * 弹出框点击事件处理 * @param column * @param row * @param item * @param menumodel */@override public void onmenu(int column, int row, int item, menumodel menumodel) { textview lasttv = textviews[column]; lasttv.settext(menumodel.value); indexpath indexpath = indexpaths[column]; indexpath.row = row; indexpath.item = item; onmenudismiss(); if (onmenulistener != null) { onmenulistener.onmenu(indexpath, menumodel); } } /*** * 弹出框关闭 */@override public void onmenudismiss() { lasttv.settextcolor(getresources().getcolor(r.color.gray_80)); lasttv.setcompounddrawableswithintrinsicbounds(0, 0, r.mipmap.triangle_down, 0); } /*** * 设置监听器 * @param onmenulistener */public void setonmenulistener(onmenulistener onmenulistener) { this.onmenulistener = onmenulistener; } public static interface onmenulistener { void onmenu(indexpath indexpath, menumodel menumodel); } /**** * 菜单列、行、二级子行 */public static class indexpath { public int column; //一级菜单 public int row; //left row public int item; //right row public indexpath(int column, int row, int item) { this.column = column; this.row = row; this.item = item; } } } |
2、popupwindow主要是实现了弹出框显示子列的一级和二级菜单的数据。
我使用了两个listview来动态实现数据的加载。
具体代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
|
package com.spring.sky.menuproject.view; import android.content.context; import android.graphics.drawable.paintdrawable; import android.view.layoutinflater; import android.view.view; import android.view.viewgroup; import android.view.animation.animation; import android.view.animation.animationutils; import android.widget.adapterview; import android.widget.linearlayout; import android.widget.listview; import android.widget.popupwindow; import com.spring.sky.menuproject.r; import java.util.list; /** * created by springsky on 16/10/20. */public class menupopupwindow extends popupwindow implements adapterview.onitemclicklistener { context mcontext; private listview leftlv,rightlv; private onmenulistener onmenulistener; private list<menumodel> leftlist,rightlist; private menuadapter menuleftadapter,menurightadapter; private int column; boolean hassecond; /*** * 初始化 * @param context */public menupopupwindow(context context){ this.mcontext = context; view view = layoutinflater.from(mcontext).inflate(r.layout.menu_popup_window, null); leftlv = (listview) view.findviewbyid(r.id.leftlv); leftlv.setchoicemode(listview.choice_mode_single); rightlv = (listview) view.findviewbyid(r.id.rightlv); rightlv.setchoicemode(listview.choice_mode_single); setcontentview(view); setbackgrounddrawable(new paintdrawable()); setfocusable(true); setwidth(viewgroup.layoutparams.match_parent); setheight(linearlayout.layoutparams.wrap_content); setondismisslistener(new popupwindow.ondismisslistener() { @override public void ondismiss() { leftlv.setselection(0); rightlv.setselection(0); if( onmenulistener != null ){ onmenulistener.onmenudismiss(); } } }); menuleftadapter = new menuadapter(mcontext); menuleftadapter.setcolumn(0); menuleftadapter.setlist(leftlist); leftlv.setadapter(menuleftadapter); leftlv.setonitemclicklistener(this); menurightadapter = new menuadapter(mcontext); menurightadapter.setcolumn(1); menurightadapter.setlist(rightlist); rightlv.setadapter(menurightadapter); rightlv.setonitemclicklistener(this); } @override public void showasdropdown(view anchor) { super.showasdropdown(anchor); } /*** * 加载数据 * @param column * @param leftlist */public void setleftlist(int column,list<menumodel> leftlist) { this.column = column; this.leftlist = leftlist; hassecond = false; for (menumodel childmodel : leftlist){ if(childmodel.haschind()){ hassecond = true; break; } } menuleftadapter.setlist(leftlist); if(!hassecond){ rightlv.setvisibility(view.gone); setrightlist(null); }else { rightlv.setvisibility(view.visible); } } /*** * 默认选中的一级和二级行 * @param row * @param item */public void setselect(int row,int item){ if(row < 0 || leftlist == null || row >= leftlist.size()){ return; } menumodel leftmodel = leftlist.get(row); leftlv.setselection(row); menuleftadapter.setselectposition(row); setrightlist(leftmodel.chindmenu); if(item < 0 || rightlist ==null || item >= rightlist.size()){ return; } rightlv.setselection(item); menurightadapter.setselectposition(item); } private void setrightlist(list<menumodel> rightlist) { this.rightlist = rightlist; menurightadapter.setlist(rightlist); } @override public void onitemclick(adapterview<?> parent, view view, int position, long id) { if(parent.getid() == leftlv.getid()){ menumodel model = leftlist.get(position); if(leftlv.getselecteditemposition() == position){ return; } if(model.haschind()){ menuleftadapter.setselectposition(position); setrightlist(model.chindmenu); }else { dismiss(); } onmenuclick(position,0,model); }else { menurightadapter.setselectposition(position); menumodel model = rightlist.get(position); onmenuclick(menuleftadapter.getselectposition(),position,model); dismiss(); } } void onmenuclick(int row,int item,menumodel model){ if(onmenulistener != null){ onmenulistener.onmenu(column,row,item,model); } } public void setonmenulistener(onmenulistener onmenulistener) { this.onmenulistener = onmenulistener; } public static interface onmenulistener{ void onmenu(int column, int row, int item, menumodel menumodel); void onmenudismiss(); } } |
3、其他的就是menumodel，考虑是多级层次关系，所以建议使用链结构。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
package com.spring.sky.menuproject.view; import java.util.list; /** * created by springsky on 16/10/20. */public class menumodel { public object key; //key public string value; //显示的内容 public list<menumodel> chindmenu; //子列表数据 public menumodel(){ super(); } public menumodel(object key, string value, list<menumodel> chindmenu){ super(); this.key = key; this.value = value; this.chindmenu = chindmenu; } /*** * 是否有子列表数据 * @return */public boolean haschind(){ return (chindmenu != null && chindmenu.size() > 0); } } |
诶，生活压力大了，也不会写博客了，就简单描述一下，希望大家不要见怪。
项目的源码，我已经提交到git上了。
下载地址：https://github.com/skyfouk/androidmenuproject.git
以上所述是小编给大家介绍的ios的客户端菜单功能仿百度糯米/美团二级菜单，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对服务器之家网站的支持！
原文链接：http://blog.csdn.net/springsky_/article/details/53024028
