跟随手指移动的View , 自动贴边

自定义View这一块，一直是我的心病。最近项目遇到需求，类似于高德搜索界面的列表随手指移动。
饭要一点点吃，先从最基本的View跟随手指开始。

先贴效果图和代码：

此处输入图片的描述

package com.martin.animationstudy.view;

import android.animation.ObjectAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

import com.martin.animationstudy.util.ScreenUtil;

/**
 * @author martin
 */
public class MoveView extends View {

    /**
     * View的宽高
     */
    private float width;
    private float height;

    /**
     * 触摸点相对于View的坐标
     */
    private float touchX;
    private float touchY;
    /**
     * 状态栏的高度
     */
    int barHeight = 0;
    /**
     * 屏幕的宽高
     */
    private int screenWidth;
    private int screenHeight;

    public MoveView(Context context) {
        super(context);
    }

    public MoveView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        //获取状态栏高度
        barHeight = ScreenUtil.INSTANCE.getStatusHeight(context);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        screenWidth = ScreenUtil.INSTANCE.getScreenWidth(getContext());
        screenHeight = ScreenUtil.INSTANCE.getScreenHeight(getContext());
        width = canvas.getWidth();
        height = canvas.getHeight();
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                clearAnimation();
                touchX = event.getX();
                touchY = event.getY();
                return true;
            case MotionEvent.ACTION_MOVE:
                float nowY = event.getRawY() - touchY - barHeight;
                float nowX = event.getRawX() - touchX;
                nowX = nowX < 0 ? 0 : (nowX + width > screenWidth) ? (screenWidth - width) : nowX;
                nowY = nowY < 0 ? 0 : nowY + height > screenHeight ? screenHeight - height : nowY;
                this.setY(nowY);
                this.setX(nowX);
                invalidate();
                return true;
            case MotionEvent.ACTION_UP:
                //这里做动画贴边效果
                float centerX = getX() + width / 2;
                if (centerX > screenWidth / 2) {
                    ObjectAnimator.ofFloat(this, "translationX",
                            getX(), screenWidth - width)
                            .setDuration(500)
                            .start();
                } else {
                    ObjectAnimator.ofFloat(this, "translationX",
                            getX(), 0)
                            .setDuration(500)
                            .start();
                }
                touchX = 0;
                touchY = 0;
                return true;
            default:
                return super.onTouchEvent(event);
        }
    }
}

坐标系

坐标系图

触摸事件，肯定要在OnTouchEvent方法里下功夫。
MotionEvent有两个获取X,Y的方法：

getX()
getY()
getRawX()
getRawY()

简单的介绍一下两种方法的区别：

方法	意义
event.getY()	触摸点对于当前View的y坐标
event.getRawY()	触摸点相对于整个屏幕的y坐标
view.getY	当前View相对于整个屏幕的Y轴坐标

这里推荐一下我很喜欢的自定义View学习网站
电脑重做了几次，这个网站我都没丢。

分析与实现

1. 跟随手指移动的需求，很像属性动画，但这样子动画实现起来较为复杂，并且流畅度并不好。所以我们选择重设View的属性，并且调用invalidate()方法，实现View的另类移动。
2. 触摸事件由：ACTION_DOWN，ACTION_MOVE，ACTION_UP组成，其中只有ACTION_MOVE会多次调用，其他只调用一次。
3. 由坐标图可以知道:View.getY = event.getRawY - event.getY，就是说View的移动后Y坐标，由上面公式得到（X轴同理）。为保证触摸点相对View的坐标一致，我们在ACTION_DOWN的触摸事件下，将触摸坐标记录：

touchX = event.getX();
touchY = event.getY();

4.View的移动范围控制在屏幕内，则View的Y坐标范围是[0,screenHeight-View.height]

/*
    这里Y轴要减掉barHeight
    因为计算时，View的默认坐标原点在状态栏下面
    而屏幕的坐标是包含着状态栏的
*/
float nowY = event.getRawY() - touchY - barHeight;
float nowX = event.getRawX() - touchX;
nowX = nowX < 0 ? 0 : (nowX + width > screenWidth) ? (screenWidth - width) : nowX;
nowY = nowY < 0 ? 0 : nowY + height > screenHeight ? screenHeight - height : nowY;

5.贴边动画，只要计算View的中点X坐标View.getX+View.width/2，判断与屏幕宽度一半screenWidth/2的大小，大就贴在右边，小就贴向左边，执行属性动画就可以了。

//这里做动画贴边效果
float centerX = getX() + width / 2;
if (centerX > screenWidth / 2) {
    ObjectAnimator.ofFloat(this, "translationX",
        getX(), screenWidth - width)
            .setDuration(500)
            .start();
} else {
    ObjectAnimator.ofFloat(this, "translationX",
        getX(), 0)
            .setDuration(500)
            .start();
}

贴上源码地址