Android-通过SlidingPaneLayout高仿微信6.2最新版手势滑动返回(一)

最近更新了微信版本到6.2，发现里面有个非常好的体验，就是在第二个页面Activity能手势向右滑动返回，在手势滑动的过程中能看到第一个页面，这种体验非常赞，这里高仿了一下。这里使用的是v4包里面的SlidingPaneLayout来手势滑动，在下一篇博文中将采用SlidingMenu来高仿，下面是SlidingPaneLayout高仿后的效果，效果还是蛮不错的。

最重要的是，每一个页面都是Activity，而非Fragment哦，使用Activity和正常的Activity一样

这里给出demo下载地址github

这里写图片描述

下面讲一下实现的原理，里面有几个难点需要说一下

手势滑动
在滑动过程中看到第一个页面内容

解决方案：

手势滑动借用了v4包里面的SlidingPaneLayout，因为这个SlidingPaneLayout效果和我们要实现的效果非常像，所以就想着通过这个来改造，SlidingPaneLayout帮我们已经处理好了手势事件
在滑动过程中看到下面的Activity页面就非常简单了，只要把我们当前的Activity样式设置成透明就OK了

下面一步一步来讲解实现原理：

首先第一步：因为我们有的页面需要滑动返回，有的页面不需要滑动返回，所以这里抽取了一个父类BaseSwipeBackActivity，在你项目里需要加手势滑动返回的Activity，你只要继承BaseSwipeBackActivity就可以了，不需要的不用继承它。

这里先看一下BaseSwipeBackActivity的源码实现：

package com.hhl.swipebacksample;

import android.os.Bundle;
import android.support.v4.widget.SlidingPaneLayout;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.FrameLayout;

import java.lang.reflect.Field;

/**
* Created by hailonghan on 15/6/9.
*/
public abstract class BaseSwipeBackActivity extends AppCompatActivity implements SlidingPaneLayout.PanelSlideListener {

public final static String TAG = BaseSwipeBackActivity.class.getCanonicalName();

SlidingPaneLayout mSlidingPaneLayout;

FrameLayout mContainerFl;

@Override
protected void onCreate(Bundle savedInstanceState) {

    //TODO 通过反射来改变SlidingPanelayout的值
    try {
        mSlidingPaneLayout = new SlidingPaneLayout(this);
        //属性
        Field f_overHang = SlidingPaneLayout.class.getDeclaredField("mOverhangSize");
        f_overHang.setAccessible(true);
        f_overHang.set(mSlidingPaneLayout, 0);

        mSlidingPaneLayout.setPanelSlideListener(this);
        mSlidingPaneLayout.setSliderFadeColor(getResources().getColor(android.R.color.transparent));
    } catch (Exception e) {
        e.printStackTrace();
    }

    super.onCreate(savedInstanceState);

    //添加两个view
    View leftView = new View(this);
    leftView.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
    mSlidingPaneLayout.addView(leftView, 0);


    mContainerFl = new FrameLayout(this);
    mContainerFl.setBackgroundColor(getResources().getColor(android.R.color.white));
    mContainerFl.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));

    mSlidingPaneLayout.addView(mContainerFl, 1);
}

@Override
public void setContentView(int id) {
    setContentView(getLayoutInflater().inflate(id, null));
}

/* (non-Javadoc)
 * @see android.app.Activity#setContentView(android.view.View)
 */
