Android 自定义View实现抽屉效果

说明

1. 这个自定义View，没有处理好多点触摸问题
2. View跟着手指移动，没有采用传统的scrollBy方法，而是通过不停地重新布局子View的方式，来使得子View产生滚动效果menuView.layout(menuLeft, 0, menuLeft + menuWidth, menuHeight);
3. 相应的，由于没有使用scrollBy方法，就没有产生getScrollX值，所以不能通过Scroller的startScroll方法来完成手指离开后的平滑滚动效果，而是使用了Animation动画的applyTransformation方法来完成插值，从而实现动画效果
   

主要算法是：动画当前值=起始值+（目标值-起始值）*interpolatedTime

其中interpolatedTime是一个0.0f~1.0f的数字，系统自己插值计算好了（默认是线性变化的），当然你可以自己写插值器

 /**
   * 由于上面不能使用scrollBy，那么这里就不能使用Scroller这个类来完成平滑移动了，还好我们有动画
   */
  class MyAnimation extends Animation {

    private int viewCurrentLfet;
    private int viewStartLfet;
    private int viewTargetLfet;
    private int viewWidth;
    private View view;
    private int cha;

    public MyAnimation(View view, int viewStartLfet, int viewTargetLfet, int viewWidth) {
      this.view = view;
      this.viewStartLfet = viewStartLfet;
      this.viewTargetLfet = viewTargetLfet;
      this.viewWidth = viewWidth;
      cha = viewTargetLfet - viewStartLfet;
      setDuration(Math.abs(cha));
    }

    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t) {
      super.applyTransformation(interpolatedTime, t);

      viewCurrentLfet = (int) (viewStartLfet + cha * interpolatedTime);
      view.layout(viewCurrentLfet, 0, viewCurrentLfet + viewWidth, menuHeight);


    }
  }

完整代码

package com.sunshine.choutidemo;

import android.content.Context;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.VelocityTracker;
import android.view.View;
import android.view.ViewConfiguration;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
import android.view.animation.Transformation;

/**
 * Created by a on 2016/8/15.
 */
public class ChouTiView extends ViewGroup {

  private View mainView;
  private View menuView;
  private int menuWidth;
  private int downX;
  private int lastX;
  private int moveX;
  private int deltaX;
  private int menuLeft;
  private int mainLeft;
  private int menuHeight;
  private int mainWidth;
  private int mainHeight;
  private int menuLeftBorder;
  private int mainLeftBorder;
  private int menuRightBorder;
  private int mainRightBorder;
  private int mMaxVelocity;
  private VelocityTracker mVelocityTracker;
  private int mPointerId;
  private float velocityX;
  private float velocityY;

  public ChouTiView(Context context) {
    super(context);
    init();
  }


  public ChouTiView(Context context, AttributeSet attrs) {
    super(context, attrs);
    init();
  }

