android 右滑返回的示例代码

2024-04-09 18:17:47

类似于微信的右滑返回，在BaseActivity里利用dispatchTouchEvent（）拦截右滑动作，利用setTranslationX（）实现动画，在DecorView里添加View作为滑动时的左侧阴影。

渐进步骤：

设置activity背景透明
重写finish（）等方法设置activity的跳转动画
重写dispatchTouchEvent（）拦截所需要右滑动作
重写onTouchEvent（）给根布局设置偏移量
添加滑动时上层activity的左侧阴影
滑动时关联下层activity滑动

注意：步骤中的代码为了不关联到后面的步骤，会与最终的有点不同

背景透明

  <item name="android:windowBackground">@android:color/transparent</item>
  <item name="android:windowIsTranslucent">true</item>

activity的跳转动画

根据项目需要，重写用到的startActivity(Intent intent)，startActivityForResult(Intent intent, int requestCode)，finish()等activity跳转和销毁方法

@Override
public void startActivity(Intent intent) {
  super.startActivity(intent);
  overridePendingTransition(R.anim.slide_right_in, 0);
}

@Override
public void startActivityForResult(Intent intent, int requestCode) {
  super.startActivityForResult(intent, requestCode);
  overridePendingTransition(R.anim.slide_right_in, 0);
}

@Override
public void finish() {
  super.finish();
  overridePendingTransition(0, R.anim.slide_right_out);
}

//R.anim.slide_right_in
<set xmlns:android="http://schemas.android.com/apk/res/android">
 <translate
   android:duration="300"
   android:fromXDelta="100%"
   android:toXDelta="0"
   android:fromYDelta="0"
   android:toYDelta="0"/>
</set>

//R.anim.slide_right_out
<set xmlns:android="http://schemas.android.com/apk/res/android">
 <translate
   android:duration="300"
   android:fromXDelta="0"
   android:toXDelta="100%"
   android:fromYDelta="0"
   android:toYDelta="0" />
</set>

拦截右滑动作

所有的触摸事件通过activity.dispatchTouchEvent(MotionEvent ev)向view分发。
手指在X轴方向右滑动50~100px时，判断是否为（产品经理要）右滑动作

手指落点为全屏幕，X方向滑动距离要比Y方向的大一些；
手指落点为左侧边，X方向滑动距离有一些就行

private float downX = 0;
private float downY = 0;
private boolean shouldIntercept = false;
private boolean hadJudge = false;

@Override
public boolean dispatchTouchEvent(MotionEvent ev) {
  if (shouldIntercept) {
    return onTouchEvent(ev);
  }
  switch (ev.getAction()) {
    case MotionEvent.ACTION_DOWN: {
      downX = ev.getRawX();
      downY = ev.getRawY();
      hadJudge = false;
      break;
    }
    case MotionEvent.ACTION_MOVE: {
      if (hadJudge) break;
      if (ev.getRawX() == downX) break;
      if (ev.getRawX() < downX) {
        //左滑
        hadJudge = true;
        break;
      }
      if (ev.getRawX() - downX >=100){
        //超出判断距离
        hadJudge = true;
        break;
      }
      if (ev.getRawX() - downX > 50) {
        //x轴右滑50~100px
        float rate = (ev.getRawX() - downX) / (Math.abs(ev.getRawY() - downY));
        if ((downX < 50 && rate > 0.5f) || rate > 2) {
          shouldIntercept = true;
        }
      }
      break;
    }
    case MotionEvent.ACTION_UP: {
      downX =0;
      downY = 0;
      shouldIntercept = false;
      hadJudge=false;
      break;
    }
  }
  //Activity的默认分发
  if (ev.getAction() == MotionEvent.ACTION_DOWN) {
    onUserInteraction();
  }
  if (getWindow().superDispatchTouchEvent(ev)) {
    return true;
  }
  return true;
}

根布局位移动画

根据手指滑动距离设置根布局偏移距离，用滑动距离和手指抬起时的速度判断是否返回

private View rootView = null;
private float lastX = -1;
private VelocityTracker velocityTracker = null;
private int maxFlingVelocity;

