SlidingPaneLayout详解

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

推荐阅读更多精彩内容