拖動(dòng)控件.png
1.效果
拖動(dòng)按鈕
2. 實(shí)現(xiàn)邏輯
2.1. 思路
- 既然要實(shí)現(xiàn)控件拖動(dòng)，那么就離不開
onTouchEvent()這個(gè)方法蜓席，需要監(jiān)聽里面的按下和滑動(dòng)事件。 - 要實(shí)現(xiàn)自動(dòng)貼邊，需要監(jiān)聽
onTouchEvent()中手指離開屏幕事件胚股。對(duì)于貼邊的過程，我們用屬性動(dòng)畫來解決裙秋。 - 事件的沖突問題也需要考慮琅拌，拖動(dòng)、點(diǎn)擊關(guān)系到了事件的攔截摘刑。
2.2. 要點(diǎn)
- 注意事件的響應(yīng)
- 滑動(dòng)邊界的計(jì)算
3. 完整代碼
3.1. Kotlin
class AttachButton: View {
private var mLastRawX: Float = 0F
private var mLastRawY: Float = 0F
private var isDrug = false
private var mRootMeasuredWidth = 0
private var mRootMeasuredHeight = 0
private var mRootTopY = 0
private var customIsAttach = false
private var customIsDrag = false
constructor(context: Context) : this(context, null)
constructor(context: Context, attrs: AttributeSet?) : this(context, attrs, 0)
constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int) : super(
context,
attrs,
defStyleAttr
) {
isClickable = true
initAttrs(context, attrs)
}
private fun initAttrs(context: Context, attrs: AttributeSet?) {
attrs?.let {
val mTypedAttay = context.obtainStyledAttributes(it, R.styleable.AttachButton)
customIsAttach =
mTypedAttay.getBoolean(R.styleable.AttachButton_customIsAttach, true)
customIsDrag =
mTypedAttay.getBoolean(R.styleable.AttachButton_customIsDrag, true)
mTypedAttay.recycle()
}
}
override fun dispatchTouchEvent(event: MotionEvent?): Boolean {
super.dispatchTouchEvent(event)
return true
}
override fun onTouchEvent(event: MotionEvent?): Boolean {
event?.let {
//判斷是否需要滑動(dòng)
if (customIsDrag) {
//當(dāng)前手指的坐標(biāo)
val mRawX = it.rawX
val mRawY = it.rawY
when (it.action) {
MotionEvent.ACTION_DOWN -> {//手指按下
isDrug = false
//記錄按下的位置
mLastRawX = mRawX
mLastRawY = mRawY
if (parent is ViewGroup) {
val mViewGroup = parent as ViewGroup
val location = IntArray(2)
mViewGroup.getLocationInWindow(location)
//獲取父布局的高度
mRootMeasuredHeight = mViewGroup.measuredHeight
mRootMeasuredWidth = mViewGroup.measuredWidth
//獲取父布局頂點(diǎn)的坐標(biāo)
mRootTopY = location[1]
}
}
MotionEvent.ACTION_MOVE -> {//手指滑動(dòng)
if (mRawX >= 0 && mRawX <= mRootMeasuredWidth && mRawY >= mRootTopY && mRawY <= (mRootMeasuredHeight + mRootTopY)) {
//手指X軸滑動(dòng)距離
val differenceValueX: Float = mRawX - mLastRawX
//手指Y軸滑動(dòng)距離
val differenceValueY: Float = mRawY - mLastRawY
//判斷是否為拖動(dòng)操作
if (!isDrug) {
isDrug =
sqrt(((differenceValueX * differenceValueX) + (differenceValueY * differenceValueY)).toDouble()) >= 2
}
//獲取手指按下的距離與控件本身X軸的距離
val ownX = x
//獲取手指按下的距離與控件本身Y軸的距離
val ownY = y
//理論中X軸拖動(dòng)的距離
var endX: Float = ownX + differenceValueX
//理論中Y軸拖動(dòng)的距離
var endY: Float = ownY + differenceValueY
//X軸可以拖動(dòng)的最大距離
val maxX: Float = mRootMeasuredWidth - width.toFloat()
//Y軸可以拖動(dòng)的最大距離
val maxY: Float = mRootMeasuredHeight - height.toFloat()
//X軸邊界限制
endX = if (endX < 0) 0F else (if (endX > maxX) maxX else endX)
//Y軸邊界限制
endY = if (endY < 0) 0F else (if (endY > maxY) maxY else endY)
//開始移動(dòng)
x = endX
y = endY
//記錄位置
mLastRawX = mRawX
mLastRawY = mRawY
}
}
MotionEvent.ACTION_UP -> {//手指離開
if (customIsAttach) {
//判斷是否為點(diǎn)擊事件
if (isDrug) {
val center = mRootMeasuredWidth / 2
//自動(dòng)貼邊
if (mLastRawX <= center) {
//向左貼邊
animate()
.setInterpolator(BounceInterpolator())
.setDuration(500)
.x(0F)
.start()
} else {
//向右貼邊
animate()
.setInterpolator(BounceInterpolator())
.setDuration(500)
.x(mRootMeasuredWidth - width.toFloat())
.start()
}
}
}
}
}
}
}
//是否攔截事件
return if (isDrug) isDrug else super.onTouchEvent(event)
}
}
3.2. Java
/**
* 自定義View實(shí)現(xiàn)拖動(dòng)并自動(dòng)吸邊效果
* <p>
* 處理滑動(dòng)和貼邊 {@link #onTouchEvent(MotionEvent)}
* 處理事件分發(fā) {@link #dispatchTouchEvent(MotionEvent)}
* </p>
*
* @attr customIsAttach //是否需要自動(dòng)吸邊
* @attr customIsDrag //是否可拖曳
*/
public class AttachButton extends View {
private float mLastRawX;
private float mLastRawY;
private final String TAG = "AttachButton";
private boolean isDrug = false;
private int mRootMeasuredWidth = 0;
private int mRootMeasuredHeight = 0;
private int mRootTopY = 0;
private boolean customIsAttach;
private boolean customIsDrag;
public AttachButton(Context context) {
this(context, null);
}
public AttachButton(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public AttachButton(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
setClickable(true);
initAttrs(context, attrs);
}
/**
* 初始化自定義屬性
*/
private void initAttrs(Context context, AttributeSet attrs) {
TypedArray mTypedAttay = context.obtainStyledAttributes(attrs, R.styleable.AttachButton);
customIsAttach = mTypedAttay.getBoolean(R.styleable.AttachButton_customIsAttach, true);
customIsDrag = mTypedAttay.getBoolean(R.styleable.AttachButton_customIsDrag, true);
mTypedAttay.recycle();
}
@Override
public boolean dispatchTouchEvent(MotionEvent event) {
super.dispatchTouchEvent(event);
return true;
}
@Override
public boolean onTouchEvent(MotionEvent ev) {
//判斷是否需要滑動(dòng)
if (customIsDrag) {
//當(dāng)前手指的坐標(biāo)
float mRawX = ev.getRawX();
float mRawY = ev.getRawY();
switch (ev.getAction()) {
case MotionEvent.ACTION_DOWN://手指按下
isDrug = false;
//記錄按下的位置
mLastRawX = mRawX;
mLastRawY = mRawY;
ViewGroup mViewGroup = (ViewGroup) getParent();
if (mViewGroup != null) {
int[] location = new int[2];
mViewGroup.getLocationInWindow(location);
//獲取父布局的高度
mRootMeasuredHeight = mViewGroup.getMeasuredHeight();
mRootMeasuredWidth = mViewGroup.getMeasuredWidth();
//獲取父布局頂點(diǎn)的坐標(biāo)
mRootTopY = location[1];
}
break;
case MotionEvent.ACTION_MOVE://手指滑動(dòng)
if (mRawX >= 0 && mRawX <= mRootMeasuredWidth && mRawY >= mRootTopY && mRawY <= (mRootMeasuredHeight + mRootTopY)) {
//手指X軸滑動(dòng)距離
float differenceValueX = mRawX - mLastRawX;
//手指Y軸滑動(dòng)距離
float differenceValueY = mRawY - mLastRawY;
//判斷是否為拖動(dòng)操作
if (!isDrug) {
if (Math.sqrt(differenceValueX * differenceValueX + differenceValueY * differenceValueY) < 2) {
isDrug = false;
} else {
isDrug = true;
}
}
//獲取手指按下的距離與控件本身X軸的距離
float ownX = getX();
//獲取手指按下的距離與控件本身Y軸的距離
float ownY = getY();
//理論中X軸拖動(dòng)的距離
float endX = ownX + differenceValueX;
//理論中Y軸拖動(dòng)的距離
float endY = ownY + differenceValueY;
//X軸可以拖動(dòng)的最大距離
float maxX = mRootMeasuredWidth - getWidth();
//Y軸可以拖動(dòng)的最大距離
float maxY = mRootMeasuredHeight - getHeight();
//X軸邊界限制
endX = endX < 0 ? 0 : endX > maxX ? maxX : endX;
//Y軸邊界限制
endY = endY < 0 ? 0 : endY > maxY ? maxY : endY;
//開始移動(dòng)
setX(endX);
setY(endY);
//記錄位置
mLastRawX = mRawX;
mLastRawY = mRawY;
}
break;
case MotionEvent.ACTION_UP://手指離開
//根據(jù)自定義屬性判斷是否需要貼邊
if (customIsAttach) {
//判斷是否為點(diǎn)擊事件
if (isDrug) {
float center = mRootMeasuredWidth / 2;
//自動(dòng)貼邊
if (mLastRawX <= center) {
//向左貼邊
AttachButton.this.animate()
.setInterpolator(new BounceInterpolator())
.setDuration(500)
.x(0)
.start();
} else {
//向右貼邊
AttachButton.this.animate()
.setInterpolator(new BounceInterpolator())
.setDuration(500)
.x(mRootMeasuredWidth - getWidth())
.start();
}
}
}
break;
}
}
//是否攔截事件
return isDrug ? isDrug : super.onTouchEvent(ev);
}
}
3.3. 自定義屬性
<declare-styleable name="AttachButton">
<!--是否需要自動(dòng)吸邊-->
<attr name="customIsAttach" format="boolean" />
<!--是否可拖曳-->
<attr name="customIsDrag" format="boolean" />
</declare-styleable>
