教你10行代码写侧滑菜单

最新推荐文章于 2021-04-09 11:30:58 发布

晓俊说

最新推荐文章于 2021-04-09 11:30:58 发布

阅读量4.5k

点赞数 2

分类专栏： Android

本文链接：https://blog.csdn.net/cherry609195946/article/details/43149733

版权

Android 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

原帖最初发表于传智播客黑马程序员论坛，地址：http://bbs.itheima.com/thread-167442-1-1.html

先来看个侧滑菜单效果：

上面分别为：初始状态->滑动中->松开打开菜单

你造吗？看完本文章，写这种侧滑菜单，so easy for you!

你造吗？其实写这个侧滑菜单，只需要10行手写代码就能搞定！

你造吗？看完本文章，当你再听到产品说"我要这个效果"时，再也不会底气不足！

在Android开发中，自定义View效果是属于高级的部分。因为常用逻辑上的东西，经过1年开发后，你会的大家都会。而对于如何实现特殊效果的view的技能上，就可以分个高低了。所以说，无论是面子上的事儿(可以得到程序员妹纸的崇拜)，还是职业技能的提高，我们都非常有必要去熟谙view特效之技巧。

接下来，我将用原理分析加代码示例的方式说明让view移动的一些常用技巧。

在实际开发中，我们一般会在2种情况下需要让view移动：

1.触摸过程中，随着手指拖动让view移动

2.手指抬起后，让view平滑缓慢移动到某个位置

View移动的本质是什么？

试想一下，view无论出现在屏幕中任何一个位置都是有其坐标点，假如没有坐标，那么view的出现就是不可控的，从而也无法进行绘制了。

所谓view移动，无非是让view从一个坐标点移动到另外一个坐标点。

View在什么坐标系里面移动？

先想想坐标系的概念：

屏幕坐标系：原点在屏幕左上角，x轴正方向朝右，y轴正方向朝下;

view坐标系：原点在view的左上角，同样x轴正方向朝右，y轴正方向朝下;

如图所示：

(如果对上面2种坐标系的说明有疑惑，可以在activity中放置一个简单的TextView,最好让TextView距离父view有些距离，对TextView进行触摸监听，然后在onTouchEvent中打印event.getX()和event.getRawX()，前者是触摸点相对于view左上角的坐标，后者是触摸点相对于屏幕左上角的坐标)

View移动可以细分为2类：

a.view本身在父view中移动，即整体移动，同时该分类也可看做是父view的内容在移动

b.view的内容在移动，即内部移动

View移动有哪些具体的API?

下面结合上面的分析来看移动view的具体方法：

1.通过更改view的left,top,right,bottom来移动view

该方法只适用于在ViewGroup中移动子view，即移动分类中的a类。我们知道left,top,right,bottom4个值是在onLayout方法执行的时候初始化的。同时对4个参数的意思再做一次简单说明，只拿left和top为例：

left：表示当前view的左边距父view原点的距离

top：表示当前view的顶部距父view原点的距离

view提供了3个方法来更改这些值:

layout(l,r,t,b);
offsetLeftAndRight(offset);//同时对left和right进行偏移
offsetTopAndBottom(offset);//同时对top和bottom进行偏移

那么假如我们对一个view添加触摸监听，在TouchMove的时候得到触摸移动的值，分别使用这3个方法就可以达到让view随我们手指移动而在父view中移动的目的.

代码示例：

public boolean onTouch(View v, MotionEvent event) {
         float x =  event.getX();
         float y =  event.getY();
         switch(event.getAction()) {
         case MotionEvent.ACTION_DOWN:
                 break;
         case MotionEvent.ACTION_MOVE:
                 float deltaX = x -lastX;
                 float deltaY = y -lastY;
//                text.layout(text.getLeft()+deltaX,text.getTop()+deltaY, text.getRight()+deltaX, text.getBottom()+deltaY);
                 text.offsetLeftAndRight((int) deltaX);
                 text.offsetTopAndBottom((int) deltaY);
                 break;
         }
                 lastX = x;
                 lastY = y;
                 return true;
}

2.通过更改scrollX和scrollY来移动view,即scrollTo和scrollBy方法，该方法是用来移动view内容的，用官方的话说就是：internally scroll theircontent.

根据对view移动的分类，如果是在ViewGroup中使用，则可以让当前view的所有子view同时移动，如果是对单个view使用，则可以让view的内容移动。

注意：view的background不属于view的内容，

