SlidingPaneLayout詳解

作者：李旺成

時間：2016年5月25日

簡介

SlidingPaneLayout 可能很多人都沒用過，但這并不是一個新控件。SlidingPaneLayout 是 Support V4 包中提供的，2013 年 Google I/O 大會期間更新的。

先來看看這個 SlidingPaneLayout 到底是什么？

官方介紹

了解一個控件，一般習(xí)慣先看它的繼承結(jié)構(gòu)和官方介紹：

SlidingPaneLayout類

繼承自 ViewGroup，那說明這是個容器。繼續(xù)看文檔，我們可以了解到：
SlidingPaneLayout 是一個水平的多層的布局控件，左側(cè)或者第一個子視圖是它的導(dǎo)航視圖，其他的是內(nèi)容視圖。其實，這就是一個左滑菜單的官方實現(xiàn)。

直接看看怎么使用吧！

簡單使用

先看效果：

簡單使用

上面介紹的時候說了，這就是一個容器，水平的多層的布局控件，那好就往里面放控件就好了，試試：

在布局中使用：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="左側(cè)菜單"
        android:textSize="22sp"
        android:background="#ff0000"/>
    <TextView
        android:id="@+id/tv_right"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="這是內(nèi)容"
        android:textSize="24sp"
        android:background="@color/colorPrimaryDark"/>
</android.support.v4.widget.SlidingPaneLayout>

好了，直接運行起來，對，就是上面動圖的效果。

結(jié)合 Fragment

一般做側(cè)滑菜單都會使用 Fragment 來解耦菜單和詳情頁面，當(dāng)然 SlidingPaneLayout 也支持這樣使用。

結(jié)合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 很簡單了，這里就不貼代碼了，有興趣的去源碼里面看吧！

滑動關(guān)閉 Activity

上面用了兩個小實例介紹了 SlidingPaneLayout 的簡單使用，下面看看進階的用法。

iOS 7 提供了一個比較人性化的體驗：手勢滑動返回。Android 并不沒有原生支持該功能，但是，當(dāng)時剛出先這個效果的時候，就有大牛開源了一個庫用于在 Android 上滑動返回。這里我們可以不借助這個開源庫，利用 SlidingPaneLayout 就可以實現(xiàn)這個效果。

先看效果：

滑動關(guān)閉Activity

思路分析

說明，這不是我想出來的，我只是在這里做一個簡單的介紹。

1、效果分析
我們分析一下滑動關(guān)閉的效果：就是隨著手勢右移，當(dāng)前 Activity 的窗口整個向右移動，而其左側(cè)滑出的區(qū)域可以看到下面的 Activity。

2、關(guān)于左滑菜單
有沒有感覺這和一些左滑菜單很像，只是它的左側(cè)“菜單”是透明的，而且可以覆蓋整個屏幕。

3、實現(xiàn)思路
那好，可以這樣，用一個透明的全屏布局作為左側(cè)菜單，這樣就可以看到當(dāng)前 Activity 下面的 Activity了；然后，當(dāng)菜單全部打開的時候關(guān)閉當(dāng)前 Activity，這樣就可以實現(xiàn)左滑關(guān)閉的效果了。

編碼實現(xiàn)

1、實現(xiàn)透明 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、實現(xiàn)可以滑動刪除的基類 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，現(xiàn)在給它改成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));

            // 左側(cè)的透明視圖
            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();


            // 右側(cè)的內(nèi)容視圖
            ViewGroup decorChild = (ViewGroup) decorView.getChildAt(0);
            decorChild.setBackgroundColor(getResources()
                    .getColor(android.R.color.white));
            decorView.removeView(decorChild);
            decorView.addView(slidingPaneLayout);

            // 為 SlidingPaneLayout 添加內(nèi)容視圖
            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) {

    }
}

關(guān)鍵代碼都有注釋，直接看注釋吧。

3、使用可滑動刪除的基類 Activity
就和定義普通的 Activity 一樣，這是需要繼承上面的基類，并且在清單文件中使用透明樣式：

public class NextActivity extends BaseSlideCloseActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_next);
    }
}

小結(jié)

好了，對 SlidingPaneLayout 的介紹就到這里了，SlidingPaneLayout 的使用還是很簡單的，但是利用好了可以實現(xiàn)一些看上去可能比較難實現(xiàn)的效果。

項目地址

SlidingPaneLayoutDemo

參考

Android-通過SlidingPaneLayout高仿微信6.2最新版手勢滑動返回(一)
SlidingPaneLayout的基本使用
Android UI開發(fā)第三十四篇——SlidingPaneLayout