@Override
public boolean onTouchEvent(MotionEvent event) {
  if (rootView == null) {
    ViewGroup rootGroup = (ViewGroup) (getWindow().getDecorView());
    rootView = rootGroup.getChildAt(0);
  }
  //测量手指抬起时的速度
  if (velocityTracker == null) {
    velocityTracker = VelocityTracker.obtain();
    maxFlingVelocity = ViewConfiguration.get(this).getScaledMaximumFlingVelocity();
  }
  velocityTracker.addMovement(event);

  switch (event.getAction()) {
    case MotionEvent.ACTION_DOWN: {
      lastX = event.getRawX();
      break;
    }
    case MotionEvent.ACTION_MOVE: {
      if (lastX == -1) {
        lastX = event.getRawX();
        break;
      }
      //根据手指滑动距离设置根布局偏移距离
      rootView.setTranslationX(rootView.getTranslationX() + event.getRawX() - lastX);
      if (rootView.getTranslationX() < 0) rootView.setTranslationX(0);
      lastX = event.getRawX();
      break;
    }
    case MotionEvent.ACTION_UP: {
      //测量手指抬起时的速度
      velocityTracker.computeCurrentVelocity(1000, maxFlingVelocity);
      float velocityX = velocityTracker.getXVelocity();
      if (velocityTracker != null) {
        velocityTracker.recycle();
        velocityTracker = null;
      }

      //判断是否返回
      if (downX < 50 && velocityX > 1000) {
        //手指在左侧边落下，返回
        onBack();
      } else if (velocityX > 3600) {
        //手指快速滑动，返回
        onBack();
      } else if (rootView.getTranslationX() > ConvertUtil.getWidthInPx() * 0.3) {
        //滑动距离超过30%屏幕宽度，返回
        onBack();
      } else {
        //不返回，根布局偏移归零
        rootView.animate().translationX(0).setDuration(200).start();
      }

      lastX = -1;
      shouldIntercept = false;
      hadJudge=false;
      downX = 0;
      downY = 0;
      break;
    }
  }
  return super.onTouchEvent(event);
}

添加左侧阴影

Activity的最顶层View为DecorView，DecorView是一个FrameLayout，里面只有一个Linearlayout,Linearlayout包含着标题栏和自定义布局（setContentView）。
上一步跟随手指滑动进行偏移的就是Linearlayout，现在要在DecorView里添加一个View，设置背景作为阴影，并跟随Linearlayout进行移动

private View shadowView = null;
@Override
public boolean onTouchEvent(MotionEvent event) {
  if (rootView == null) {
    //添加阴影

    ViewGroup rootGroup = (ViewGroup) (getWindow().getDecorView());

    shadowView = new View(this);
    rootGroup.addView(shadowView, 0);
    ViewGroup.LayoutParams params = shadowView.getLayoutParams();
    //阴影宽度
    params.width = (int) ((float) ConvertUtil.getWidthInPx() * 0.05f);
    params.height = ConvertUtil.getHeightInPx();
    shadowView.setLayoutParams(params);
    shadowView.setBackgroundResource(R.drawable.shadow_grey_h);
    shadowView.setTranslationX(params.width);

    rootView = rootGroup.getChildAt(1);
  }

  ...

  switch (event.getAction()) {
    ...
    case MotionEvent.ACTION_MOVE: {
      if (lastX == -1) {
        lastX = event.getRawX();
        break;
      }
      //根据手指滑动距离设置根布局偏移距离
      rootView.setTranslationX(rootView.getTranslationX() + event.getRawX() - lastX);
      if (rootView.getTranslationX() < 0) rootView.setTranslationX(0);
      //阴影跟随根布局移动
      shadowView.setTranslationX(-shadowView.getWidth()+rootView.getTranslationX());
      lastX = event.getRawX();
      break;
    }
    case MotionEvent.ACTION_UP: {
      ...
      } else {
        //不返回，根布局偏移归零
        rootView.animate().translationX(0).setDuration(200).start();
        //阴影偏移归零
        shadowView.animate().translationX(-shadowView.getWidth()).setDuration(200).start();
      }
      ...
    }
  }
  ...
}