下面摘自一段view的draw方法中的注释，来看view绘制的步骤：

/*
         *Draw traversal performs several drawing steps which must be executed
         *in the appropriate order:
         *  1. Draw the background
         *  2. If necessary, save the canvas' layers toprepare for fading
         *  3. Draw view's content
         *  4. Draw children
         *  5. If necessary, draw the fading edges and restorelayers
         *  6. Draw decorations (scrollbars forinstance)
         */

对于这里的view的content，对于TextView，content就是它的文本，对于ImageView，则是它的drawable对象。

下面解释scrollX和scrollY：

首先如果直接使用scrollTo和scrollBy这2个方法，你会发现当你scrollTo(10,0)的时候，view的内容却向左移动10，同样scrollBy(10,0),view的内容会继续向左移动10，竟然不是向右移动，这很让人迷惑。

先来看下官方对scrollX的解释：

/**
         *Return the scrolled left position of this view. This is the left edge of
         *the displayed part of your view. You do not need to draw any pixels
         *farther left, since those are outside of the frame of your view on screen.
         * @return The leftedge of the displayed part of your view, in pixels.
         */

首先Android绘制view的时候都有一个bounds，可通过view.getDrawingRect()获取，其实是个Rect对象，这个Rect的区域就是Canvas真正绘制的区域，超过这个bounds就不会再绘制。其实上边注释中的the left edge of the displayed part if yourview,就是指bounds的left。Rect的left,top,right,bottom值分别为scrollX,scrollY,scrollX+width,scrollY+height;显然Rect的left和top最初都是0，因为没有scroll，当scrollTo(10,0)后，Rect的left为10，即bounds向右移动了10，那么这时候再在移动后的bounds范围内绘制的时候，会看到是view的内容向左移动了，因为view的位置是不变的，bounds右移，会造成内容向左移动的视觉效果。这也是我们疑惑的地方。究其原因，就是scrollTo和scrollBy是指view的bounds移动，并不是直接指view内容的移动。同时scroll所在坐标系是当前view坐标系。

scrollTo和scrollBy方法移动view过程如图所示：

那么假如我们对一个view添加触摸监听，在TouchMove的时候得到触摸移动的值，分别使用scrollTo和scrollBy方法就可以达到让view的内容随我们手指移动而移动的目的。

代码示例：

public boolean onTouch(View v, MotionEvent event) {
         float x =  event.getX();
         float y =  event.getY();
         switch(event.getAction()) {
         case MotionEvent.ACTION_DOWN:
                 break;
         case MotionEvent.ACTION_MOVE:
                 float deltaX = x -lastX;
                 float deltaY = y -lastY;
                                           
                 /*为什么是减去delatX:newScrollX：手指往右移动，deltaX会是正值，scrollX会更小，bounds的left更小，则bounds往左移动，view的内容会往右移动*/
                 float newScrollX =text.getScrollX()- deltaX;
                 float newScrollY =text.getScrollY()- deltaY;
                 text.scrollTo((int)newScrollX, (int)newScrollY);
                 //scrollBy传负值的原理同上text.scrollBy((int)-deltaX，(int)-deltaY);
                 break;
         }
                 lastX = x;
                 lastY = y;
                 return true;
}

如何让View平滑移动?

上面2种方法一般用在对View进行TouchMove的时候让view移动的，而且layout和scroll都是瞬间移动过去，那么问题来了，当我们手指抬起后，想让View移动平滑移动到指定位置该怎么办？既然layout和scroll都能移动view，那我们在一段时间内循环调用这些方法，每次移动一点，不就能够平滑移动了吗。

对于这个需求，一般有2种做法：

1.Scroller实现

2.自定义动画实现

一.用Scroller实现View平滑移动

Scroller封装了对view移动的操作，但它是一个模拟移动，并不是真正去移动view。由于它模拟了view的整个移动过程，所以我们可以在模拟过程中，循环获取当前view真实移动的时候的scrollX,scrollY;那么拿到scrollX和scrollY后，再调用scrollTo就达到平滑移动的目的了。

使用Scroller一般有3个固定步骤：

a.初始化Scroller

Scroller scroller =new Scroller(getContext());

b.开启模拟过程

scroller.startScroll(startX, startY, dx, dy,500);
invalidate();

c.在模拟过程中获取view真实移动时的值，并调用scrollTo去真正移动view

public void computeScroll() {
         super.computeScroll();
         if(scroller.computeScrollOffset()){
                  scrollTo(scroller.getCurrX(),scroller.getCurrY());
                 invalidate();
         }
}

