View的自由拖动（属性动画的实践之一）

iPhone 有一个 AssistiveTouch ，就是桌面上那个小圆点，用户可以随意拖动它，虽然最后它也会自动挪到最近的边界上，但是如何实现 View 的任意拖动并最后停在那个位置呢，首先要先弄清楚几个方法。

View ：

getTop()：顶边相对于父控件顶边的距离。

getBottom()：底边相对于父控件顶边的距离。

getLeft()：左边相对于父控件左边的距离。

getRight()：右边相对于父控件左边的距离。

getX()：该控件在 X 轴的坐标，初始值同 getLeft()。

getY()：该控件在 Y 轴的坐标，初始值同 getTop()。

getTranslationX()：重新设置 X 轴坐标后相对于原坐标的偏移量。

getTranslationY()：重新设置 Y 轴坐标后相对于原坐标的偏移量。

MotionEvent：

getX()：相对于响应 Touch 事件的控件左边的距离。

getY()：相对于响应 Touch 事件的控件顶边的距离。

getRawX()：相对于屏幕的顶边的距离。

getRawY()：相对于屏幕的左边的距离。

可参照下图来理解。

弄清楚这几个方法，之前我有记录了属性动画的作用和基本使用，而且知道它不单纯是改变视觉效果，还改变了对象的属性，所以我们通过属性动画来实现控件的任意拖动。其实很简单。

通过这张图，我们就可以知道只要算出来 distanceX 和 distanceY ，然后利用属性动画修改控件的 x 、 y ，在原来的 x 、 y 的基础上加上或减去这个 distance 就行了。以 ImageView 为例。

端午节要到了，就在相对布局中放一个萌萌的小粽子：

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/rl_container"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="com.qinshou.iconmovedemo.MainActivity">    <ImageView        android:id="@+id/iv_move"        android:layout_width="50dp"        android:layout_height="50dp"        android:layout_centerInParent="true"        android:scaleType="fitXY"        android:src="@mipmap/zongzi" /></RelativeLayout>

MainActivity：

public class MainActivity extends AppCompatActivity {    private ImageView ivMove;    private int containerWidth, containerHeight;    //容器宽高    private float lastX, lastY; //最后一次触摸事件的坐标    private RelativeLayout rlContainer;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        rlContainer = (RelativeLayout) findViewById(R.id.rl_container);        rlContainer.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {            @Override            public boolean onPreDraw() {                //不能直接在onCreate()方法中得到宽高,会得到0,所以注册视图树的观察者来得到宽高                //OnPreDrawListener是当一个视图树将要绘制时，所要调用的回调函数的接口类                containerWidth = rlContainer.getWidth();                containerHeight = rlContainer.getHeight();                return true;            }        });        ivMove = (ImageView) findViewById(R.id.iv_move);        ivMove.setOnTouchListener(new View.OnTouchListener() {            @Override            public boolean onTouch(View view, MotionEvent motionEvent) {                switch (motionEvent.getAction()) {                    case MotionEvent.ACTION_DOWN:                        //记录触摸时的坐标,这里为什么要用getRawX()和getRawY()相信理解getX(),getY()和getRawX(),getRawY()的区别就知道为什么了                        lastX = motionEvent.getRawX();                        lastY = motionEvent.getRawY();                        //return true对事件进行拦截,不继续下发,防止继续响应onClick事件.                        return true;                    case MotionEvent.ACTION_MOVE:                        //每次移动的距离                        float distanceX = motionEvent.getRawX() - lastX;                        float distanceY = motionEvent.getRawY() - lastY;                        //控件将要移动到的位置,先计算一下,不在ofFloat()方法中再计算是因为要防止控件移动到容器之外.                        float nextX = ivMove.getX() + distanceX;                        float nextY = ivMove.getY() + distanceY;                        //如果将要移动到的 x 轴坐标小于0,则等于0,防止移出容器左边                        if (nextX < 0)                            nextX = 0;                        //防止移出容器右边                        if (nextX > containerWidth - ivMove.getWidth())                            nextX = containerWidth - ivMove.getWidth();                        //防止移出容器顶边                        if (nextY < 0)                            nextY = 0;                        //防止移出容器底边                        if (nextY > containerHeight - ivMove.getHeight())                            nextY = containerHeight - ivMove.getHeight();                        //利用属性动画改变控件的x,y坐标                        ObjectAnimator mObjectAnimatorX = ObjectAnimator.ofFloat(ivMove, "x", ivMove.getX(), nextX);                        ObjectAnimator mObjectAnimatorY = ObjectAnimator.ofFloat(ivMove, "y", ivMove.getY(), nextY);                        AnimatorSet mAnimatorSet = new AnimatorSet();                        mAnimatorSet.playTogether(mObjectAnimatorX, mObjectAnimatorY);                        mAnimatorSet.setDuration(0);                        mAnimatorSet.start();                        //移动完之后记录当前坐标                        lastX = motionEvent.getRawX();                        lastY = motionEvent.getRawY();                        break;                }                return false;            }        });    }}

运行程序，可以看到随意拖动控件的效果就实现了，换成 TextView 、 Button 也是一样的。

上面还提到了 getTranslationX() 、和 getTranslationY() 方法，它得到的值是相对于初始 x 、 y 坐标的偏移量而不是上一次，getX() = getLeft() + getTranslationX() ， getY() = getTop() + getTranslationY() ，有兴趣的朋友可以自行打印看看。

就这么简单，注释写得很详细了，这只是使用属性动画的一次小实验，这个功能强大的东西还有更多好玩的东西等我探究，希望自己还能爬得更高。

Demo下载