Android之SlideMenu实例Demo
年末加班基本上一周都没什么时候回家写代码，回到家就想睡觉，周末难得有时间写个博客，上次写了一篇关于SlideMenu开源项目的导入问题，这次主要讲讲使用的问题，SlideMenu应用的广泛程度就不用说了，基本上是App的标配，关于SlideMenu的各种使用方法有很多，网上各种Demo也很多，想来想去还是按照自己本身的实战方式去写写吧，走过的坑希望大家基本上不会遇到，开始正题:
基础布局
写布局文件之前先看下最终的效果图，昨天红色就是滑动出现的区域，右边的图片由左边的事件触发:
activity_main.xml中的布局:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<FrameLayout xmlns:android=
"http://schemas.android.com/apk/res/android"
xmlns:tools=
"http://schemas.android.com/tools"
android:id=
"@+id/main_frame"
android:layout_width=
"match_parent"
android:layout_height=
"match_parent"
android:paddingBottom=
"@dimen/activity_vertical_margin"
android:paddingLeft=
"@dimen/activity_horizontal_margin"
android:paddingRight=
"@dimen/activity_horizontal_margin"
android:paddingTop=
"@dimen/activity_vertical_margin"
tools:context=
"com.example.slidemenu.MainActivity"
>
<ListView
android:id=
"@+id/list_base"
android:layout_width=
"match_parent"
android:layout_height=
"match_parent"
>
</ListView>
</FrameLayout>
|
menu_frame.xml中主要是用于右边显示布局，单独写出来一个是为了方便以后的替换:
|
1
2
3
4
5
6
7
8
|
<?xml version=
"1.0"
encoding=
"utf-8"
?>
<FrameLayout xmlns:android=
"http://schemas.android.com/apk/res/android"
android:layout_width=
"match_parent"
android:layout_height=
"match_parent"
android:id=
"@+id/menu_frame"
>
</FrameLayout>
|
slide_menu.xml中主要用来显示SlideMenu中的数据，最后通过代码区
|
1
2
3
4
5
6
7
|
<?xml version=
"1.0"
encoding=
"utf-8"
?>
<ListView xmlns:android=
"http://schemas.android.com/apk/res/android"
android:id=
"@+id/list_slide"
android:layout_width=
"match_parent"
android:layout_height=
"match_parent"
>
</ListView>
|
list_item中的布局文件，之后自定义的Adapter会用到:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<?xml version=
"1.0"
encoding=
"utf-8"
?>
<LinearLayout xmlns:android=
"http://schemas.android.com/apk/res/android"
android:layout_width=
"match_parent"
android:layout_height=
"match_parent"
android:orientation=
"horizontal"
>
<ImageView
android:id=
"@+id/list_image"
android:layout_width=
"wrap_content"
android:layout_height=
"wrap_content"
/>
</LinearLayout>
|
实例Demo
首先MainActivity导入开源项目包(如果导入有问题可以参考本人的上一篇文章)之后继承SlidingFragmentActivity;
自定义 实例化Slide_Menu.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
|
public
class
MyMenuFragment
extends
Fragment
implements
OnItemClickListener {
private
View view;
private
String[] listArrStrings=
new
String[]{
"鹰"
,
" 鹭"
,
"火烈鸟"
};
@Override
public
void
onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super
.onCreate(savedInstanceState);
}
@Override
public
View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// TODO Auto-generated method stub
view=LayoutInflater.from(getActivity()).inflate(R.layout.slide_menu,
null
);
return
view;
}
@Override
public
void
onActivityCreated(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super
.onActivityCreated(savedInstanceState);
ListView listView=(ListView) view.findViewById(R.id.list_slide);
listView.setAdapter(
new
ArrayAdapter<String>(getActivity(),android.R.layout.simple_list_item_1, listArrStrings));
listView.setOnItemClickListener(
this
);
}
@Override
public
void
onItemClick(AdapterView<?> parent, View view,
int
position,
long
id) {
// TODO Auto-generated method stub
if
(getActivity()
instanceof
MainActivity){
((MainActivity)getActivity()).changeImage(position);
}
}
}
|
onCreate中方法中调用:
|
1
2
3
4
5
6
7
8
9
10
11
12
|
super
.onCreate(savedInstanceState);
setBehindContentView(R.layout.menu_frame);
setContentView(R.layout.activity_main);
slidingMenu = getSlidingMenu();
slidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
slidingMenu.setMode(SlidingMenu.LEFT_RIGHT);
slidingMenu.setBehindWidth(
80
);
MyMenuFragment menuFragment =
new
MyMenuFragment();
getSupportFragmentManager().beginTransaction()
.replace(R.id.menu_frame, menuFragment,
"MyMenu"
).commit();
|
MyMenuFragment中如果回调MainActivity调用的方法:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
public
void
changeImage(
int
index){
ListView view=(ListView) findViewById(R.id.list_base);
switch
(index) {
case
0
:
view.setAdapter(
new
MyListAdapter(
this
, R.drawable.eagle));
break
;
case
1
:
view.setAdapter(
new
MyListAdapter(
this
, R.drawable.heron));
break
;
case
2
:
view.setAdapter(
new
MyListAdapter(
this
, R.drawable.flamingo));
break
;
default
:
break
;
}
}
|
最后是自定义的MyListAdapter:
|
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
|
public
class
MyListAdapter
extends
BaseAdapter{
private
int
resourceID;
private
LayoutInflater inflater;
public
MyListAdapter(Context context,
int
resId){
inflater=LayoutInflater.from(context);
resourceID=resId;
}
@Override
public
int
getCount() {
// TODO Auto-generated method stub
return
3
;
}
@Override
public
Object getItem(
int
position) {
// TODO Auto-generated method stub
return
null
;
}
@Override
public
long
getItemId(
int
position) {
// TODO Auto-generated method stub
return
0
;
}
@Override
public
View getView(
int
position, View convertView, ViewGroup parent) {
// TODO Auto-generated method stub
View view=
null
;
if
(convertView==
null
) {
view=inflater.inflate(R.layout.list_item,
null
);
}
else
{
view=convertView;
}
ImageView imageView=(ImageView) view.findViewById(R.id.list_image);
imageView.setImageResource(resourceID);
return
view;
}
}
|
本人只是设置左滑动，其实还是设置右滑动，设置左右滑动通过setSecondaryMenu设置；
最后看下火烈鸟吧，老外还是比较爱护动物的，以上都是开源项目SlideMenu中的图片:
本文转自Fly_Elephant博客园博客，原文链接：http://www.cnblogs.com/xiaofeixiang/p/4148837.html，如需转载请自行联系原作者