SlidingPaneLayout和DrawerLayout的区别

来源：互联网发布：linux enca 编辑：程序博客网时间：2024/06/08 09:51

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
importjava.util.ArrayList;
 
importcom.example.exmdrawer.fragment.ColorFragment;
 
importandroid.graphics.Color;
importandroid.os.Bundle;
importandroid.support.v4.app.Fragment;
importandroid.support.v4.app.FragmentActivity;
importandroid.support.v4.app.FragmentManager;
importandroid.support.v4.app.FragmentPagerAdapter;
importandroid.support.v4.view.ViewPager;
importandroid.support.v4.view.ViewPager.OnPageChangeListener;
importandroid.support.v4.widget.SlidingPaneLayout;
importandroid.support.v4.widget.SlidingPaneLayout.PanelSlideListener;
importandroid.util.Log;
importandroid.view.View;
importandroid.view.View.OnClickListener;
importandroid.widget.AdapterView;
importandroid.widget.AdapterView.OnItemClickListener;
importandroid.widget.ArrayAdapter;
importandroid.widget.ListView;
importandroid.widget.TextView;
 
publicclass SlidingActivity extendsFragmentActivity implements
        OnClickListener, OnItemClickListener {
 
    privatefinal static String TAG = "SlidingActivity";
    privateSlidingPaneLayout sp_layout;
    privateListView lv_sliding;
    privateViewPager vp_sliding;
    privateTextView tv_sliding;
    privateString[] colorDescArray = {"红色","绿色","蓝色","白色","黑色"};
    privateint[] colorArray = {Color.RED, Color.GREEN, Color.BLUE, Color.WHITE, Color.BLACK};
    privateColorPagerAdapter vp_adapter;
 
    @Override
    protectedvoid 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(newSlidingPanelListener());
        ArrayAdapter<string> lv_adapter = newArrayAdapter<string>(this,
                R.layout.list_item, colorDescArray);
        lv_sliding.setAdapter(lv_adapter);
        lv_sliding.setOnItemClickListener(this);
        vp_adapter = newColorPagerAdapter(getSupportFragmentManager());
        vp_sliding.setAdapter(vp_adapter);
        vp_sliding.addOnPageChangeListener(newColorPagerListener());
    }
 
    @Override
    publicvoid onClick(View v) {
        if(v.getId() == R.id.tv_sliding) {
            if(sp_layout.isOpen()) {
                sp_layout.closePane();
            }else{
                sp_layout.openPane();
            }
        }
    }
     
    @Override
    publicvoid onItemClick(AdapterView<!--?--> parent, View view, intposition, longid) {
        vp_sliding.setCurrentItem(position);
        sp_layout.closePane();
    }
 
    publicclass SlidingPanelListener implementsPanelSlideListener {
        @Override
        publicvoid onPanelClosed(View arg0) {
            tv_sliding.setText("打开侧滑菜单");
        }
 
        @Override
        publicvoid onPanelOpened(View arg0) {
            tv_sliding.setText("关闭侧滑菜单");
        }
 
        @Override
        publicvoid onPanelSlide(View arg0, floatarg1) {
        }
    }
 
    publicclass ColorPagerListener implementsOnPageChangeListener {
        @Override
        publicvoid onPageScrollStateChanged(intarg0) {
        }
 
        @Override
        publicvoid onPageScrolled(intarg0, floatarg1, intarg2) {
        }
 
        @Override
        publicvoid onPageSelected(intposition) {
            //tv_sliding.setText(colorDescArray[position]);
        }
    }
 
    privateArrayList<fragment> mFragments;
    publicclass ColorPagerAdapter extendsFragmentPagerAdapter {
         
        publicColorPagerAdapter(FragmentManager fm) {
            super(fm);
            mFragments = newArrayList<fragment>();
            for(intcolor : colorArray) {
                mFragments.add(newColorFragment(color));
            }
        }
 
        @Override
        publicint getCount() {
            returnmFragments.size();
        }
 
        @Override
        publicFragment getItem(intposition) {
            returnmFragments.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
importandroid.content.Context;
importandroid.os.Bundle;
importandroid.support.v4.app.Fragment;
importandroid.util.Log;
importandroid.view.LayoutInflater;
importandroid.view.View;
importandroid.view.ViewGroup;
importandroid.view.ViewGroup.LayoutParams;
importandroid.widget.LinearLayout;
 
publicclass ColorFragment extendsFragment {
 
    privatestatic final String TAG = "ColorFragment";
    protectedContext mContext;
 
    privateint mColor = -1;
    publicColorFragment(intcolorRes) {
        mColor = colorRes;
    }
 
    @Override
    publicView onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        mContext = getActivity();
        if(savedInstanceState != null) {
            mColor = savedInstanceState.getInt("mColor");
        }
        LinearLayout layout = newLinearLayout(mContext);
        layout.setLayoutParams(newLayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
        layout.setBackgroundColor(mColor);
        returnlayout;
    }
 
    @Override
    publicvoid 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
importjava.lang.reflect.Field;
 
importandroid.app.Activity;
importandroid.os.Bundle;
importandroid.support.v4.widget.DrawerLayout;
importandroid.support.v4.widget.DrawerLayout.DrawerListener;
importandroid.support.v4.widget.ViewDragHelper;
importandroid.util.DisplayMetrics;
importandroid.view.View;
importandroid.view.View.OnClickListener;
importandroid.widget.AdapterView;
importandroid.widget.ArrayAdapter;
importandroid.widget.ListView;
importandroid.widget.TextView;
importandroid.widget.AdapterView.OnItemClickListener;
 
publicclass DrawerActivity extendsActivity implementsOnClickListener {
 
    privatefinal static String TAG = "DrawerActivity";
    privateDrawerLayout dl_layout;
    privateTextView tv_drawer_left;
    privateTextView tv_drawer_right;
    privateTextView tv_drawer_center;
    privateListView lv_drawer_left;
    privateListView lv_drawer_right;
    privateString[] titleArray = {"首页","新闻","娱乐","博客","论坛"};
    privateString[] settingArray = {"我的","设置","关于"};
     
    @Override
    protectedvoid onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_drawer);
        dl_layout = (DrawerLayout) findViewById(R.id.dl_layout);
        dl_layout.addDrawerListener(newSlidingListener());
        //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 = newArrayAdapter<string>(this,
                R.layout.list_item, titleArray);
        lv_drawer_left.setAdapter(left_adapter);
        lv_drawer_left.setOnItemClickListener(newLeftListListener());
 
        lv_drawer_right = (ListView) findViewById(R.id.lv_drawer_right);
        ArrayAdapter<string> right_adapter = newArrayAdapter<string>(this,
                R.layout.list_item, settingArray);
        lv_drawer_right.setAdapter(right_adapter);
        lv_drawer_right.setOnItemClickListener(newRightListListener());
    }
 
    @Override
    publicvoid 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);
            }
        }elseif (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);
            }
        }
    }
 
    privateclass LeftListListener implementsOnItemClickListener {
        @Override
        publicvoid onItemClick(AdapterView<!--?--> parent, View view, intposition, longid) {
            String text = titleArray[position];
            tv_drawer_center.setText(text+text+text+text+text);
            dl_layout.closeDrawers();
        }
    }
 
    privateclass RightListListener implementsOnItemClickListener {
        @Override
        publicvoid onItemClick(AdapterView<!--?--> parent, View view, intposition, longid) {
            String text = settingArray[position];
            tv_drawer_center.setText(text+text+text+text+text);
            dl_layout.closeDrawers();
        }
    }
     
    privateclass SlidingListener implementsDrawerListener {
        @Override
        publicvoid onDrawerSlide(View paramView, floatparamFloat) {
        }
 
        @Override
        publicvoid onDrawerOpened(View paramView) {
            if(paramView.getId() == R.id.lv_drawer_left) {
                tv_drawer_left.setText("关闭左边侧滑");
            }else{
                tv_drawer_right.setText("关闭右边侧滑");
            }
        }
 
        @Override
        publicvoid onDrawerClosed(View paramView) {
            if(paramView.getId() == R.id.lv_drawer_left) {
                tv_drawer_left.setText("打开左边侧滑");
            }else{
                tv_drawer_right.setText("打开右边侧滑");
            }
        }
 
        @Override
        publicvoid onDrawerStateChanged(intparamInt) {
        }
    }
     
    //设置左边侧滑的边缘大小
    privatevoid setDrawerLeftEdgeSize(Activity act, DrawerLayout layout, floatpercentage) {
        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);
            intedgeSize = edgeSizeField.getInt(leftDragger);
            DisplayMetrics dm = newDisplayMetrics();
            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主页面的灰色阴影较深，一下子就能看出来；

0 0