SlidingPaneLayout和DrawerLayout的区别
SlidingPaneLayout
SlidingPaneLayout是 Android 在android-support-v4.jar中推出的一个可滑动面板的布局,我们提到水平布局时的LinearLayout无法自动左右拉伸,必须借助于手势事件才能拉出左侧隐藏的布局,现在SlidingPaneLayout便是为了解决LinearLayout无法自动拉伸的缺陷。只要我们在布局文件的SlidingPaneLayout节点下定义两个子布局,那么页面默认会把第一个子布局作为左侧隐藏面板,一旦用户的手势从左向右滑动,左侧面板就被拉了出来。SlidingPaneLayout的使用挺简单的,下面是它的几个常用方法:
setSliderFadeColor : 设置主页面的阴影渐变色。即拉出左侧面板时,右边主页面的渐变阴影色,主页面变得越小则阴影色救越浓。阴影色默认为灰色。
setCoveredFadeColor : 设置左侧面板缩进去时的阴影渐变色。
setPanelSlideListener : 设置左侧面板的拉出监听器。该监听器实现了下面三个方法:
--onPanelClosed : 左侧面板已关闭。
--onPanelOpened : 左侧面板已打开。
--onPanelSlide : 左侧面板在滑动。
openPane : 打开左侧面板。
closePane : 关闭左侧面板。
isOpen : 判断左侧面板是否打开。
下面是使用SlidingPaneLayout的效果截图:
下面是使用SlidingPaneLayout的布局文件示例:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<!--?xml version=
"1.0"
encoding=
"UTF-8"
?-->
<listview android:id=
"@+id/lv_sliding"
android:layout_height=
"match_parent"
android:layout_width=
"150dp"
>
<linearlayout android:layout_height=
"match_parent"
android:layout_width=
"match_parent"
android:orientation=
"vertical"
>
<textview android:background=
"#ffffdd"
android:id=
"@+id/tv_sliding"
android:layout_height=
"wrap_content"
android:layout_width=
"match_parent"
android:paddingleft=
"100dp"
android:text=
"打开侧滑菜单"
android:textcolor=
"#000000"
android:textsize=
"20sp"
>
</android.support.v4.view.viewpager></textview></linearlayout>
</listview></android.support.v4.widget.slidingpanelayout>
|
下面是使用SlidingPaneLayout的页面代码示例:
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
|
import
java.util.ArrayList;
import
com.example.exmdrawer.fragment.ColorFragment;
import
android.graphics.Color;
import
android.os.Bundle;
import
android.support.v4.app.Fragment;
import
android.support.v4.app.FragmentActivity;
import
android.support.v4.app.FragmentManager;
import
android.support.v4.app.FragmentPagerAdapter;
import
android.support.v4.view.ViewPager;
import
android.support.v4.view.ViewPager.OnPageChangeListener;
import
android.support.v4.widget.SlidingPaneLayout;
import
android.support.v4.widget.SlidingPaneLayout.PanelSlideListener;
import
android.util.Log;
import
android.view.View;
import
android.view.View.OnClickListener;
import
android.widget.AdapterView;
import
android.widget.AdapterView.OnItemClickListener;
import
android.widget.ArrayAdapter;
import
android.widget.ListView;
import
android.widget.TextView;
public
class
SlidingActivity
extends
FragmentActivity
implements
OnClickListener, OnItemClickListener {
private
final
static
String TAG =
"SlidingActivity"
;
private
SlidingPaneLayout sp_layout;
private
ListView lv_sliding;
private
ViewPager vp_sliding;
private
TextView tv_sliding;
private
String[] colorDescArray = {
"红色"
,
"绿色"
,
"蓝色"
,
"白色"
,
"黑色"
};
private
int
[] colorArray = {Color.RED, Color.GREEN, Color.BLUE, Color.WHITE, Color.BLACK};
private
ColorPagerAdapter vp_adapter;
@Override
protected
void
onCreate(Bundle savedInstanceState) {
super
.onCreate(savedInstanceState);
setContentView(R.layout.activity_sliding);
sp_layout = (SlidingPaneLayout) findViewById(R.id.sp_layout);
lv_sliding = (ListView) findViewById(R.id.lv_sliding);
vp_sliding = (ViewPager) findViewById(R.id.vp_sliding);
tv_sliding = (TextView) findViewById(R.id.tv_sliding);
tv_sliding.setOnClickListener(
this
);
//sp_layout.setSliderFadeColor(Color.YELLOW);
sp_layout.setCoveredFadeColor(Color.RED);
sp_layout.setPanelSlideListener(
new
SlidingPanelListener());
ArrayAdapter<string> lv_adapter =
new
ArrayAdapter<string>(
this
,
R.layout.list_item, colorDescArray);
lv_sliding.setAdapter(lv_adapter);
lv_sliding.setOnItemClickListener(
this
);
vp_adapter =
new
ColorPagerAdapter(getSupportFragmentManager());
vp_sliding.setAdapter(vp_adapter);
vp_sliding.addOnPageChangeListener(
new
ColorPagerListener());
}
@Override
public
void
onClick(View v) {
if
(v.getId() == R.id.tv_sliding) {
if
(sp_layout.isOpen()) {
sp_layout.closePane();
}
else
{
sp_layout.openPane();
}
}
}
@Override
public
void
onItemClick(AdapterView<!--?--> parent, View view,
int
position,
long
id) {
vp_sliding.setCurrentItem(position);
sp_layout.closePane();
}
public
class
SlidingPanelListener
implements
PanelSlideListener {
@Override
public
void
onPanelClosed(View arg0) {
tv_sliding.setText(
"打开侧滑菜单"
);
}
@Override
public
void
onPanelOpened(View arg0) {
tv_sliding.setText(
"关闭侧滑菜单"
);
}
@Override
public
void
onPanelSlide(View arg0,
float
arg1) {
}
}
public
class
ColorPagerListener
implements
OnPageChangeListener {
@Override
public
void
onPageScrollStateChanged(
int
arg0) {
}
@Override
public
void
onPageScrolled(
int
arg0,
float
arg1,
int
arg2) {
}
@Override
public
void
onPageSelected(
int
position) {
//tv_sliding.setText(colorDescArray[position]);
}
}
private
ArrayList<fragment> mFragments;
public
class
ColorPagerAdapter
extends
FragmentPagerAdapter {
public
ColorPagerAdapter(FragmentManager fm) {
super
(fm);
mFragments =
new
ArrayList<fragment>();
for
(
int
color : colorArray) {
mFragments.add(
new
ColorFragment(color));
}
}
@Override
public
int
getCount() {
return
mFragments.size();
}
@Override
public
Fragment getItem(
int
position) {
return
mFragments.get(position);
}
}
}</fragment></fragment></string></string>
|
下面是页面用到的Fragment代码示例:
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
|
import
android.content.Context;
import
android.os.Bundle;
import
android.support.v4.app.Fragment;
import
android.util.Log;
import
android.view.LayoutInflater;
import
android.view.View;
import
android.view.ViewGroup;
import
android.view.ViewGroup.LayoutParams;
import
android.widget.LinearLayout;
public
class
ColorFragment
extends
Fragment {
private
static
final
String TAG =
"ColorFragment"
;
protected
Context mContext;
private
int
mColor = -
1
;
public
ColorFragment(
int
colorRes) {
mColor = colorRes;
}
@Override
public
View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
mContext = getActivity();
if
(savedInstanceState !=
null
) {
mColor = savedInstanceState.getInt(
"mColor"
);
}
LinearLayout layout =
new
LinearLayout(mContext);
layout.setLayoutParams(
new
LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
layout.setBackgroundColor(mColor);
return
layout;
}
@Override
public
void
onSaveInstanceState(Bundle outState) {
super
.onSaveInstanceState(outState);
if
(mColor != -
1
) {
outState.putInt(
"mColor"
, mColor);
}
}
}
|
DrawerLayout
DrawerLayout也是android-support-v4.jar中新加的抽屉式布局,它的用法更加类似于滑出式菜单的开源框架SlidingMenu,有关SlidingMenu的说明参见《 Android开发笔记(一百零一)滑出式菜单 》。DrawerLayout应该也是Android与时俱进的产物,它比SlidingPaneLayout更强大,不但可以拉出左侧抽屉面板,还可以拉出右侧抽屉面板。左侧面板与右侧面板的区别在于,左侧面板在布局文件中的layout_gravity属性为left,而右侧面板在布局文件中的layout_gravity属性为right。下面是DrawerLayout的几个常用方法说明:
setDrawerShadow : 设置主页面的渐变阴影图形。
addDrawerListener : 添加抽屉面板的拉出监听器。该监听器实现了下面三个方法:
--onDrawerSlide : 抽屉面板在滑动。
--onDrawerOpened : 抽屉面板已打开。
--onDrawerClosed : 抽屉面板已关闭。
--onDrawerStateChanged : 抽屉面板的状态发生变化。
removeDrawerListener : 移除抽屉面板的拉出监听器。
closeDrawers : 关闭所有抽屉面板。
openDrawer : 打开指定抽屉面板。
closeDrawer : 关闭指定抽屉面板。
isDrawerOpen : 判断指定抽屉面板是否打开。
下面是使用DrawerLayout的效果截图:
下面是使用DrawerLayout的布局文件示例:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<linearlayout android:layout_height=
"match_parent"
android:layout_width=
"match_parent"
android:orientation=
"vertical"
>
<linearlayout android:layout_height=
"wrap_content"
android:layout_width=
"match_parent"
android:orientation=
"horizontal"
>
<textview android:gravity=
"center"
android:id=
"@+id/tv_drawer_left"
android:layout_height=
"wrap_content"
android:layout_weight=
"1"
android:layout_width=
"0dp"
android:text=
"打开左边侧滑"
android:textcolor=
"#000000"
android:textsize=
"20sp"
>
<textview android:gravity=
"center"
android:id=
"@+id/tv_drawer_right"
android:layout_height=
"wrap_content"
android:layout_weight=
"1"
android:layout_width=
"0dp"
android:text=
"打开右边侧滑"
android:textcolor=
"#000000"
android:textsize=
"20sp"
>
</textview></textview></linearlayout>
<textview android:gravity=
"top|center"
android:id=
"@+id/tv_drawer_center"
android:layout_height=
"0dp"
android:layout_weight=
"1"
android:layout_width=
"match_parent"
android:paddingtop=
"30dp"
android:text=
"首页"
android:textcolor=
"#000000"
android:textsize=
"20sp"
>
</textview></linearlayout>
<listview android:background=
"#ffdd99"
android:id=
"@+id/lv_drawer_left"
android:layout_gravity=
"left"
android:layout_height=
"match_parent"
android:layout_width=
"150dp"
>
<listview android:background=
"#99ffdd"
android:id=
"@+id/lv_drawer_right"
android:layout_gravity=
"right"
android:layout_height=
"match_parent"
android:layout_width=
"150dp"
>
</listview></listview></android.support.v4.widget.drawerlayout>
|
下面是使用DrawerLayout的页面代码示例:
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
|
import
java.lang.reflect.Field;
import
android.app.Activity;
import
android.os.Bundle;
import
android.support.v4.widget.DrawerLayout;
import
android.support.v4.widget.DrawerLayout.DrawerListener;
import
android.support.v4.widget.ViewDragHelper;
import
android.util.DisplayMetrics;
import
android.view.View;
import
android.view.View.OnClickListener;
import
android.widget.AdapterView;
import
android.widget.ArrayAdapter;
import
android.widget.ListView;
import
android.widget.TextView;
import
android.widget.AdapterView.OnItemClickListener;
public
class
DrawerActivity
extends
Activity
implements
OnClickListener {
private
final
static
String TAG =
"DrawerActivity"
;
private
DrawerLayout dl_layout;
private
TextView tv_drawer_left;
private
TextView tv_drawer_right;
private
TextView tv_drawer_center;
private
ListView lv_drawer_left;
private
ListView lv_drawer_right;
private
String[] titleArray = {
"首页"
,
"新闻"
,
"娱乐"
,
"博客"
,
"论坛"
};
private
String[] settingArray = {
"我的"
,
"设置"
,
"关于"
};
@Override
protected
void
onCreate(Bundle savedInstanceState) {
super
.onCreate(savedInstanceState);
setContentView(R.layout.activity_drawer);
dl_layout = (DrawerLayout) findViewById(R.id.dl_layout);
dl_layout.addDrawerListener(
new
SlidingListener());
//setDrawerLeftEdgeSize(this, dl_layout, 0.3f);
tv_drawer_left = (TextView) findViewById(R.id.tv_drawer_left);
tv_drawer_right = (TextView) findViewById(R.id.tv_drawer_right);
tv_drawer_center = (TextView) findViewById(R.id.tv_drawer_center);
tv_drawer_left.setOnClickListener(
this
);
tv_drawer_right.setOnClickListener(
this
);
lv_drawer_left = (ListView) findViewById(R.id.lv_drawer_left);
ArrayAdapter<string> left_adapter =
new
ArrayAdapter<string>(
this
,
R.layout.list_item, titleArray);
lv_drawer_left.setAdapter(left_adapter);
lv_drawer_left.setOnItemClickListener(
new
LeftListListener());
lv_drawer_right = (ListView) findViewById(R.id.lv_drawer_right);
ArrayAdapter<string> right_adapter =
new
ArrayAdapter<string>(
this
,
R.layout.list_item, settingArray);
lv_drawer_right.setAdapter(right_adapter);
lv_drawer_right.setOnItemClickListener(
new
RightListListener());
}
@Override
public
void
onClick(View v) {
if
(v.getId() == R.id.tv_drawer_left) {
if
(dl_layout.isDrawerOpen(lv_drawer_left)) {
dl_layout.closeDrawer(lv_drawer_left);
}
else
{
dl_layout.openDrawer(lv_drawer_left);
}
}
else
if
(v.getId() == R.id.tv_drawer_right) {
if
(dl_layout.isDrawerOpen(lv_drawer_right)) {
dl_layout.closeDrawer(lv_drawer_right);
}
else
{
dl_layout.openDrawer(lv_drawer_right);
}
}
}
private
class
LeftListListener
implements
OnItemClickListener {
@Override
public
void
onItemClick(AdapterView<!--?--> parent, View view,
int
position,
long
id) {
String text = titleArray[position];
tv_drawer_center.setText(text+text+text+text+text);
dl_layout.closeDrawers();
}
}
private
class
RightListListener
implements
OnItemClickListener {
@Override
public
void
onItemClick(AdapterView<!--?--> parent, View view,
int
position,
long
id) {
String text = settingArray[position];
tv_drawer_center.setText(text+text+text+text+text);
dl_layout.closeDrawers();
}
}
private
class
SlidingListener
implements
DrawerListener {
@Override
public
void
onDrawerSlide(View paramView,
float
paramFloat) {
}
@Override
public
void
onDrawerOpened(View paramView) {
if
(paramView.getId() == R.id.lv_drawer_left) {
tv_drawer_left.setText(
"关闭左边侧滑"
);
}
else
{
tv_drawer_right.setText(
"关闭右边侧滑"
);
}
}
@Override
public
void
onDrawerClosed(View paramView) {
if
(paramView.getId() == R.id.lv_drawer_left) {
tv_drawer_left.setText(
"打开左边侧滑"
);
}
else
{
tv_drawer_right.setText(
"打开右边侧滑"
);
}
}
@Override
public
void
onDrawerStateChanged(
int
paramInt) {
}
}
//设置左边侧滑的边缘大小
private
void
setDrawerLeftEdgeSize(Activity act, DrawerLayout layout,
float
percentage) {
if
(act ==
null
|| layout ==
null
)
return
;
try
{
Field leftDraggerField = layout.getClass().getDeclaredField(
"mLeftDragger"
);
leftDraggerField.setAccessible(
true
);
ViewDragHelper leftDragger = (ViewDragHelper) leftDraggerField.get(layout);
Field edgeSizeField = leftDragger.getClass().getDeclaredField(
"mEdgeSize"
);
edgeSizeField.setAccessible(
true
);
int
edgeSize = edgeSizeField.getInt(leftDragger);
DisplayMetrics dm =
new
DisplayMetrics();
act.getWindowManager().getDefaultDisplay().getMetrics(dm);
edgeSizeField.setInt(leftDragger, Math.max(edgeSize, (
int
) (dm.widthPixels * percentage)));
}
catch
(Exception e) {
e.printStackTrace();
}
}
}</string></string></string></string>
|
SlidingPaneLayout和DrawerLayout的区别
这两个侧滑布局都实现了侧滑菜单效果,当然它们之间也有些使用上的不同,下面是博主总结的几点区别:1、SlidingPaneLayout只能定义一个侧滑面板,而且必须位于左侧;而DrawerLayout可定义两个侧滑面板,一个位于左侧,另一个位于右侧,当然如果你只定义一个侧滑面板也是可以的。
2、SlidingPaneLayout的侧滑面板在滑动时,主页面也跟着往右滑;而DrawerLayout的侧滑面板在滑动时,主页面是不会滑动的,也就是说,侧滑面板会遮盖住主页面的部分UI;
3、SlidingPaneLayout在主页面任何位置水平向右滑动,都会拉出左侧面板;而DrawerLayout只有在主页面左右边缘水平滑动时,才能拉出侧滑面板;
4、拉出侧滑面板时,SlidingPaneLayout主页面的灰色阴影较浅,不容易看到;而DrawerLayout主页面的灰色阴影较深,一下子就能看出来;