最近更新了微信版本到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) { }}看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都一样，看源码实现，其实非常简单：
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;//必须继承BaseSwipeBackActivitypublic 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
- 1楼xiaowantong19915小时前
- 不错的demo，顶一个