SlidingPaneLayout详解
2016-05-26 本文已影响7594人
diygreen
SlidingPaneLayout详解
作者：李旺成
时间：2016年5月25日
简介
SlidingPaneLayout 可能很多人都没用过，但这并不是一个新控件。SlidingPaneLayout 是 Support V4 包中提供的，2013 年 Google I/O 大会期间更新的。
先来看看这个 SlidingPaneLayout 到底是什么？
官方介绍
了解一个控件，一般习惯先看它的继承结构和官方介绍：
SlidingPaneLayout类
继承自 ViewGroup，那说明这是个容器。继续看文档，我们可以了解到：
SlidingPaneLayout 是一个水平的多层的布局控件，左侧或者第一个子视图是它的导航视图，其他的是内容视图。其实，这就是一个左滑菜单的官方实现。
直接看看怎么使用吧！
简单使用
先看效果：
简单使用
上面介绍的时候说了，这就是一个容器，水平的多层的布局控件，那好就往里面放控件就好了，试试：
在布局中使用：activity_simpleuse1.xml
<?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/spl_root"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".simple.SimpleUse2Activity">
<TextView
android:id="@+id/tv_left"
android:layout_width="120dp"
android:layout_height="match_parent"
android:text="左侧菜单"
android:textSize="22sp"
android:background="#ff0000"/>
<TextView
android:id="@+id/tv_right"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="这是内容"
android:textSize="24sp"
android:background="@color/colorPrimaryDark"/>
</android.support.v4.widget.SlidingPaneLayout>
好了，直接运行起来，对，就是上面动图的效果。
结合 Fragment
一般做侧滑菜单都会使用 Fragment 来解耦菜单和详情页面，当然 SlidingPaneLayout 也支持这样使用。
结合Fragment使用
在布局中使用：activity_simpleuse2.xml
<?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/spl_root"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".simple.SimpleUse2Activity">
<fragment
android:id="@+id/fragment_leftmenu"
android:name="com.diygreen.slidingpanelayoutdemo.simple.LeftMenuFragment"
android:layout_width="100dp"
android:layout_height="match_parent"
android:layout_gravity="left"/>
<fragment
android:id="@+id/fragment_rightcontent"
android:name="com.diygreen.slidingpanelayoutdemo.simple.RightContentFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_gravity="right"/>
</android.support.v4.widget.SlidingPaneLayout>
在 Java 代码中使用：SimpleUse2Activity.java
public class SimpleUse2Activity extends AppCompatActivity implements
LeftMenuFragment.BookMarkListener, SlidingPaneLayout.PanelSlideListener {
private SlidingPaneLayout mRootSPL;
private LeftMenuFragment mLeftFragment;
private RightContentFragment mRightFragment;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_simpleuse2);
initView();
initListener();
}
private void initView() {
mRootSPL = (SlidingPaneLayout) findViewById(R.id.spl_root);
mLeftFragment = (LeftMenuFragment) getFragmentManager().findFragmentById(R.id.fragment_leftmenu);
mRightFragment = (RightContentFragment) getFragmentManager().findFragmentById(R.id.fragment_rightcontent);
}
private void initListener() {
mRootSPL.setPanelSlideListener(this);
mLeftFragment.setListener(this);
}
@Override
public void onChangeBookMark(String bookMark) {
mRightFragment.setContent(bookMark);
}
@Override
public void onPanelSlide(View panel, float slideOffset) {
}
@Override
public void onPanelOpened(View panel) {
mLeftFragment.setHasOptionsMenu(true);
}
@Override
public void onPanelClosed(View panel) {
mLeftFragment.setHasOptionsMenu(false);
}
}
在这个 Activity 里面使用的两个 Fragment 很简单了，这里就不贴代码了，有兴趣的去源码里面看吧！
滑动关闭 Activity
上面用了两个小实例介绍了 SlidingPaneLayout 的简单使用，下面看看进阶的用法。
iOS 7 提供了一个比较人性化的体验：手势滑动返回。Android 并不没有原生支持该功能，但是，当时刚出先这个效果的时候，就有大牛开源了一个库用于在 Android 上滑动返回。这里我们可以不借助这个开源库，利用 SlidingPaneLayout 就可以实现这个效果。
先看效果：
滑动关闭Activity
思路分析
说明，这不是我想出来的，我只是在这里做一个简单的介绍。
1、效果分析
我们分析一下滑动关闭的效果：就是随着手势右移，当前 Activity 的窗口整个向右移动，而其左侧滑出的区域可以看到下面的 Activity。
2、关于左滑菜单
有没有感觉这和一些左滑菜单很像，只是它的左侧“菜单”是透明的，而且可以覆盖整个屏幕。
3、实现思路
那好，可以这样，用一个透明的全屏布局作为左侧菜单，这样就可以看到当前 Activity 下面的 Activity了；然后，当菜单全部打开的时候关闭当前 Activity，这样就可以实现左滑关闭的效果了。
编码实现
1、实现透明 Activity
为什么要用透明 Activity？不知道的可以参考一下这篇文章：Hacks控件篇-Hack7 移除背景以提升Activity启动速度。
先定义透明 Activity 的样式：
<style name="DIY.SlideClose.Transparent.Theme" parent="AppTheme">
<item name="android:windowBackground">@android:color/transparent</item>
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowAnimationStyle">@style/DIY.Animation.SlidingBack</item>
<item name="android:actionBarStyle">@style/DIYActionBar.Custom</item>
</style>
<style name="DIYActionBar.Custom" parent="@style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<item name="displayOptions">showCustom</item>
<item name="android:background">@android:color/transparent</item>
<item name="background">@android:color/transparent</item>
<item name="android:displayOptions" tools:ignore="NewApi">showCustom</item>
<item name="android:height">?actionBarSize</item>
</style>
<style name="DIY.Animation.SlidingBack" parent="@android:style/Animation.Activity">
<item name="android:activityOpenEnterAnimation">@anim/slide_in_right</item>
<item name="android:activityOpenExitAnimation">@anim/slide_out_right</item>
<item name="android:activityCloseEnterAnimation">@anim/slide_in_right</item>
<item name="android:activityCloseExitAnimation">@anim/slide_out_right</item>
<item name="android:wallpaperOpenEnterAnimation">@anim/slide_in_right</item>
<item name="android:wallpaperOpenExitAnimation">@anim/slide_out_right</item>
<item name="android:wallpaperCloseEnterAnimation">@anim/slide_in_right</item>
<item name="android:wallpaperCloseExitAnimation">@anim/slide_out_right</item>
<item name="android:wallpaperIntraOpenEnterAnimation">@anim/slide_in_right</item>
<item name="android:wallpaperIntraOpenExitAnimation">@anim/slide_out_right</item>
<item name="android:wallpaperIntraCloseEnterAnimation">@anim/slide_in_right</item>
<item name="android:wallpaperIntraCloseExitAnimation">@anim/slide_out_right</item>
</style>
然后，使用样式：
<activity
android:name=".slideclose.NextActivity"
android:label="NextActivity"
android:theme="@style/DIY.SlideClose.Transparent.Theme" />
2、实现可以滑动删除的基类 Activity
public class BaseSlideCloseActivity extends AppCompatActivity implements
SlidingPaneLayout.PanelSlideListener {
@Override
protected void onCreate(Bundle savedInstanceState) {
initSlideBackClose();
super.onCreate(savedInstanceState);
}
private void initSlideBackClose() {
if (isSupportSwipeBack()) {
SlidingPaneLayout slidingPaneLayout = new SlidingPaneLayout(this);
// 通过反射改变mOverhangSize的值为0，
// 这个mOverhangSize值为菜单到右边屏幕的最短距离，
// 默认是32dp，现在给它改成0
try {
Field overhangSize = SlidingPaneLayout.class.getDeclaredField("mOverhangSize");
overhangSize.setAccessible(true);
overhangSize.set(slidingPaneLayout, 0);
} catch (Exception e) {
e.printStackTrace();
}
slidingPaneLayout.setPanelSlideListener(this);
slidingPaneLayout.setSliderFadeColor(getResources()
.getColor(android.R.color.transparent));
// 左侧的透明视图
View leftView = new View(this);
leftView.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
slidingPaneLayout.addView(leftView, 0);
ViewGroup decorView = (ViewGroup) getWindow().getDecorView();
// 右侧的内容视图
ViewGroup decorChild = (ViewGroup) decorView.getChildAt(0);
decorChild.setBackgroundColor(getResources()
.getColor(android.R.color.white));
decorView.removeView(decorChild);
decorView.addView(slidingPaneLayout);
// 为 SlidingPaneLayout 添加内容视图
slidingPaneLayout.addView(decorChild, 1);
}
}
protected boolean isSupportSwipeBack() {
return true;
}
@Override
public void onPanelSlide(View panel, float slideOffset) {
}
@Override
public void onPanelOpened(View panel) {
finish();
}
@Override
public void onPanelClosed(View panel) {
}
}
关键代码都有注释，直接看注释吧。
3、使用可滑动删除的基类 Activity
就和定义普通的 Activity 一样，这是需要继承上面的基类，并且在清单文件中使用透明样式：
public class NextActivity extends BaseSlideCloseActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_next);
}
}
小结
好了，对 SlidingPaneLayout 的介绍就到这里了，SlidingPaneLayout 的使用还是很简单的，但是利用好了可以实现一些看上去可能比较难实现的效果。
项目地址
参考
Android-通过SlidingPaneLayout高仿微信6.2最新版手势滑动返回(一)
SlidingPaneLayout的基本使用
Android UI开发第三十四篇——SlidingPaneLayout