关联下层activity滑动

保存所有的activity以获取下层activity
给下层activity添加退出和进入的动画
在上层activity滑动时调用下层滑动

获取下层activity

private static ArrayList<Activity> Activity_Stack = new ArrayList<>();
private BaseSwipeBackActivity lastActivity = null;

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  maxFlingVelocity = ViewConfiguration.get(this).getScaledMaximumFlingVelocity();

  if (!Activity_Stack.contains(this)) Activity_Stack.add(this);
  if (Activity_Stack.size() >= 2) {
    Activity last = Activity_Stack.get(Activity_Stack.size() - 2);
    if (last instanceof BaseSwipeBackActivity) {
      lastActivity = (BaseSwipeBackActivity) last;
    }
  }
}

@Override
protected void onDestroy() {
  super.onDestroy();
  Activity_Stack.remove(this);
}

下层activity的退出、进入动画

private void lowerActivityExitAnim() {
  if (rootView == null) return;
  //只移动30%
  rootView.animate().translationX(-ConvertUtil.getWidthInPx() * 0.3f).setDuration(300).start();
}

private void lowerActivityEnterAnim(float upperTranslationX) {
  if (rootView == null) return;
  //保证滑动退出时，上下层时间同步
  float r = 1-upperTranslationX/ (float) ConvertUtil.getWidthInPx();
  rootView.animate().translationX(0).setDuration((long) (300f * r)).start();
}

在跳转时，调用下层activity的退出、进入动画

@Override
public void startActivity(Intent intent) {
  super.startActivity(intent);
  overridePendingTransition(R.anim.slide_right_in, 0);
  lowerActivityExitAnim();
}

@Override
public void startActivityForResult(Intent intent, int requestCode) {
  super.startActivityForResult(intent, requestCode);
  overridePendingTransition(R.anim.slide_right_in, 0);
  lowerActivityExitAnim();
}

@Override
public void finish() {
  super.finish();
  overridePendingTransition(0, R.anim.slide_right_out);
  if (lastActivity != null) lastActivity.lowerActivityEnterAnim(rootView.getTranslationX());
  Activity_Stack.remove(this);
}

上层activity滑动时关联下层滑动

@Override
public boolean onTouchEvent(MotionEvent event) {
  ...
  switch (event.getAction()) {
    ...
    case MotionEvent.ACTION_MOVE: {
      ...
      //根据手指滑动距离设置根布局偏移距离
      rootView.setTranslationX(rootView.getTranslationX() + event.getRawX() - lastX);
      if (rootView.getTranslationX() < 0) rootView.setTranslationX(0);
      //阴影跟随根布局移动
      shadowView.setTranslationX(-shadowView.getWidth() + rootView.getTranslationX());
      //下层activity跟随移动
      if (lastActivity != null && lastActivity.rootView != null)
        //-ConvertUtil.getWidthInPx() * 0.3f初始的偏移
        lastActivity.rootView.setTranslationX(-ConvertUtil.getWidthInPx() * 0.3f + rootView.getTranslationX() * 0.3f);
      ...
    }
    case MotionEvent.ACTION_UP: {
      ...
      } else {
        //不返回，根布局偏移归零
        rootView.animate().translationX(0).setDuration(200).start();
        //阴影偏移归零
        shadowView.animate().translationX(-shadowView.getWidth()).setDuration(200).start();
        //下层activity偏移复原
        if (lastActivity != null)
          lastActivity.lowerActivityExitAnim();
      }
      ...
    }
  }

  return super.onTouchEvent(event);
}

完整的

public abstract class BaseSwipeBackActivity extends AppCompatActivity {

  private static ArrayList<Activity> Activity_Stack = new ArrayList<>();
  private BaseSwipeBackActivity lastActivity = null;

  private View rootView = null;
  private View shadowView = null;

  private float downX = 0;
  private float downY = 0;
  private boolean shouldIntercept = false;
  private boolean hadJudge = false;

