目标效果:
在上一个的导航基础上,导航过后进入了主页面,手指向右滑动或者点击左上角的菜单图标,可以显示菜单侧栏,点击某一项可以吐司信息。
素材包:点击打开链接
1.素材包中有个SlideMenu.java页面,新建包并保存该包中。
2.新建leftmenu.xml页面,用于存储侧滑菜单的控件信息。
leftmenu.xml页面:
复制代码
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<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="200dp" android:layout_height="match_parent" android:background="@drawable/leftmenu_bg" xmlns:app="http://schemas.android.com/apk/res/com.example.login"> <com.makeramen.roundedimageview.RoundedImageView android:id="@+id/rivUserPhoto" android:layout_width="80dp" android:layout_height="80dp" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:layout_marginLeft="10dp" android:layout_marginTop="10dp" android:src="@drawable/head" app:riv_oval="true" /> <TextView android:id="@+id/tvMotto" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignBottom="@+id/rivUserPhoto" android:layout_marginBottom="24dp" android:layout_marginLeft="5dp" android:layout_toRightOf="@+id/rivUserPhoto" android:text="奔跑无止境" android:textAppearance="?android:attr/textAppearanceMedium" android:textColor="@color/white"/> <ListView android:id="@+id/lvMenuList" android:layout_width="200dp" android:layout_height="wrap_content" android:layout_below="@id/tvMotto" android:layout_marginLeft="10dp" android:layout_marginTop="10dp" android:listSelector="#00000000" android:divider="@color/whitesmoke" android:dividerHeight="1dp"/> </RelativeLayout>
3.activity_main,xml页面包含侧滑菜单的控件。
activity_main.xml页面:
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" > <!-- padding...代表该控件距离空间中内容的边距离,是内边距 --> <com.example.walkersimulate.util.SlideMenu android:id="@+id/slideMenu" android:layout_width="match_parent" android:layout_height="match_parent" > <include layout="@layout/leftmenu"/> <!-- 侧滑菜单 --> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <include layout="@layout/main_layout_titlebar"/> <include layout="@layout/main_layout_content"/> </LinearLayout> </com.example.walkersimulate.util.SlideMenu> </RelativeLayout>
4.string.xml页面定义数组保存菜单中的列表信息。
string.xml页面:
复制代码
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<?xml version="1.0" encoding="utf-8"?> <!-- 设置Text的页面 --> <resources> <string name="app_name">登录</string> <string name="action_settings">Settings</string> <string name="hello_world">Hello world!</string> <string name="tvForgetPass"><u>忘记密码</u></string> <string name="etName">请输入用户名</string> <string name="etPass">请输入密码</string> <string name="btLogin">登录</string> <string name="btRegister">注册</string> <string name="title_activity_register">RegisterActivity</string> <string name="title_activity_login">LoginActivity</string> <string name="etAccount">账号</string> <string name="etNickname">昵称</string> <string name="etAccountPass">密码</string> <string name="etMotto">座右铭(不多于8个字)</string> <string name="etEmail">邮箱(**@**.com)</string> <string name="etCity">城市</string> <string name="etFoot">步长(cm)</string> <string name="etTall">身高(cm)</string> <string name="etWeight">体重(kg)</string> <string name="etExercise">希望运动量(步/日)</string> <string name="tvShow">终于填完资料了,马上点击注册吧!</string> <string name="register">注册</string> <string name="title_activity_welcome">WelcomeActivity</string> <string name="title_activity_guid">GuidActivity</string> <string name="title_activity_giude">GiudeActivity</string> <string-array name="menulist"> <item>用户登录</item> <item>运动测试</item> <item>个人信息</item> <item>行程记录</item> <item>天气查询</item> <item>健康栏目</item> <item>软件设置</item> </string-array> </resources>
5.新建Item.java页面,实例ListView中的自定义项目。
Item.java页面:
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22package com.example.login; public class Item { private int id; private String name; public Item(int id,String name){ this.id=id; this.name=name; } public int getId() { return id; } public void setId(int id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } }
6.新建menulist_itme.xml页面,用于存储侧滑菜单的自定义控件。
menulist_item.xml页面:
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" > <ImageView android:id="@+id/ivImage" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:layout_marginBottom="10dp" android:src="@drawable/icons_menu_login" /> <TextView android:id="@+id/tvName" android:layout_marginLeft="5dp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:textColor="#ffffff" android:text="用户登录" /> </LinearLayout>
7.新建itemAdapter.java页面,用于配置控件和数据源。
itemAdapter.java页面:
复制代码
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
53package com.example.login; import java.util.List; import com.example.login.R; import android.content.Context; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.ArrayAdapter; import android.widget.ImageView; import android.widget.TextView; public class itemAdapter extends ArrayAdapter<Item> { // 适配器,泛型表示想要适配的数据类型 private int resourceId; public itemAdapter(Context context, int textViewResourceId, List<Item> objects) { // 第一个参数是上下文环境,第二个参数是每一项的子布局,第三个参数是数据 super(context, textViewResourceId, objects); resourceId = textViewResourceId; //获取子布局 } @Override //getView方法在每个子项被滚动到屏幕内的时候都会被调用,每次都将布局重新加载一边 public View getView(int position, View convertView, ViewGroup parent) {//第一个参数表示位置,第二个参数表示缓存布局,第三个表示绑定的view对象 View view; ViewHolder viewHolder; //实例ViewHolder,当程序第一次运行,保存获取到的控件,提高效率 if(convertView==null){ viewHolder=new ViewHolder(); view = LayoutInflater.from(getContext()).inflate(//convertView为空代表布局没有被加载过,即getView方法没有被调用过,需要创建 resourceId, null); // 得到子布局,非固定的,和子布局id有关 viewHolder.ivImage = (ImageView) view.findViewById(R.id.ivImage);//获取控件,只需要调用一遍,调用过后保存在ViewHolder中 viewHolder.tvName = (TextView) view.findViewById(R.id.tvName); //获取控件 view.setTag(viewHolder); }else{ view=convertView; //convertView不为空代表布局被加载过,只需要将convertView的值取出即可 viewHolder=(ViewHolder) view.getTag(); } Item item = getItem(position);//实例指定位置的水果 viewHolder.ivImage.setImageResource(item.getId());//获得指定位置水果的id viewHolder.tvName.setText(item.getName()); //获得指定位置水果的名字 return view; } } class ViewHolder{ //当布局加载过后,保存获取到的控件信息。 ImageView ivImage; TextView tvName; }
8.编写MainActivity.java页面,处理滑动事件。
MainActivity.java页面:
复制代码
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
70package com.example.login; import java.util.ArrayList; import java.util.List; import com.example.walkersimulate.util.SlideMenu; import android.os.Bundle; import android.app.Activity; import android.view.Menu; import android.view.View; import android.view.View.OnClickListener; import android.view.Window; import android.widget.AdapterView; import android.widget.AdapterView.OnItemClickListener; import android.widget.ImageView; import android.widget.ListView; import android.widget.Toast; public class MainActivity extends Activity { private SlideMenu slideMenu; private ImageView ivSwitchSlideMenu; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE); setContentView(R.layout.activity_main); initMenuList(); slideMenu = (SlideMenu) findViewById(R.id.slideMenu); ivSwitchSlideMenu = (ImageView) findViewById(R.id.switch_slidemenu); ivSwitchSlideMenu.setOnClickListener(new OnClickListener() { @Override public void onClick(View view) { if (slideMenu.isMainScreenShowing()) {// 判断滑动菜单是否已打开,如果未打开 slideMenu.openMenu(); // 打开滑动菜单 } else { slideMenu.closeMenu();// 关闭滑动菜单 } } }); } private void initMenuList() { /*设置数据源(图片和文本信息)*/ int[] icons = { R.drawable.icons_menu_login, R.drawable.icons_menu_sport, R.drawable.icons_menu_inform, R.drawable.icons_menu_history, R.drawable.icons_menu_weather, R.drawable.icons_menu_health, R.drawable.icons_menu_setting }; final String[] introductons = getResources().getStringArray( R.array.menulist); /*实例列表*/ List<Item> items = new ArrayList<Item>(); /*向列表中添加图片和对应的文本信息*/ for (int i = 0; i < icons.length; i++) { items.add(new Item(icons[i], introductons[i])); } ListView lvMenuList = (ListView) findViewById(R.id.lvMenuList); /*创建适配器*/ itemAdapter adapter = new itemAdapter(this, R.layout.menulist_item, items); /*配置适配器*/ lvMenuList.setAdapter(adapter); /*列表某一项的点击事件*/ lvMenuList.setOnItemClickListener(new OnItemClickListener() { @Override public void onItemClick(AdapterView<?> adapterView, View view, int position, long id) { Toast.makeText(MainActivity.this, "你点击了" + introductons[position], Toast.LENGTH_SHORT) .show(); } }); } }
9.values中新建colors.xml页面,存储各种颜色。
colors.xml页面:
复制代码
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
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304<?xml version="1.0" encoding="utf-8"?> <resources> <color name="screen_background">#333</color> <color name="display_background">#000</color> <color name="white">#ffffff</color> <!-- 白色 --> <color name="ivory">#fffff0</color> <!-- 象牙色 --> <color name="lightyellow">#ffffe0</color> <!-- 亮黄色 --> <color name="yellow">#ffff00</color> <!-- 黄色 --> <color name="snow">#fffafa</color> <!-- 雪白色 --> <color name="floralwhite">#fffaf0</color> <!-- 花白色 --> <color name="lemonchiffon">#fffacd</color> <!-- 柠檬绸色 --> <color name="cornsilk">#fff8dc</color> <!-- 米绸色 --> <color name="seaShell">#fff5ee</color> <!-- 海贝色 --> <color name="lavenderblush">#fff0f5</color> <!-- 淡紫红 --> <color name="papayawhip">#ffefd5</color> <!-- 番木色 --> <color name="blanchedalmond">#ffebcd</color> <!-- 白杏色 --> <color name="mistyrose">#ffe4e1</color> <!-- 浅玫瑰色 --> <color name="bisque">#ffe4c4</color> <!-- 桔黄色 --> <color name="moccasin">#ffe4b5</color> <!-- 鹿皮色 --> <color name="navajowhite">#ffdead</color> <!-- 纳瓦白 --> <color name="peachpuff">#ffdab9</color> <!-- 桃色 --> <color name="gold">#ffd700</color> <!-- 金色 --> <color name="pink">#ffc0cb</color> <!-- 粉红色 --> <color name="lightpink">#ffb6c1</color> <!-- 亮粉红色 --> <color name="orange">#ffa500</color> <!-- 橙色 --> <color name="lightsalmon">#ffa07a</color> <!-- 亮肉色 --> <color name="darkorange">#ff8c00</color> <!-- 暗桔黄色 --> <color name="coral">#ff7f50</color> <!-- 珊瑚色 --> <color name="hotpink">#ff69b4</color> <!-- 热粉红色 --> <color name="tomato">#ff6347</color> <!-- 西红柿色 --> <color name="orangered">#ff4500</color> <!-- 红橙色 --> <color name="deeppink">#ff1493</color> <!-- 深粉红色 --> <color name="fuchsia">#ff00ff</color> <!-- 紫红色 --> <color name="magenta">#ff00ff</color> <!-- 红紫色 --> <color name="red">#ff0000</color> <!-- 红色 --> <color name="oldlace">#fdf5e6</color> <!-- 老花色 --> <color name="lightgoldenrodyellow">#fafad2</color> <!-- 亮金黄色 --> <color name="linen">#faf0e6</color> <!-- 亚麻色 --> <color name="antiquewhite">#faebd7</color> <!-- 古董白 --> <color name="salmon">#fa8072</color> <!-- 鲜肉色 --> <color name="ghostwhite">#f8f8ff</color> <!-- 幽灵白 --> <color name="mintcream">#f5fffa</color> <!-- 薄荷色 --> <color name="whitesmoke">#f5f5f5</color> <!-- 烟白色 --> <color name="beige">#f5f5dc</color> <!-- 米色 --> <color name="wheat">#f5deb3</color> <!-- 浅黄色 --> <color name="sandybrown">#f4a460</color> <!-- 沙褐色 --> <color name="azure">#f0ffff</color> <!-- 天蓝色 --> <color name="honeydew">#f0fff0</color> <!-- 蜜色 --> <color name="aliceblue">#f0f8ff</color> <!-- 艾利斯兰 --> <color name="khaki">#f0e68c</color> <!-- 黄褐色 --> <color name="lightcoral">#f08080</color> <!-- 亮珊瑚色 --> <color name="palegoldenrod">#eee8aa</color> <!-- 苍麒麟色 --> <color name="violet">#ee82ee</color> <!-- 紫罗兰色 --> <color name="darksalmon">#e9967a</color> <!-- 暗肉色 --> <color name="lavender">#e6e6fa</color> <!-- 淡紫色 --> <color name="lightcyan">#e0ffff</color> <!-- 亮青色 --> <color name="burlywood">#deb887</color> <!-- 实木色 --> <color name="plum">#dda0dd</color> <!-- 洋李色 --> <color name="gainsboro">#dcdcdc</color> <!-- 淡灰色 --> <color name="crimson">#dc143c</color> <!-- 暗深红色 --> <color name="palevioletred">#db7093</color> <!-- 苍紫罗兰色 --> <color name="goldenrod">#daa520</color> <!-- 金麒麟色 --> <color name="orchid">#da70d6</color> <!-- 淡紫色 --> <color name="thistle">#d8bfd8</color> <!-- 蓟色 --> <color name="lightgray">#d3d3d3</color> <!-- 亮灰色 --> <color name="lightgrey">#d3d3d3</color> <!-- 亮灰色 --> <color name="tan">#d2b48c</color> <!-- 茶色 --> <color name="chocolate">#d2691e</color> <!-- 巧可力色 --> <color name="peru">#cd853f</color> <!-- 秘鲁色 --> <color name="indianred">#cd5c5c</color> <!-- 印第安红 --> <color name="mediumvioletred">#c71585</color> <!-- 中紫罗兰色 --> <color name="silver">#c0c0c0</color> <!-- 银色 --> <color name="darkkhaki">#bdb76b</color> <!-- 暗黄褐色 --> <color name="rosybrown">#bc8f8f</color> <!-- 褐玫瑰红 --> <color name="mediumorchid">#ba55d3</color> <!-- 中粉紫色 --> <color name="darkgoldenrod">#b8860b</color> <!-- 暗金黄色 --> <color name="firebrick">#b22222</color> <!-- 火砖色 --> <color name="powderblue">#b0e0e6</color> <!-- 粉蓝色 --> <color name="lightsteelblue">#b0c4de</color> <!-- 亮钢兰色 --> <color name="paleturquoise">#afeeee</color> <!-- 苍宝石绿 --> <color name="greenyellow">#adff2f</color> <!-- 黄绿色 --> <color name="lightblue">#add8e6</color> <!-- 亮蓝色 --> <color name="darkgray">#a9a9a9</color> <!-- 暗灰色 --> <color name="darkgrey">#a9a9a9</color> <!-- 暗灰色 --> <color name="brown">#a52a2a</color> <!-- 褐色 --> <color name="sienna">#a0522d</color> <!-- 赭色 --> <color name="darkorchid">#9932cc</color> <!-- 暗紫色 --> <color name="palegreen">#98fb98</color> <!-- 苍绿色 --> <color name="darkviolet">#9400d3</color> <!-- 暗紫罗兰色 --> <color name="mediumpurple">#9370db</color> <!-- 中紫色 --> <color name="lightgreen">#90ee90</color> <!-- 亮绿色 --> <color name="darkseagreen">#8fbc8f</color> <!-- 暗海兰色 --> <color name="saddlebrown">#8b4513</color> <!-- 重褐色 --> <color name="darkmagenta">#8b008b</color> <!-- 暗洋红 --> <color name="darkred">#8b0000</color> <!-- 暗红色 --> <color name="blueviolet">#8a2be2</color> <!-- 紫罗兰蓝色 --> <color name="lightskyblue">#87cefa</color> <!-- 亮天蓝色 --> <color name="skyblue">#87ceeb</color> <!-- 天蓝色 --> <color name="gray">#808080</color> <!-- 灰色 --> <color name="grey">#808080</color> <!-- 灰色 --> <color name="olive">#808000</color> <!-- 橄榄色 --> <color name="purple">#800080</color> <!-- 紫色 --> <color name="maroon">#800000</color> <!-- 粟色 --> <color name="aquamarine">#7fffd4</color> <!-- 碧绿色 --> <color name="chartreuse">#7fff00</color> <!-- 黄绿色 --> <color name="lawngreen">#7cfc00</color> <!-- 草绿色 --> <color name="mediumslateblue">#7b68ee</color> <!-- 中暗蓝色 --> <color name="lightslategray">#778899</color> <!-- 亮蓝灰 --> <color name="lightslategrey">#778899</color> <!-- 亮蓝灰 --> <color name="slategray">#708090</color> <!-- 灰石色 --> <color name="slategrey">#708090</color> <!-- 灰石色 --> <color name="olivedrab">#6b8e23</color> <!-- 深绿褐色 --> <color name="slateblue">#6a5acd</color> <!-- 石蓝色 --> <color name="dimgray">#696969</color> <!-- 暗灰色 --> <color name="dimgrey">#696969</color> <!-- 暗灰色 --> <color name="mediumaquamarine">#66cdaa</color> <!-- 中绿色 --> <color name="cornflowerblue">#6495ed</color> <!-- 菊兰色 --> <color name="cadetblue">#5f9ea0</color> <!-- 军兰色 --> <color name="darkolivegreen">#556b2f</color> <!-- 暗橄榄绿 --> <color name="indigo">#4b0082</color> <!-- 靛青色 --> <color name="mediumturquoise">#48d1cc</color> <!-- 中绿宝石 --> <color name="darkslateblue">#483d8b</color> <!-- 暗灰蓝色 --> <color name="steelblue">#4682b4</color> <!-- 钢兰色 --> <color name="royalblue">#4169e1</color> <!-- 皇家蓝 --> <color name="turquoise">#40e0d0</color> <!-- 青绿色 --> <color name="mediumseagreen">#3cb371</color> <!-- 中海蓝 --> <color name="limegreen">#32cd32</color> <!-- 橙绿色 --> <color name="darkslategray">#2f4f4f</color> <!-- 暗瓦灰色 --> <color name="darkslategrey">#2f4f4f</color> <!-- 暗瓦灰色 --> <color name="seagreen">#2e8b57</color> <!-- 海绿色 --> <color name="forestgreen">#228b22</color> <!-- 森林绿 --> <color name="lightseagreen">#20b2aa</color> <!-- 亮海蓝色 --> <color name="dodgerblue">#1e90ff</color> <!-- 闪兰色 --> <color name="midnightblue">#191970</color> <!-- 中灰兰色 --> <color name="aqua">#00ffff</color> <!-- 浅绿色 --> <color name="cyan">#00ffff</color> <!-- 青色 --> <color name="springgreen">#00ff7f</color> <!-- 春绿色 --> <color name="lime">#00ff00</color> <!-- 酸橙色 --> <color name="mediumspringgreen">#00fa9a</color> <!-- 中春绿色 --> <color name="darkturquoise">#00ced1</color> <!-- 暗宝石绿 --> <color name="deepskyblue">#00bfff</color> <!-- 深天蓝色 --> <color name="darkcyan">#008b8b</color> <!-- 暗青色 --> <color name="teal">#008080</color> <!-- 水鸭色 --> <color name="green">#008000</color> <!-- 绿色 --> <color name="darkgreen">#006400</color> <!-- 暗绿色 --> <color name="blue">#0000ff</color> <!-- 蓝色 --> <color name="mediumblue">#0000cd</color> <!-- 中兰色 --> <color name="darkblue">#00008b</color> <!-- 暗蓝色 --> <color name="navy">#000080</color> <!-- 海军色 --> <color name="black">#000000</color> <!-- 黑色 --> <color name="transparent">#00000000</color> <!-- 透明色 --> <color name="reveal_color">#1b000000</color> <color name="graywhite">#F7F9F8</color> <color name="gray_a">#F7F7F7</color> <color name="bantransparent">#05000000</color> <!-- 半透明色 --> </resources>
10.程序运行就可以显示滑动菜单的功能了。
参考代码:
点击打开链接
最后
以上就是可爱大米最近收集整理的关于Android小程序-Walker侧滑菜单页面(五)的全部内容,更多相关Android小程序-Walker侧滑菜单页面(五)内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复