说明：在b,c步骤中，需要说明的是必须调用invalidate()方法，因为我们只能在computeScroll方法中获取模拟过程中的scrollX和scrollY,但是computeScroll不会自动调用，而invalidate->draw->computeScroll;所以需要调用invalidate，从而间接调用computeScroll，达到循环获取scrollX和scrollY的目的。当模拟过程结束后,scroller.computeScrollOffset()会返回false，从而中断循环。

二.用自定义动画实现View平滑移动

由于系统定义的TranslateAnimation只能移动view本身，而不能移动view的内容，所以需要自定义。系统定义好的4种动画，本质都是在一段时间内改变view的某个属性，所以我们也可以自定义动画，继承自Animation类，去在一段时间内改变我们想改变的属性，比如scrollX,scrollY。

Animation同样是模拟了一个执行过程，它与Scroller很相似，不同的是Scroller为我们计算出了view真实移动情况下的scrollX和scrollY,而Animation没有。另外Scroller需要我们去主动调用computeScroll，而Animation不需要，它在执行过程中会循环调用applyTransformation方法，直到动画结束为止。所以我们需要在applyTransformation方法中计算当前的scrollX和scrollY，然后调用view.scrollTo(x,y);

由于applyTransformation的第一个interpolatedTime为我们标识了动画执行的进度和百分比，所以我们可以根据这个参数获取执行过程中任意时刻的scrollX和scrollY。

下面写一个通用的让view在一段时间内缓慢scroll到指定位置的动画，代码如下：

public class SmoothScrollAnimation extends Animation{
         private View view;
 
         private int originalScrollX;
         private int totalScrollDistance;
         public SmoothScrollAnimation(View view,int targetScrollX){
                 super();
                 this.view= view;
 
                   originalScrollX = view.getScrollX();
                   totalScrollDistance = targetScrollX- originalScrollX;
 
                   setDuration(400);
         }
 
   @Override
         protected void applyTransformation(float interpolatedTime, Transformation t){
                 super.applyTransformation(interpolatedTime, t);
                 int newScrollX =(int)(originalScrollX+
                 totalScrollDistance*interpolatedTime);             
                   view.scrollTo(newScrollX,0);
         }
}

使用强大的ViewDragHelper

最后，介绍一个更强大的类ViewDragHelper,在上面的过程中我们需要监视触摸，计算手指移动距离，在去不断调用layout方法去移动view，在手指抬起时去自己缓慢移动view，有了这个类，你统统不需要做了。

ViewDragHelper一般用于在ViewGroup中对子view的拖拽移动，不过它需要接收一个TouchEvent事件。

它封装了对触摸位置(是否在边缘和当前触摸的是哪个子view)，手指移动距离，移动速度，移动方向的检测，以及Scroller.只需要我们指定什么时候开始检测，具体移动多少。

那么我们现在来做这个文章开头的侧滑菜单的效果，是真正的10行手写代码实现的，可见ViewDragHelper的强大。

方法的说明都在代码中，代码如下：