  private float lastX = -1;
  private VelocityTracker velocityTracker = null;
  private int maxFlingVelocity;

  @Override
  protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    maxFlingVelocity = ViewConfiguration.get(this).getScaledMaximumFlingVelocity();

    if (!Activity_Stack.contains(this)) Activity_Stack.add(this);
    if (Activity_Stack.size() >= 2) {
      Activity last = Activity_Stack.get(Activity_Stack.size() - 2);
      if (last instanceof BaseSwipeBackActivity) {
        lastActivity = (BaseSwipeBackActivity) last;
      }
    }
  }

  @Override
  protected void onResume() {
    initShadow();
    super.onResume();
  }

  @Override
  protected void onDestroy() {
    super.onDestroy();
    Activity_Stack.remove(this);
  }

  @Override
  public void startActivity(Intent intent) {
    super.startActivity(intent);
    overridePendingTransition(R.anim.slide_right_in, 0);
    lowerActivityExitAnim();
  }

  @Override
  public void startActivityForResult(Intent intent, int requestCode) {
    super.startActivityForResult(intent, requestCode);
    overridePendingTransition(R.anim.slide_right_in, 0);
    lowerActivityExitAnim();
  }

  @Override
  public void finish() {
    super.finish();
    overridePendingTransition(0, R.anim.slide_right_out);
    if (lastActivity != null) lastActivity.lowerActivityEnterAnim(rootView.getTranslationX());
    Activity_Stack.remove(this);
  }

  private void initShadow() {
    if (shadowView == null) {
      ViewGroup rootGroup = (ViewGroup) (getWindow().getDecorView());

      shadowView = new View(this);
      rootGroup.addView(shadowView, 0);
      ViewGroup.LayoutParams params = shadowView.getLayoutParams();
      //阴影宽度
      params.width = (int) ((float) ConvertUtil.getWidthInPx() * 0.05f);
      params.height = ConvertUtil.getHeightInPx();
      shadowView.setLayoutParams(params);
      //渐变背景作为阴影
      shadowView.setBackgroundResource(R.drawable.shadow_grey_h);
      shadowView.setTranslationX(-params.width);

      rootView = rootGroup.getChildAt(1);
    }
  }

  @Override
  public boolean dispatchTouchEvent(MotionEvent ev) {
    if (shouldIntercept) {
      return onTouchEvent(ev);
    }
    switch (ev.getAction()) {
      case MotionEvent.ACTION_DOWN: {
        downX = ev.getRawX();
        downY = ev.getRawY();
        hadJudge = false;
        break;
      }
      case MotionEvent.ACTION_MOVE: {
        if (hadJudge) break;
        if (ev.getRawX() == downX) break;
        if (ev.getRawX() < downX) {
          //左滑
          hadJudge = true;
          break;
        }
        if (ev.getRawX() - downX >= 100) {
          //超出判断距离
          hadJudge = true;
          break;
        }
        if (ev.getRawX() - downX > 50) {
          //x轴右滑50~100px
          float rate = (ev.getRawX() - downX) / (Math.abs(ev.getRawY() - downY));
          if ((downX < 50 && rate > 0.5f) || rate > 2) {
            shouldIntercept = true;
          }
        }
        break;
      }
      case MotionEvent.ACTION_UP: {
        downX = 0;
        downY = 0;
        shouldIntercept = false;
        hadJudge = false;
        break;
      }
    }
    //Activity的默认分发
    if (ev.getAction() == MotionEvent.ACTION_DOWN) {
      onUserInteraction();
    }
    if (getWindow().superDispatchTouchEvent(ev)) {
      return true;
    }
    return true;
  }

  @Override
  public boolean onTouchEvent(MotionEvent event) {
    initShadow();

    //测量手指抬起时的速度
    if (velocityTracker == null) {
      velocityTracker = VelocityTracker.obtain();
      maxFlingVelocity = ViewConfiguration.get(this).getScaledMaximumFlingVelocity();
    }
    velocityTracker.addMovement(event);

    switch (event.getAction()) {
      case MotionEvent.ACTION_DOWN: {
        lastX = event.getRawX();
        break;
      }
      case MotionEvent.ACTION_MOVE: {
        if (lastX == -1) {
          lastX = event.getRawX();
          break;
        }
        //根据手指滑动距离设置根布局偏移距离
        rootView.setTranslationX(rootView.getTranslationX() + event.getRawX() - lastX);
        if (rootView.getTranslationX() < 0) rootView.setTranslationX(0);
        //阴影跟随根布局移动
        shadowView.setTranslationX(-shadowView.getWidth() + rootView.getTranslationX());
        //下层activity跟随移动
        if (lastActivity != null && lastActivity.rootView != null)
          lastActivity.rootView.setTranslationX(-ConvertUtil.getWidthInPx() * 0.3f + rootView.getTranslationX() * 0.3f);

        lastX = event.getRawX();
        break;
      }
      case MotionEvent.ACTION_UP: {
        //测量手指抬起时的速度
        velocityTracker.computeCurrentVelocity(1000, maxFlingVelocity);
        float velocityX = velocityTracker.getXVelocity();
        if (velocityTracker != null) {
          velocityTracker.recycle();
          velocityTracker = null;
        }

        //判断是否返回
        if (downX < 50 && velocityX > 1000) {
          //手指在左侧边落下，返回
          onBack();
        } else if (velocityX > 3600) {
          //手指快速滑动，返回
          onBack();
        } else if (rootView.getTranslationX() > ConvertUtil.getWidthInPx() * 0.3) {
          //滑动距离超过30%屏幕宽度，返回
          onBack();
        } else {
          //不返回，根布局偏移归零
          rootView.animate().translationX(0).setDuration(200).start();
          //阴影偏移归零
          shadowView.animate().translationX(-shadowView.getWidth()).setDuration(200).start();
          //下层activity偏移复原
          if (lastActivity != null) lastActivity.lowerActivityExitAnim();
        }

        lastX = -1;
        shouldIntercept = false;
        hadJudge = false;
        downX = 0;
        downY = 0;
        break;
      }
    }

    return super.onTouchEvent(event);
  }

  private void lowerActivityExitAnim() {
    if (rootView == null) return;
    rootView.animate().translationX(-ConvertUtil.getWidthInPx() * 0.3f).setDuration(300).start();
  }

  private void lowerActivityEnterAnim(float upperTranslationX) {
    if (rootView == null) return;
    float r = 1-upperTranslationX/ (float) ConvertUtil.getWidthInPx();
    rootView.animate().translationX(0).setDuration(r == 0.0f ? 10 : (long) (300f * r)).start();
  }

  //退出
  abstract public void onBack();
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