@Override
public void setContentView(View v) {
    setContentView(v, new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
}

/* (non-Javadoc)
 * @see android.app.Activity#setContentView(android.view.View, android.view.ViewGroup.LayoutParams)
 */
@Override
public void setContentView(View v, ViewGroup.LayoutParams params) {
    super.setContentView(mSlidingPaneLayout, params);

    mContainerFl.removeAllViews();
    mContainerFl.addView(v, params);
}

@Override
public void onPanelClosed(View view) {

}

@Override
public void onPanelOpened(View view) {
    finish();
    this.overridePendingTransition(0, R.anim.slide_out_right);
}

@Override
public void onPanelSlide(View view, float v) {
}

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94

看onCreate方法，这里通过java反射修改了SlidingPaneLayout的属性mOverhangSize的值，因为这个值是个私有属性，默认值是32，这个值的大小是SlidingPaneLayout左菜单离右边屏幕边缘的距离，因为我们要左菜单全屏幕大小，所以要让mOverhangSize为0，这里通过java反射来修改，代码如下：

//TODO 通过反射来改变SlidingPanelayout的值
try {
mSlidingPaneLayout = new SlidingPaneLayout(this);
//mOverhangSize属性，意思就是左菜单离右边屏幕边缘的距离
Field f_overHang = SlidingPaneLayout.class.getDeclaredField(“mOverhangSize”);
f_overHang.setAccessible(true);
//设置左菜单离右边屏幕边缘的距离为0，设置全屏
f_overHang.set(mSlidingPaneLayout, 0);

        mSlidingPaneLayout.setPanelSlideListener(this);
        mSlidingPaneLayout.setSliderFadeColor(getResources().getColor(android.R.color.transparent));
    } catch (Exception e) {
        e.printStackTrace();
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14

把左边菜单设置好全屏幕之后，我们给SlidingPaneLayout加两个子布局，一个是左侧菜单，一个是内容显示容器布局，左侧菜单布局我们要设置成透明的，因为在手势滑动的时候，我们要看到底下的Activity页面，而内容显示布局就不应该是透明的，这里我加了白色北背景，看下面代码：

//添加两个view,这是左侧菜单，因为Activity是透明的，这里就不用设置了
View leftView = new View(this);
//设置全屏
leftView.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
//添加到SlidingPaneLayout中
mSlidingPaneLayout.addView(leftView, 0);

    //内容布局，用来存放Activity布局用的
    mContainerFl = new FrameLayout(this);
 //内容布局不应该是透明，这里加了白色背景   mContainerFl.setBackgroundColor(getResources().getColor(android.R.color.white));
 //全屏幕显示
    mContainerFl.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
    //添加到SlidingPaneLayout中
    mSlidingPaneLayout.addView(mContainerFl, 1);

1
2
3
4
5
6
7
8
9
10
11
12
13
14

随着手势滑动，慢慢的显示出菜单，因为整个Activity是透明的，左侧菜单也是透明的，这样就可以透过左侧菜单看到下面的Activity页面，当左侧菜单完全打开后，我们要结束掉这个Activity，这里监听了SlidingPaneLayout的public void onPanelOpened(View view)方法，这个方法的意思就是菜单打开后执行的操作，我这里重写了这个方法，看代码如下：

@Override
public void onPanelOpened(View view) {
//菜单打开后，我们结束掉这个Activity
finish();
this.overridePendingTransition(0, R.anim.slide_out_right);
}

1
2
3
4
5
6

让菜单打开后结束掉这个Activity，这样就实现了手势滑动返回上一个页面

这样我们的BaseSwipeBackActivity就写好了，那怎么来用呢，这里我们创建一个NextActivity，继承之BaseSwipeBackActivity，其他的和普通的Activity都一样，看源码实现，其实非常简单：

package com.hhl.swipebacksample;

import android.content.Intent;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.widget.RelativeLayout;

import java.util.Random;
//必须继承BaseSwipeBackActivity
public class NextActivity extends BaseSwipeBackActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    //设置布局，和普通Activity一样
    setContentView(R.layout.activity_next);

    RelativeLayout containerRl = (RelativeLayout) findViewById(R.id.container);

    //随机色

    Random random = new Random();
    int red = random.nextInt(255);
    int green = random.nextInt(255);
    int blue = random.nextInt(255);

    containerRl.setBackgroundColor(Color.argb(255,red,green,blue));

}

public void nextPage(View v) {
    startActivity(new Intent(this, NextActivity.class));
}

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

AndroidManifest.xml声明NextActivity ：