Android-通过SlidingPaneLayout高仿微信6.2最新版手势滑动返回(一)
2015-10-26 14:59
316 查看
最近更新了微信版本到6.2,发现里面有个非常好的体验,就是在第二个页面Activity能手势向右滑动返回,在手势滑动的过程中能看到第一个页面,这种体验非常赞,这里高仿了一下。这里使用的是v4包里面的SlidingPaneLayout来手势滑动,在下一篇博文中将采用SlidingMenu来高仿,下面是SlidingPaneLayout高仿后的效果,效果还是蛮不错的。
最重要的是,每一个页面都是Activity,而非Fragment哦,使用Activity和正常的Activity一样
这里给出demo下载地址github
这里写图片描述
下面讲一下实现的原理,里面有几个难点需要说一下
解决方案:
下面一步一步来讲解实现原理:
首先第一步:因为我们有的页面需要滑动返回,有的页面不需要滑动返回,所以这里抽取了一个父类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 {
}
看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);
把左边菜单设置好全屏幕之后,我们给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是透明的,左侧菜单也是透明的,这样就可以透过左侧菜单看到下面的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 {
}
AndroidManifest.xml声明NextActivity :
最重要的是,每一个页面都是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) { }
}
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94
看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(); } 1 2 3 4 5 6 7 8 9 10 11 12 13 14
把左边菜单设置好全屏幕之后,我们给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); 1 2 3 4 5 6 7 8 9 10 11 12 13 14
随着手势滑动,慢慢的显示出菜单,因为整个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);
}
1 2 3 4 5 6
让菜单打开后结束掉这个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)); }
}
1 2 3 4 5 67
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
AndroidManifest.xml声明NextActivity :
相关文章推荐
- <a>标签在微信iOS版本的解析没有问题,但是在安卓版就解析不出来
- app集成微信支付服务器端开发(java)
- android微信支付
- PHP微信开发---城市天气查询
- params is error 微信朋友圈分享网页内的外链打不开
- Android编程实现微信分享信息的方法
- PHP微信开发--有道翻译
- 在类似qq或者微信聊天中。如何根据不同的手机发送图片
- 微信公众平台开发之用户绑定
- C# 微信企业号--回调模式
- 微信开发之带参二维码的使用
- 019.数组的复制
- Android高仿微信(一)——如何消除启动时的白屏
- 封装一个自适应高度的 textview
- 如何判断微信内置浏览器(JS & PHP
- Android 基于google Zxing实现二维码、条形码扫描,仿微信二维码扫描效果
- 类似微信TablViewCell效果之第三框架SWTableViewCell
- 一上午搞java编码问题,写了一个将批量文件编码转为UTF-8的小程序(有BUG-.-!)
- PHP微信开发---简单的文本自动回复
- 018.比较数组