Android中SwipeBack实现右滑返回效果

现在有很多App支持右滑返回,比如知乎,效果比较赞. 于是自己对Activity和Fragment进行了继承,派生出SwipeBackActivity和SwipeBackFragment,用于对这种效果的实现,也就是只要继承这两个类就可以了. 效果如下 Activity Fragment Frgament的效果实现比Activity稍微简单,因为Activity要考虑到dectorView. 支持滑动的控件SwipeLayout,核心思路就是把原有的控件添加到支持滑动的控件中,SwipeLayo
Android仿微信右滑返回功能的实例代码

先上效果图,如下: 先分析一下功能的主要技术点,右滑即手势判断,当滑到一直距离时才执行返回,并且手指按下的位置是在屏幕的最左边(这个也是有一定范围的), 这些可以实现onTouchEvent来实现. 接着就是返回时,有滑动效果,很显然这个是Acitivty切换动画实现的.好啦,分析完了就开干.下面上代码: @Override public boolean onTouchEvent(MotionEvent event) { switch (event.getAction()){ case Mot
Android右滑返回上一个界面的实现方法

Android右滑返回上一个界面的实现方法 public class BaseActivity extends Activity implements OnTouchListener { public ProgressDialog progressDialog; public String states; public RequestQueue mQueue; /** 触摸时按下的点 **/ PointF downP = new PointF(); /** 触摸时当前的点 **/ PointF
Android实现类似IOS右滑返回的效果(原因分析及解决办法)

使用类库SwipeBackLayout https://github.com/Issacw0ng/SwipeBackLayout 出现的问题: 1. 主Activity返回时黑屏或者返回只是看到桌面背景而没有看到上一个Activity界面原因: 使用滑动返回需要在Activity的额主题中声明android:windowIsTranslucent=true,而该属性是设置Activity为是否为透明主题,当主Activity采用透明主题时,由于是app Activity栈中的第一个,所以滑动返
android 右滑返回的示例代码

类似于微信的右滑返回,在BaseActivity里利用dispatchTouchEvent()拦截右滑动作,利用setTranslationX()实现动画,在DecorView里添加View作为滑动时的左侧阴影. 渐进步骤: 设置activity背景透明重写finish()等方法设置activity的跳转动画重写dispatchTouchEvent()拦截所需要右滑动作重写onTouchEvent()给根布局设置偏移量添加滑动时上层activity的左侧阴影滑动时关联下层activ
iOS禁用右滑返回的两种方法

本文实例为大家分享了iOS禁用右滑返回的具体代码,供大家参考,具体内容如下方式一: 前提:如果使用的自定义UINavigationController基类,请不要在此基类里写相关的手势操作方法. 代码如下: -(void)viewDidAppear:(BOOL)animated{ if ([self.navigationController respondsToSelector:@selector(interactivePopGestureRecognizer)]) { self.naviga
Android 实现右滑返回功能

前言右滑返回这个功能好像在iOS上蛮实用的,因为它的返回键在左上角,右手握持手机就得穿越整个屏幕去按它,不过对于大屏Android手机也是蛮实用的,右下角的返回键随着屏占比的增大按起来的难度也不小,就算有mBack这样的交互,多一个右滑返回也是极好的是吧? 上代码 SwipBackDemo 上效果图 SlidingPaneLayout 这个东西是Support V4中早就存在的,同样是侧滑,远没有侧滑菜单android.support.v4.widget.DrawerLayout被熟知,这玩意
Android实现全局右滑返回

目前Android手机的全面屏越来越盛行,很多应用都已经支持了右滑返回上一级页面的功能,那么这个功能如何实现呢? 首先来说下思路吧,主要是通过 MotionEvent 这个事件通过对这个事件的不同处理,在通过 PointF 来监听按下去的点,处于什么位置. 接下来,通过代码给大家讲解一下显示新建一个Gesture的这个样一个类,用来处理,滑动的逻辑. public class GestureHandler {} 接下来是定义相关的一些屏幕宽高.滑动的区间的一些表示 //屏幕宽高 int sWi
iOS体验性优化之RTL适配右滑返回的实现

简述所谓RTL方向布局就是right to left direction.也就是界面中的元素总是按从右往左的方向进行排列布局,大部分国家的书写以及排列习惯都是从左往右,是LTR方向布局,而对于一些阿拉伯国家,文字的书写以及展示的顺序都是从右往左方向的. iOS的导航支持左滑手势返回上一个界面,这是果粉普遍喜欢的一个特性,iOS7之后的APP适配大多会保留这一特性,慢慢的大多用户已经有了这种操作习惯,对于iPhone的无虚拟键,这种操作也能增加比较友好的用户体验. 在公司新项目之前,没有考虑过多
iOS开发之导航栏各种右滑返回失效的解决方法汇总

前言众所周知iOS 的几乎全部页面都是需要右滑返回的,否则用户体验会大打折扣,但是在开发过程中经常会碰到某些页面右滑返回失效的情况,下面记录一下各种情况下右滑返回失效的解决方法. 下面话不多说了,来随着小编一起学习学习吧自定义返回按钮时失效当你重写 self.navigationItem.leftBarButtonItem 之后,自带的返回按钮就会被覆盖,右滑返回就会失效,解决办法只要加入下面这句代码即可. - (void)viewDidLoad { [super viewDidLoad]

android 右滑返回的示例代码

相关推荐

随机推荐