一、前言
最近需要做一个拖拽回弹或消失的效果，类似QQ未读消息提示的小点点。在参考了几篇博文之后，有了大概思路就直接开始撸代码了。先上效果图，一个普通的ImageView实现拖拽回弹或消失的效果。
二、使用
目前我已经将该功能上传JitPack仓库，各位大大可以在Android 工程中直接使用。
1、在你的工程根build.gradle文件中添加JitPack仓库
allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}
2、 添加依赖（一般是app中的build.gradle）
dependencies {
implementation 'com.github.ilyle:LiteDragView:1.0.0'
}
3、 将你要实现拖拽的控件加入以下语句即可
LiteDragHelper.bind(Context context, View view, @ColorInt int color);
其中，第一个参数是上下文对象，第二个参数是你要实现拖拽的控件，第三个参数是颜色属性@ColorInt（省略则默认红色）。
相信来到这里，各位都已经可以实现该拖拽回弹或消失的功能了。如果各位大大还想更深入了解其中实现的细节的，当然可以继续往下看。
三、思路和实现
1、画圆和画曲线
要实现任意控件添加拖拽效果，首先我们应该解决核心的东西，即拖动出现中间粘性连接的效果。当拖动距离较小时动画回弹，拖拽距离过大时爆炸消失。实现效果如下：
这里面包含了这么三种元素：
- 固定圆：圆心（c1x, c1y）位于手指按压的位置，半径r1随拖动距离变长而变小；
- 拖拽圆：圆心（c2x, c2y）随手指在手机屏幕的位置，半径r2随拖动距离变长而变小（不变也可以）；
- 贝塞尔曲线：连接两圆之间的曲线
接下去给出这三种元素的数学关系图：
关键Android代码（Kotlin）如下：
private val mPath: Path? // 贝塞尔曲线路径
get() {
val distance = getDistanceByPoints(mFixCircle, mDrgCircle) // 获取圆心距
mFixCircle.radius = RADIUS_INIT - distance / 10 // 固定圆半径
mDrgCircle.radius = RADIUS_INIT - distance / 10 // 拖拽圆半径
if (mFixCircle.radius <= RADIUS_MIN) { // 超过拖拽距离则返回mPath为null，即不画粘性效果
mIsEvenOverRange = true // 拖拽过程中曾超过拖拽距离
return null
}
if (!mIsEvenOverRange) { // 拖拽过程中曾超过拖拽距离则返回mPath为null，即不画粘性效果
val path = Path()
val offsetX = (mFixCircle.radius * Math.sin(Math.atan(((mDrgCircle.point.y - mFixCircle.point.y) / (mDrgCircle.point.x - mFixCircle.point.x)).toDouble()))).toFloat()
val offsetY = (mFixCircle.radius * Math.cos(Math.atan(((mDrgCircle.point.y - mFixCircle.point.y) / (mDrgCircle.point.x - mFixCircle.point.x)).toDouble()))).toFloat()
val x1 = mFixCircle.point.x + offsetX
val y1 = mFixCircle.point.y - offsetY
val x2 = mDrgCircle.point.x + offsetX
val y2 = mDrgCircle.point.y - offsetY
val x3 = mDrgCircle.point.x - offsetX
val y3 = mDrgCircle.point.y + offsetY
val x4 = mFixCircle.point.x - offsetX
val y4 = mFixCircle.point.y + offsetY
val bezierPoint = PointF() // 贝塞尔一阶曲线控制点，为起点和终点的中点
bezierPoint.x = (mFixCircle.point.x + mDrgCircle.point.x) / 2
bezierPoint.y = (mFixCircle.point.y + mDrgCircle.point.y) / 2
path.moveTo(x1, y1)
path.quadTo(bezierPoint.x, bezierPoint.y, x2, y2)
path.lineTo(x3, y3)
path.quadTo(bezierPoint.x, bezierPoint.y, x4, y4)
path.lineTo(x1, y1)
path.close()
return path
}
return null
}
override fun onDraw(canvas: Canvas) {
canvas.drawCircle(mDrgCircle.point.x, mDrgCircle.point.y, mDrgCircle.radius, mPaint) // 画拖拽圆
mPath?.let {
canvas.drawCircle(mFixCircle.point.x, mFixCircle.point.y, mFixCircle.radius, mPaint) // 画固定圆
canvas.drawPath(it, mPaint) // 画两圆粘稠连线
}
canvas.drawBitmap(mDrgBmp, mDrgCircle.point.x - mDrgBmp.width / 2, mDrgCircle.point.y - mDrgBmp.height / 2, null) // 在拖拽圆上面画被拖拽View
}
其中圆半径缩减参数我根据实际调试情况设为10（参见上述代码块第4、5行）。该参数越大，表明圆半径缩减的越慢，能拖动的距离越长；该参数越小，表明圆半径缩减的越快，能拖动的距离越短。
该Demo中，初始半径（RADIUS_INIT）为90（px），最小半径（RADIUS_MIN）为2（px）。
2、手势操作
1、按压：
（1） 初始化固定圆和拖拽圆
2、拖动：
（1）更新拖拽圆的圆心；
（2）算出圆心距离，更新两圆半径和贝塞尔曲线路径；
（3）调用invalidate()触发onDraw()，在其中画圆和画曲线；
3、抬手：
（1）固定圆半径 >= 最小半径，即拖动距离不足以拖断，则拖拽圆回弹；
（2）固定圆半径 < 最小半径，即拖动距离足以拖断，则拖拽圆消失；
关键Android代码（Kotlin）如下：
因为是自定义View，所以需要该类（LiteDragView）需要继承View，同时需要实现几个构造方法（使用kotlin的特性真的会减少好多代码）：
class LiteDragView @JvmOverloads constructor(
context: Context,
attrs: AttributeSet? = null,
defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr)
接下去就要重写onTouch方法，并返回true，表示消费此事件，不让事件继续往下传递了。
override fun onTouchEvent(event: MotionEvent?): Boolean {
when (event?.action) {
MotionEvent.ACTION_DOWN -> {
// TODO: 初始化两个圆的圆心坐标和半径
}
MotionEvent.ACTION_MOVE -> {
// TODO: 1、更新拖拽圆的圆心坐标（即手指在手机屏幕的位置）
// TODO: 2、算出圆心距离，并根据距离更新两个圆的半径
// TODO: 3、根据固定圆和拖拽圆的圆心和半径，得到贝塞尔曲线的控制点（两圆心中点）和节点（x1, y1）（x2, y2）（x3, y3）（x4, y4），更新Path
// TODO: 4、当固定圆半径 < 最小半径时，表明拖拽距离够长，此时只要画出拖拽圆即可
// TODO: 5、当固定圆半径 >= 最小半径时，表明拖拽距离不够长，此时画出固定圆、拖拽圆和贝塞尔路径
}
MotionEvent.ACTION_UP -> {
// TODO: 1、当固定圆半径 < 最小半径时，表明拖拽距离够长，在拖拽圆处显示爆炸动画
// TODO: 2、当固定圆半径 >= 最小半径时，表明拖拽距离不够长，此时拖拽圆向固定圆直线移动（使用平动动画的方式）
}
}
return true
}
四、实现任意控件可拖动
上面实现了拖拽回弹或消失最核心的部分，现在要实现任意控件拖拽能出现上述效果，即图1那样的效果。那么应该完成下面几件事情：
- 我们构建一个LiteDragHelper类，并声明bind方法，来作为任意控件实现拖拽的统一入口，给该控件添加触摸事件
object LiteDragHelper {
@JvmStatic
@JvmOverloads
fun bind(context: Context, view: View, @ColorInt color: Int = Color.RED) {
val liteDragView = LiteDragView(context) // 初始化LiteDragView
liteDragView.setOrgView(view)
liteDragView.getPaint().color = color
liteDragView.getOrgView().setOnTouchListener { _, event ->
when (event?.action) {
MotionEvent.ACTION_DOWN -> {
liteDragView.handleActionDown(event)
}
MotionEvent.ACTION_MOVE -> {
liteDragView.handleActionMove(event)
}
MotionEvent.ACTION_UP -> {
liteDragView.handleActionUp(event)
}
}
true
}
}
}
- 按压：
（1）初始化两个圆的圆心和半径；
（2）获得拖拽控件View的镜像
/**
* 处理手势按下操作
*/
fun handleActionDown(event: MotionEvent) {
mWindowManager.addView(this, mParams) // 添加LiteDragView
val location = IntArray(2)
mOrgView.getLocationInWindow(location) // 将mOrgView左上角的坐标存放在location中
val c1x = location[0] + mOrgView.width / 2
val c1y = location[1] + mOrgView.height / 2 - LiteDragUtils.getStatusBarHeight(mContext) // 圆心y坐标，要减去状态栏的高度
initCircle(c1x.toFloat(), c1y.toFloat())
mDrgBmp = getViewBitmap(mOrgView)
}
/**
* 初始化固定圆和拖拽圆
*
* @param x x坐标
* @param y y坐标
* @param radius 半径
*/
private fun initCircle(x: Float, y: Float, radius: Float = RADIUS_DEFAULT) {
RADIUS_INIT = radius
mFixCircle = Circle(PointF(x, y), RADIUS_INIT)
mDrgCircle = Circle(PointF(x, y), RADIUS_INIT)
invalidate()
}
/**
* 获取View的镜像，不能在OnCreate()调用，此时View还没被测量，width和height均为0
*/
private fun getViewBitmap(view: View): Bitmap {
val bitmap = Bitmap.createBitmap(view.width, view.height, Bitmap.Config.ARGB_8888)
val canvas = Canvas(bitmap)
view.draw(canvas)
return bitmap
}
- 拖动：
（1）原控件设为不可见；
（2）更新拖拽圆的圆心；
/**
* 处理手势移动操作
*/
fun handleActionMove(event: MotionEvent) {
if (mOrgView.visibility == View.VISIBLE) {
mOrgView.visibility = View.INVISIBLE
}
updateDrgCircle(event.rawX, event.rawY - LiteDragUtils.getStatusBarHeight(mContext))
}
/**
* 更新拖拽圆
*
* @param x 拖拽圆的圆心x坐标
* @param y 拖拽圆的圆心y坐标
*/
private fun updateDrgCircle(x: Float, y: Float) {
mDrgCircle.point.set(x, y)
invalidate() // 触发onDraw()
}
- 抬手：
（1）固定圆半径 >= 最小半径，即拖动距离不足以拖断，则将原控件的镜像移动回原控件位置；
（2）固定圆半径 < 最小半径，即拖动距离足以拖断，则移除原控件的快照，并手指位置显示爆炸效果
/**
* 处理手势抬起操作
*/
fun handleActionUp(event: MotionEvent) {
if (mFixCircle.radius < RADIUS_MIN) { // 超过拖拽距离，消失
mDragListener.onBomb(mDrgCircle.point)
} else { // 没超过拖拽距离，回弹
val animator = ObjectAnimator.ofFloat(0f, 1f)
animator.duration = 300
val startPoint = mDrgCircle.point
val endPoint = mFixCircle.point
animator.addUpdateListener { animation ->
val percent = animation.animatedValue as Float
val point = LiteDragUtils.getPointByPercent(startPoint, endPoint, percent)
updateDrgCircle(point.x, point.y)
}
animator.interpolator = OvershootInterpolator(3f)
animator.start()
animator.addListener(object : AnimatorListenerAdapter() {
override fun onAnimationEnd(animation: Animator) {
mIsEvenOverRange = false
mDragListener.onRestore() // 当动画结束的时候,重新让View可拖动
}
})
}
}
mDragListener = object : OnDragListener {
override fun onBomb(pointF: PointF) {
// 移除消息气泡贝塞尔View,同时添加一个爆炸的View动画(帧动画)
mWindowManager.removeView(this@LiteDragView)
mBombView.setBackgroundResource(R.drawable.anim_bomb)
val bombDrawable = mBombView.background as AnimationDrawable
mBombView.x = pointF.x - bombDrawable.intrinsicWidth / 2
mBombView.y = pointF.y - bombDrawable.intrinsicHeight / 2
mWindowManager.addView(mBombLayout, mParams)
bombDrawable.start()
mBombView.postDelayed({
mWindowManager.removeView(mBombLayout) // 动画执行完毕,把爆炸布局及时从WindowManager移除
}, 1000)
}
override fun onRestore() {
mWindowManager.removeView(this@LiteDragView)
mOrgView.visibility = View.VISIBLE
}
}
反思和展望
后面可能会加上固定圆的初始半径和被拖拽控件成比例，这样避免“控件大，拖拽短”的情况。同时，这是我的第一篇简书博文，说实话很紧张，若文中有任何错误，请各位大大批评指正。
扫一扫
128
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
