自定義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的坐標(biāo)
*/
private float touchX;
private float touchY;
/**
* 狀態(tài)欄的高度
*/
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);
//獲取狀態(tài)欄高度
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);
}
}
}
坐標(biāo)系
坐標(biāo)系圖
觸摸事件卦睹，肯定要在OnTouchEvent方法里下功夫。
MotionEvent有兩個獲取X,Y的方法：
getX()
getY()
getRawX()
getRawY()
簡單的介紹一下兩種方法的區(qū)別：
| 方法 | 意義 |
|---|---|
| event.getY() | 觸摸點對于當(dāng)前View的y坐標(biāo) |
| event.getRawY() | 觸摸點相對于整個屏幕的y坐標(biāo) |
| view.getY | 當(dāng)前View相對于整個屏幕的Y軸坐標(biāo) |
這里推薦一下我很喜歡的自定義View學(xué)習(xí)網(wǎng)站
電腦重做了幾次方库，這個網(wǎng)站我都沒丟结序。
分析與實現(xiàn)
- 跟隨手指移動的需求，很像屬性動畫纵潦，但這樣子動畫實現(xiàn)起來較為復(fù)雜徐鹤，并且流暢度并不好。所以我們選擇重設(shè)View的屬性邀层，并且調(diào)用
invalidate()方法返敬，實現(xiàn)View的另類移動。 - 觸摸事件由：
ACTION_DOWN寥院，ACTION_MOVE劲赠，ACTION_UP組成，其中只有ACTION_MOVE會多次調(diào)用，其他只調(diào)用一次凛澎。 - 由坐標(biāo)圖可以知道:View.getY = event.getRawY - event.getY霹肝，就是說View的移動后Y坐標(biāo)，由上面公式得到（X軸同理）塑煎。為保證觸摸點相對View的坐標(biāo)一致沫换，我們在ACTION_DOWN的觸摸事件下，將觸摸坐標(biāo)記錄：
touchX = event.getX();
touchY = event.getY();
4.View的移動范圍控制在屏幕內(nèi)最铁，則View的Y坐標(biāo)范圍是[0,screenHeight-View.height]
/*
這里Y軸要減掉barHeight
因為計算時苗沧，View的默認(rèn)坐標(biāo)原點在狀態(tài)欄下面
而屏幕的坐標(biāo)是包含著狀態(tài)欄的
*/
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坐標(biāo)View.getX+View.width/2炭晒，判斷與屏幕寬度一半screenWidth/2的大小待逞，大就貼在右邊，小就貼向左邊网严，執(zhí)行屬性動畫就可以了识樱。
//這里做動畫貼邊效果
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();
}