  private void init() {
//   0.获得此次最大速率
    mMaxVelocity = ViewConfiguration.get(getContext()).getMaximumFlingVelocity();
  }

  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    mainView.measure(widthMeasureSpec, heightMeasureSpec);
    menuView.measure(widthMeasureSpec, heightMeasureSpec);
//    获得子View的正确宽度（只能获取具体的数字值）,但是不能这样获取高度，因为这里match—parent为-1
    menuWidth = menuView.getLayoutParams().width;
    menuLeft = (int) (-menuWidth * 0.5);
    menuLeftBorder = (int) (-menuWidth * 0.5);
    menuRightBorder = 0;
    mainLeft = 0;
    mainLeftBorder = 0;
    mainRightBorder = menuWidth;

  }

  @Override
  protected void onLayout(boolean changed, int l, int t, int r, int b) {
    menuHeight = b;
    mainWidth = r;
    mainHeight = b;
    mainView.layout(l, t, r, b);
    menuView.layout(menuLeft, t, menuLeft + menuWidth, b);

  }

  @Override
  protected void onFinishInflate() {
    super.onFinishInflate();
    mainView = getChildAt(1);
    menuView = getChildAt(0);
  }

  @Override
  public boolean onTouchEvent(MotionEvent event) {
    final int action = event.getActionMasked();

    acquireVelocityTracker(event); //1.向VelocityTracker添加MotionEvent
    final VelocityTracker verTracker = mVelocityTracker;
    switch (action) {

      case MotionEvent.ACTION_DOWN:
        //2.求第一个触点的id， 此时可能有多个触点，但至少一个
        // 获取索引为0的手指id
        mPointerId = event.getPointerId(0);
        downX = (int) event.getX();
        lastX = downX;
        break;

      case MotionEvent.ACTION_MOVE:
// 获取当前手指id所对应的索引，虽然在ACTION_DOWN的时候，我们默认选取索引为0
        // 的手指，但当有第二个手指触摸，并且先前有效的手指up之后，我们会调整有效手指

        // 屏幕上可能有多个手指，我们需要保证使用的是同一个手指的移动轨迹，
        // 因此此处不能使用event.getActionIndex()来获得索引
        final int pointerIndex = event.findPointerIndex(mPointerId);


        moveX = (int) event.getX(pointerIndex);
        deltaX = moveX - lastX;
//        把触摸移动引起的增量，体现在menu和main的左侧left上
        menuLeft = (int) (menuLeft + deltaX * 0.43);//让菜单移动的慢一点
        mainLeft = mainLeft + deltaX;
//        让菜单根据手指增量移动，考虑两侧边界问题（通过不停地layout实现移动效果）
//        为何不适用scrollBy，因为scrollBy移动的是外层的大View，现在需求是分别移动这个大view内的两个小View
//        scrollBy的话，会让菜单和主页面同时移动，不会产生错位效果，
//        你会想，那让小view自己scrollBy，这样也是不行的，
//        因为让小view，例如menu调用scrollBy的话，会让menu自己的边框在动，
//        看上去，是menu内部的文字在移动，但是menu并没有在外层的大View里移动
//        说的很拗口，但是真的不能用scrollBy
        if (menuLeft >= menuRightBorder) {
          menuLeft = menuRightBorder;
        } else if (menuLeft <= menuLeftBorder) {
          menuLeft = menuLeftBorder;
        }
        menuView.layout(menuLeft, 0, menuLeft + menuWidth, menuHeight);


//        让主页面根据手指增量移动，考虑两侧边界问题
        if (mainLeft >= mainRightBorder) {
          mainLeft = mainRightBorder;
        } else if (mainLeft <= mainLeftBorder) {
          mainLeft = mainLeftBorder;
        }
        mainView.layout(mainLeft, 0, mainLeft + mainWidth, mainHeight);

        lastX = moveX;
        break;


      case MotionEvent.ACTION_UP:
        //3.求伪瞬时速度
        verTracker.computeCurrentVelocity(1000, mMaxVelocity);
        velocityX = verTracker.getXVelocity(mPointerId);
        Log.e("qwe", velocityX + "/" + mMaxVelocity);
        if (velocityX > 1000) {
          smoothToMenu();
        } else if (velocityX < -2000) {
          smoothToMain();
        } else {
//        判断松手的位置，如果大于1/2.5的菜单宽度就打开菜单，否则打开主页面

          if (mainLeft > menuWidth / 2.5) {
            Log.e("qqq", "显示菜单");
            smoothToMenu();
          } else {
            Log.e("qqq", "显示主页面");
            smoothToMain();
          }
        }
//        4.ACTION_UP释放VelocityTracker,交给其他控件使用
        releaseVelocityTracker();
        break;
      case MotionEvent.ACTION_CANCEL:

//        4.ACTION_UP释放VelocityTracker,交给其他控件使用
        releaseVelocityTracker();

      case MotionEvent.ACTION_POINTER_UP:
        // 获取离开屏幕的手指的索引
        int pointerIndexLeave = event.getActionIndex();
        int pointerIdLeave = event.getPointerId(pointerIndexLeave);
        if (mPointerId == pointerIdLeave) {
          // 离开屏幕的正是目前的有效手指，此处需要重新调整，并且需要重置VelocityTracker
          int reIndex = pointerIndexLeave == 0 ? 1 : 0;
          mPointerId = event.getPointerId(reIndex);
          // 调整触摸位置，防止出现跳动
          downX = (int) event.getX(reIndex);
//          y = event.getY(reIndex);
          releaseVelocityTracker();
        }
        releaseVelocityTracker();

        break;
    }


    return true;
  }

  private void smoothToMain() {
    MyAnimation menuAnimation = new MyAnimation(menuView, menuLeft, menuLeftBorder, menuWidth);
    MyAnimation mainAnimation = new MyAnimation(mainView, mainLeft, mainLeftBorder, mainWidth);
    AnimationSet animationSet = new AnimationSet(true);
    animationSet.addAnimation(menuAnimation);
    animationSet.addAnimation(mainAnimation);
    startAnimation(animationSet);
    //一定记得更新menu和main的左侧状态，这影响到了，再次手指触摸时候的动画，否则突变
    menuLeft = menuLeftBorder;
    mainLeft = mainLeftBorder;
  }

  private void smoothToMenu() {
    MyAnimation menuAnimation = new MyAnimation(menuView, menuLeft, menuRightBorder, menuWidth);
    MyAnimation mainAnimation = new MyAnimation(mainView, mainLeft, mainRightBorder, mainWidth);
    AnimationSet animationSet = new AnimationSet(true);
    animationSet.addAnimation(menuAnimation);
    animationSet.addAnimation(mainAnimation);
    startAnimation(animationSet);
    //一定记得更新menu和main的左侧状态，这影响到了，再次手指触摸时候的动画，否则突变
    menuLeft = menuRightBorder;
    mainLeft = mainRightBorder;
  }


  /**
   * @param event 向VelocityTracker添加MotionEvent
   * @see android.view.VelocityTracker#obtain()
   * @see android.view.VelocityTracker#addMovement(MotionEvent)
   */
  private void acquireVelocityTracker(final MotionEvent event) {
    if (null == mVelocityTracker) {
      mVelocityTracker = VelocityTracker.obtain();
    }
    mVelocityTracker.addMovement(event);
  }

  /**
   * 释放VelocityTracker
   *
   * @see android.view.VelocityTracker#clear()
   * @see android.view.VelocityTracker#recycle()
   */
  private void releaseVelocityTracker() {
    if (null != mVelocityTracker) {
      mVelocityTracker.clear();
      mVelocityTracker.recycle();
      mVelocityTracker = null;
    }
  }


  /**
   * 由于上面不能使用scrollBy，那么这里就不能使用Scroller这个类来完成平滑移动了，还好我们有动画
   */
  class MyAnimation extends Animation {

    private int viewCurrentLfet;
    private int viewStartLfet;
    private int viewTargetLfet;
    private int viewWidth;
    private View view;
    private int cha;

    public MyAnimation(View view, int viewStartLfet, int viewTargetLfet, int viewWidth) {
      this.view = view;
      this.viewStartLfet = viewStartLfet;
      this.viewTargetLfet = viewTargetLfet;
      this.viewWidth = viewWidth;
      cha = viewTargetLfet - viewStartLfet;
      setDuration(Math.abs(cha));
    }

    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t) {
      super.applyTransformation(interpolatedTime, t);

      viewCurrentLfet = (int) (viewStartLfet + cha * interpolatedTime);
      view.layout(viewCurrentLfet, 0, viewCurrentLfet + viewWidth, menuHeight);


    }
  }

}

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

