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

最新文章

  1. 四核驱动的三维导航—淘宝新UI（设计篇）
  2. 在Windows下使用Git
  3. 【原】jQuery与CSS自动生成验证码
  4. php DI实现实例：
  5. Jenkins xcodebuild There are no schemes in workspace
  6. UITextField 基本属性使用
  7. 紧挨导航栏下的链接a标签失效
  8. Microsoft JET Database Engine (0x80004005)
  9. oracle检查点checkpoint信息
  10. 转：Oracle EBS 寄售业务总结
  11. linux动态库加载的秘密
  12. sql server 字符串替换函数REPLACE
  13. .net core 部署在iis上
  14. keras &amp; tensorflow 列出可用GPU 和 切换CPU &amp; GPU
  15. day05（数字类型，字符串类型，列表类型）
  16. Django 2.0.4 微博第三方登录
  17. Linker errors in Android NDK (undefined reference to `__cxa_end_cleanup')
  18. shell监控自动备份是否成功(判断文件是否存在)
  19. HDU - 2043密码 水题
  20. CSS| 學習心得

热门文章

  1. JsTree中节点添加CheckBox 以及 单选的实现
  2. SpringBoot基于websocket的网页聊天
  3. 用Docker实现nginx多端口
  4. EXP-00083: 调用 EXFSYS.DBMS_EXPFIL_DEPASEXP.schema_info_exp 时出现前一问题
  5. mysql insert一条记录后 返回创建记录主键id的方法
  6. git帮助网址
  7. 网络基础——OSI参考模型
  8. sql学习笔记：表的运算
  9. PAT 1135 Is It A Red-Black Tree
  10. SSM+Shiro