标签：
先来看个侧滑菜单效果：
上面分别为：初始状态->滑动中->松开打开菜单
你造吗？看完本文章，写这种侧滑菜单，so easy for you!
你造吗？其实写这个侧滑菜单，只需要10行手写代码就能搞定！
你造吗？看完本文章，当你再听到产品说"我要这个效果"时，再也不会底气不足！
在Android开发中，自定义View效果是属于高级的部分。因为常用逻辑上的东西，经过1年开发后，你会的大家都会。而对于如何实现特殊效果的view的技能上，就可以分个高低了。所以说，无论是面子上的事儿(可以得到程序员妹纸的崇拜)，还是职业技能的提高，我们都非常有必要去熟谙view特效之技巧。
接下来，我将用原理分析加代码示例的方式说明让view移动的一些常用技巧。
在实际开发中，我们一般会在2种情况下需要让view移动：
1.触摸过程中，随着手指拖动让view移动
2.手指抬起后，让view平滑缓慢移动到某个位置
试想一下，view无论出现在屏幕中任何一个位置都是有其坐标点，假如没有坐标，那么view的出现就是不可控的，从而也无法进行绘制了。
所谓view移动，无非是让view从一个坐标点移动到另外一个坐标点。
先想想坐标系的概念：
屏幕坐标系：原点在屏幕左上角，x轴正方向朝右，y轴正方向朝下;
view坐标系：原点在view的左上角，同样x轴正方向朝右，y轴正方向朝下;
如图所示：
(如果对上面2种坐标系的说明有疑惑，可以在activity中放置一个简单的TextView,最好让TextView距离父view有些距离，对TextView进行触摸监听，然后在onTouchEvent中打印event.getX()和event.getRawX()，前者是触摸点相对于view左上角的坐标，后者是触摸点相对于屏幕左上角的坐标)
a.view本身在父view中移动，即整体移动，同时该分类也可看做是父view的内容在移动
b.view的内容在移动，即内部移动
下面结合上面的分析来看移动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;
}
上面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,在上面的过程中我们需要监视触摸，计算手指移动距离，在去不断调用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的原理和api后，不用再去在TouchMove的时候去自己手动移动view，如果对layout方法和scrollTo，scrollBy方法理解不深，就将上面对应代码复制到自己的demo中去感受下。
由于更多的移动veiw的情况是在ViewGroup中去移动子view，所以一般都用ViewDragHelper去做，这个类的介绍由于篇幅有限，可能对各个方法的理解还不够透彻，将代码运行起来并试着去改改效果，多感受一下就明白了。
标签：
原文地址：http://blog.csdn.net/cherry609195946/article/details/43149733
