SlidingPaneLayout详解

SlidingPaneLayout详解_第1张图片
SlidingPaneLayout详解

作者:李旺成

时间:2016年5月25日


简介

SlidingPaneLayout 可能很多人都没用过,但这并不是一个新控件。SlidingPaneLayout 是 Support V4 包中提供的,2013 年 Google I/O 大会期间更新的。

先来看看这个 SlidingPaneLayout 到底是什么?

官方介绍

了解一个控件,一般习惯先看它的继承结构和官方介绍:

SlidingPaneLayout详解_第2张图片
SlidingPaneLayout类

继承自 ViewGroup,那说明这是个容器。继续看文档,我们可以了解到:
SlidingPaneLayout 是一个水平的多层的布局控件,左侧或者第一个子视图是它的导航视图,其他的是内容视图。其实,这就是一个左滑菜单的官方实现。

直接看看怎么使用吧!

简单使用

先看效果:

SlidingPaneLayout详解_第3张图片
简单使用

上面介绍的时候说了,这就是一个容器,水平的多层的布局控件,那好就往里面放控件就好了,试试:

在布局中使用:activity_simpleuse1.xml



    
    

好了,直接运行起来,对,就是上面动图的效果。

结合 Fragment

一般做侧滑菜单都会使用 Fragment 来解耦菜单和详情页面,当然 SlidingPaneLayout 也支持这样使用。

SlidingPaneLayout详解_第4张图片
结合Fragment使用

在布局中使用:activity_simpleuse2.xml



    
    

在 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 的样式:






然后,使用样式:


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

你可能感兴趣的:(SlidingPaneLayout详解)