近期更新了微信版本号到6.2。发现里面有个很好的体验，就是在第二个页面Activity能手势向右滑动返回，在手势滑动的过程中能看到第一个页面，这样的体验很赞，这里高仿了一下。
这里使用的是v4包里面的SlidingPaneLayout来手势滑动。在下一篇博文中将採用SlidingMenu来高仿，以下是SlidingPaneLayout高仿后的效果。效果还是蛮不错的。
最重要的是，每个页面都是Activity，而非Fragment哦，使用Activity和正常的Activity一样
这里给出demo下载地址github
以下讲一下实现的原理，里面有几个难点须要说一下
- 手势滑动
- 在滑动过程中看到第一个页面内容
解决方式：
- 手势滑动借用了v4包里面的SlidingPaneLayout，由于这个SlidingPaneLayout效果和我们要实现的效果很像，所以就想着通过这个来改造，SlidingPaneLayout帮我们已经处理好了手势事件
- 在滑动过程中看到以下的Activity页面就很easy了，仅仅要把我们当前的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) {
}
}
看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();
}把左边菜单设置好全屏幕之后，我们给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);随着手势滑动，慢慢的显示出菜单。由于整个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);
}让菜单打开后结束掉这个Activity，这样就实现了手势滑动返回上一个页面
这样我们的BaseSwipeBackActivity就写好了，那怎么来用呢。这里我们创建一个NextActivity。继承之BaseSwipeBackActivity，其它的和普通的Activity都一样，看源代码实现。事实上很easy：
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));
}
}
AndroidManifest.xml声明NextActivity ：
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.hhl.swipebacksample">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme">
<activity
android:name=".MainActivity"
android:label="@string/app_name">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity
android:name=".NextActivity"
android:label="@string/title_activity_next"
android:theme="@style/JK.SwipeBack.Transparent.Theme"></activity>
</application>
</manifest>
这里加入了一个主题样式@style/JK.SwipeBack.Transparent.Theme，这里要把这个Activity设置成透明样式。这样才干透过这个Activity看到以下的Activity。@style/JK.SwipeBack.Transparent.Theme源代码例如以下：
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
</style>
<style name="JK.SwipeBack.Transparent.Theme" parent="AppTheme">
<item name="android:windowBackground">@android:color/transparent</item>
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowAnimationStyle">@style/JK.Animation.SlidingBack</item>
<item name="android:actionBarStyle">@style/JKActionBar.Custom</item>
</style>
<style name="JKActionBar.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="JK.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>
</resources>
sliding_in_right.xml源代码例如以下：
<?xml version="1.0" encoding="utf-8"?
>
<set
xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false"
android:zAdjustment="top">
<translate
android:duration="200"
android:fromXDelta="100.0%p"
android:toXDelta="0.0" />
</set>sliding_out_right.xml源代码例如以下：
<?xml version="1.0" encoding="utf-8"?>
<set
xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false"
android:zAdjustment="top">
<translate
android:duration="200"
android:fromXDelta="0.0"
android:toXDelta="100.0%p" />
</set>这样我们的手势滑动返回Activity就大功告成了，这里给出demo的下载地址github