Android-通過SlidingPaneLayout高仿微信6.2最新版手勢滑動返回(一)

近期更新了微信版本號到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