# Android  # 自定义View实现抽屉效果  # 自定义View抽屉效果  # Android开发之DrawerLayout实现抽屉效果  # Android编程实现抽屉效果的方法详解  # Android自定义控件仿QQ抽屉效果  # Android DrawerLayout实现抽屉效果实例代码  # Android 抽屉效果的导航菜单实现代码实例  # Android实现自定义滑动式抽屉菜单效果  # Android App中DrawerLayout抽屉效果的菜单编写实例  # Android SlidingDrawer 抽屉效果的实现  # Android的Activity跳转动画各种效果整理  # Android Tween动画之RotateAnimation实现图片不停旋转效果实例介绍  # Android实现图片轮播效果的两种方法  # Android编程实现抽屉效果的方法示例  # 来完成  # 的是  # 多个  # 能有  # 会让  # 就不能  # 自定义  # 插值  # 瞬时速度  # 自己的  # 是一个  # 多点  # 不停地  # 好了  # 你可以  # 第一个  # 你会  # 希望能  # 第二个  # 不能用 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： Laravel怎么进行数据库事务处理_Laravel DB Facade事务操作确保数据一致性  微信小程序 input输入框控件详解及实例（多种示例）  用v-html解决Vue.js渲染中html标签不被解析的问题  谷歌浏览器如何更改浏览器主题 Google Chrome主题设置教程  做企业网站制作流程,企业网站制作基本流程有哪些？  Laravel如何实现用户密码重置功能？（完整流程代码）  如何快速建站并高效导出源代码？  深圳网站制作公司好吗,在深圳找工作哪个网站最好啊？  如何在不使用负向后查找的情况下匹配特定条件前的换行符  Python自动化办公教程_ExcelWordPDF批量处理案例  Laravel如何使用Seeder填充数据_Laravel模型工厂Factory批量生成测试数据【方法】  潮流网站制作头像软件下载,适合母子的网名有哪些？  javascript基本数据类型及类型检测常用方法小结  详解jQuery中的事件  浅谈redis在项目中的应用  如何在阿里云ECS服务器部署织梦CMS网站？  小米17系列还有一款新机？主打6.9英寸大直屏和旗舰级影像  Win11怎么开启自动HDR画质_Windows11显示设置HDR选项  如何在沈阳梯子盘古建站优化SEO排名与功能模块？  高端企业智能建站程序：SEO优化与响应式模板定制开发  如何用花生壳三步快速搭建专属网站？  Laravel中Service Container是做什么的_Laravel服务容器与依赖注入核心概念解析  Laravel Livewire是什么_使用Laravel Livewire构建动态前端界面  如何在云指建站中生成FTP站点？  如何在万网自助建站平台快速创建网站？  android nfc常用标签读取总结  Laravel如何实现数据导出到PDF_Laravel使用snappy生成网页快照PDF【方案】  Win11怎么关闭专注助手 Win11关闭免打扰模式设置【操作】  HTML5段落标签p和br怎么选_文本排版常用标签对比【解答】  电商网站制作多少钱一个,电子商务公司的网站制作费用计入什么科目？  网站制作大概要多少钱一个,做一个平台网站大概多少钱？  Laravel如何使用Service Provider服务提供者_Laravel依赖注入与容器绑定【深度】  Laravel如何使用Collections进行数据处理？（实用方法示例）  Laravel Session怎么存储_Laravel Session驱动配置详解  Laravel中的withCount方法怎么高效统计关联模型数量  如何用ChatGPT准备面试 模拟面试问答与职场话术练习教程  Laravel如何实现API版本控制_Laravel版本化API设计方案  长沙企业网站制作哪家好,长沙水业集团官方网站？  香港代理服务器配置指南：高匿IP选择、跨境加速与SEO优化技巧  三星、SK海力士获美批准：可向中国出口芯片制造设备  韩国代理服务器如何选？解析IP设置技巧与跨境访问优化指南  Laravel怎么写单元测试_PHPUnit在Laravel项目中的基础测试入门  EditPlus 正则表达式 实战(3)  深入理解Android中的xmlns:tools属性  北京的网站制作公司有哪些,哪个视频网站最好？  软银砸40亿美元收购DigitalBridge 强化AI资料中心布局  奇安信“盘古石”团队突破 iOS 26.1 提权  利用JavaScript实现拖拽改变元素大小  Laravel怎么实现搜索功能_Laravel使用Eloquent实现模糊查询与多条件搜索【实例】  公司门户网站制作流程,华为官网怎么做？