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

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


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

这里给出demo下载地址github


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


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

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

解决方案:

  • 手势滑动借用了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;
//必须继承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

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

上一篇:微信js sdk分享开发摘记java版


下一篇:打通版微社区(6):部署微信插件及开通QQ云服务