Android开发笔记（一百二十）两种侧滑布局
SlidingPaneLayout
SlidingPaneLayout是Android在android-support-v4.jar中推出的一个可滑动面板的布局，在前面《 Android开发笔记（一百零一）滑出式菜单》中，我们提到水平布局时的LinearLayout无法自动左右拉伸，必须借助于手势事件才能拉出左侧隐藏的布局，现在SlidingPaneLayout便是为了解决LinearLayout无法自动拉伸的缺陷。只要我们在布局文件的SlidingPaneLayout节点下定义两个子布局，那么页面默认会把第一个子布局作为左侧隐藏面板，一旦用户的手势从左向右滑动，左侧面板就被拉了出来。SlidingPaneLayout的使用挺简单的，下面是它的几个常用方法：
setSliderFadeColor : 设置主页面的阴影渐变色。即拉出左侧面板时，右边主页面的渐变阴影色，主页面变得越小则阴影色救越浓。阴影色默认为灰色。
setCoveredFadeColor : 设置左侧面板缩进去时的阴影渐变色。
setPanelSlideListener : 设置左侧面板的拉出监听器。该监听器实现了下面三个方法：
--onPanelClosed : 左侧面板已关闭。
--onPanelOpened : 左侧面板已打开。
--onPanelSlide : 左侧面板在滑动。
openPane : 打开左侧面板。
closePane : 关闭左侧面板。
isOpen : 判断左侧面板是否打开。
下面是使用SlidingPaneLayout的效果截图：
下面是使用SlidingPaneLayout的布局文件示例：
<?xml version="1.0" encoding="UTF-8"?>
<android.support.v4.widget.SlidingPaneLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/sp_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ListView
android:id="@+id/lv_sliding"
android:layout_width="150dp"
android:layout_height="match_parent" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="@+id/tv_sliding"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffffdd"
android:paddingLeft="100dp"
android:text="打开侧滑菜单"
android:textColor="#000000"
android:textSize="20sp" />
<android.support.v4.view.ViewPager
android:id="@+id/vp_sliding"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
</android.support.v4.widget.SlidingPaneLayout>
下面是使用SlidingPaneLayout的页面代码示例：
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代码示例：
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的布局文件示例：
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/dl_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="@+id/tv_drawer_left"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="打开左边侧滑"
android:textColor="#000000"
android:textSize="20sp" />
<TextView
android:id="@+id/tv_drawer_right"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="打开右边侧滑"
android:textColor="#000000"
android:textSize="20sp" />
</LinearLayout>
<TextView
android:id="@+id/tv_drawer_center"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="top|center"
android:paddingTop="30dp"
android:text="首页"
android:textColor="#000000"
android:textSize="20sp" />
</LinearLayout>
<ListView
android:id="@+id/lv_drawer_left"
android:layout_width="150dp"
android:layout_height="match_parent"
android:layout_gravity="left"
android:background="#ffdd99" />
<ListView
android:id="@+id/lv_drawer_right"
android:layout_width="150dp"
android:layout_height="match_parent"
android:layout_gravity="right"
android:background="#99ffdd" />
</android.support.v4.widget.DrawerLayout>
下面是使用DrawerLayout的页面代码示例：
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();
}
}
}
SlidingPaneLayout和DrawerLayout的区别
这两个侧滑布局都实现了侧滑菜单效果，当然它们之间也有些使用上的不同，下面是博主总结的几点区别：1、SlidingPaneLayout只能定义一个侧滑面板，而且必须位于左侧；而DrawerLayout可定义两个侧滑面板，一个位于左侧，另一个位于右侧，当然如果你只定义一个侧滑面板也是可以的。
2、SlidingPaneLayout的侧滑面板在滑动时，主页面也跟着往右滑；而DrawerLayout的侧滑面板在滑动时，主页面是不会滑动的，也就是说，侧滑面板会遮盖住主页面的部分UI；
3、SlidingPaneLayout在主页面任何位置水平向右滑动，都会拉出左侧面板；而DrawerLayout只有在主页面左右边缘水平滑动时，才能拉出侧滑面板；
4、拉出侧滑面板时，SlidingPaneLayout主页面的灰色阴影较浅，不容易看到；而DrawerLayout主页面的灰色阴影较深，一下子就能看出来；
点击下载本文用到的两种侧滑布局的工程代码
点此查看Android开发笔记的完整目录