public class SlideMenu extends FrameLayout{
         public SlideMenu(Contextcontext, AttributeSet attrs) {
                 super(context,attrs);
                 init();
         }  
         private View menuView,mainView;
         private int menuWidth;//菜单宽度
         private ViewDragHelperviewDragHelper;
         private void init(){
                 viewDragHelper =ViewDragHelper.create(this,callback);
         }
         @Override
         protected void onFinishInflate() {
                 super.onFinishInflate();
                 if(getChildCount()!=2){
                          throw newIllegalArgumentException("Youlayout must have only 2 children!");
                 }
                 menuView =getChildAt(0);
                 mainView = getChildAt(1);
         }
         @Override
         protected void onSizeChanged(int w,int h, int oldw,int oldh) {
                 super.onSizeChanged(w,h, oldw, oldh);
                 menuWidth = menuView.getMeasuredWidth();
         }
         @Override
         public boolean onInterceptTouchEvent(MotionEvent ev) {
                 return viewDragHelper.shouldInterceptTouchEvent(ev);
         }
         @Override
         public boolean onTouchEvent(MotionEvent event) {
                 //将触摸事件传递给ViewDragHelper,此操作必不可少
                 viewDragHelper.processTouchEvent(event);
                 return true;
         }
         //ViewDragHelper对触摸监听的回调
         private ViewDragHelper.Callbackcallback = new Callback() {
                 /**
                  * 什么时候开始监测触摸
                  */
                 @Override
                 public boolean tryCaptureView(View child,int pointerId) {
                          return mainView==child;//如果当前触摸的child是mainView时开始检测
                 }
                 /**
                  * 当触摸到childView时回调
                  */
                 @Override
                 public void onViewCaptured(View capturedChild,int activePointerId) {
                          super.onViewCaptured(capturedChild,activePointerId);
                 }
                 /**
                  * 当拖拽状态改变，比如idle，dragging
                  */
                 @Override
                 public void onViewDragStateChanged(int state) {
                          super.onViewDragStateChanged(state);
                 }
                 /**
                  * 在这里决定真正让view在垂直方向移动多少，默认实现则不会移动
                  * 移动原理：最初top为0，当检测到手指向下拖动了10，则dy=10,top=child.getTop()+dy;
                  * 如果返回0,则top一直为0，那么view就在垂直方向就不会移动
                  * 如果返回top,则view会一直跟随手指拖动而移动
                  * @param top  top为它认为你想移动到最新的top值
                  * @param dy垂直方向移动了多少
                  */
                 @Override
                 public int clampViewPositionVertical(View child,int top, int dy) {
                          return 0;
                 }
                 /**
                  * 在这里决定真正让view在水平方向移动多少，默认实现则不会移动
                  * 移动原理：最初left为0，当检测到手指向右拖动了10，则dx=10,left=child.getLeft()+dx;
                  * 如果返回0,则left一直为0，那么view就在水平方向就不会移动
                  * 如果返回left,则view会一直跟随手指拖动而移动
                  * @param left  left为它认为你想移动到最新的left值
                  * @param dx水平方向移动了多少
                  */
                 @Override
                 public int clampViewPositionHorizontal(View child,int left, int dx) {
                          return left;
                 }
                 /**
                  * view移动后的回调
                  * @param left移动后的view最新的left值
                  * @param top移动后的view最新的top值
                  * @param dx x方向移动了多少
                  * @param dy y方向移动了多少
                  */
                 @Override
                 public void onViewPositionChanged(View changedView,int left, int top,
                                   int dx,int dy) {
                          super.onViewPositionChanged(changedView,left, top, dx, dy);
                 }
                 /**
                  * 手指抬起回调
                  * @param xvel x方向滑动的速度
                  * @param yvel y方向滑动的速度
                  */
                 @Override
                 public void onViewReleased(View releasedChild,float xvel, float yvel) {
                         super.onViewReleased(releasedChild,xvel, yvel);
                         //手指抬起后缓慢移动到指定位置
                         if(mainView.getLeft()<menuWidth/2){
                           //关闭菜单
                           viewDragHelper.smoothSlideViewTo(mainView, 0,
                           0);//相当于Scroller的startScroll方法
                           ViewCompat.postInvalidateOnAnimation(SlideMenu.this);
                         }else {
                           //打开菜单
                           viewDragHelper.smoothSlideViewTo(mainView,menuWidth, 0);
                           ViewCompat.postInvalidateOnAnimation(SlideMenu.this);
                         }
                 }
         };
         /**
          * 对Scroller的封装
          */
         public void computeScroll() {
                 if(viewDragHelper.continueSettling(true)){
                          ViewCompat.postInvalidateOnAnimation(this);
                 }
         }
}

View移动总结

综上所述，当你明白了移动view的原理和api后，不用再去在TouchMove的时候去自己手动移动view，如果对layout方法和scrollTo，scrollBy方法理解不深，就将上面对应代码复制到自己的demo中去感受下。

由于更多的移动veiw的情况是在ViewGroup中去移动子view，所以一般都用ViewDragHelper去做，这个类的介绍由于篇幅有限，可能对各个方法的理解还不够透彻，将代码运行起来并试着去改改效果，多感受一下就明白了。

晓俊说

关注

2
点赞
踩
11

收藏

觉得还不错? 一键收藏
2
评论
教你10行代码写侧滑菜单

原帖发表于传智播客黑马训程序员论坛，地址：http://bbs.itheima.com/thread-167442-1-1.html先来看个侧滑菜单效果：上面分别为：初始状态->滑动中->松开打开菜单你造吗？看完本文章，写这种侧滑菜单，so easy for you!你造吗？其实写这个侧滑菜单，只需要10行手写代码就能搞定！你造吗？看完本文章，当你再听到产品说
复制链接

扫一扫

专栏目录