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 的使用还是很简单的，但是利用好了可以实现一些看上去可能比较难实现的效果。

项目地址

SlidingPaneLayoutDemo

参考

Android-通过SlidingPaneLayout高仿微信6.2最新版手势滑动返回(一)
SlidingPaneLayout的基本使用
Android UI开发第三十四篇——SlidingPaneLayout