高仿qq‘一键下班’—让你的view‘黏’起来，高仿view,最近在学习自定义控件的知
高仿qq‘一键下班’—让你的view‘黏’起来，高仿view,最近在学习自定义控件的知
qq手机客户端自5.0起有一个‘一键下班’的功能，qq聊天的消息数view可以拖拽，有一种黏黏的视觉效果，让手机控件更加生动，也增加了交互时的趣味性。最近在学习自定义控件的知识，所以试着实现了一下这个功能，来看看整体的一个预览效果： 
然后看一下view的拖动特写： 
主要要实现的功能：
显示消息的view被手指按住的时候随着手指移动而移动，如果触点和原位置的距离在某个距离A内，移动的view和原位置之间仍然有些‘黏黏的东西’黏住，如果距离大于A，view随手指移动而没有中间的连接部分。然后是手指抬起的情况，如果手指抬起的点到原位置距离小于距离B(B小于A)，view会立即回到初始位置，这个时候如果连接还没有断开，view也会回到初始位置但是会有一个回弹的效果，如果手指抬起点到原位置距离大于B，view就不会回到原位置，且在手指抬起的位置有一个爆炸的效果。如果移除了总消息数的view，消息列表的所有view都会在原位置一一爆炸消失。
下边分析一下实现逻辑：
工具分析下qq地布局，这个显示消息数的view是Textview 
，但是拖动的时候是这个样子的： 
发现这个textview消失了，可见拖动的时候的绘制不是发生在这个textview上的，当然拖动发生得时候view的形状改变也不好处理。
又看了下整个布局的父控件 
我靠，居然是复写的view，而且还是个容器view，直觉里边有海量的代码，虽然ViewGroup可以聊作参考，但是这又得花费哥们儿大量时间，而且有点偏离目标，只好另辟蹊径。
那么重点回到了刚才拖动的时候textview的消失，既然这玩意消失了，那么拖动的是什么鬼？直觉是海量代码容器view里边对这个拖动事件做了处理，但是我暂时还不太好复写这样一个view，于是我想到了一个替代品，使用一个占满整个布局的一个子view来代替。按住的时候隐藏textview，同时让这个替代的view显示，并接着处理以后的事件。但是有个问题当手指移出这个textview按在其他控件上的时候又会被别的控件把手指的事件拦截掉了。所以这个事件的处理应该是在最最开始就被处理掉，这个由涉及到了Android的事件分发机制，这个参考一个很直观的介绍博客事件分发，所以对事件的处理就放在了activity的dispatchTouchEvent方法中。
那么问题来了怎么判定控件触点是不是落在view内，这用到了View类的一个方法getLocationInWindow，传入一个长度为2的数组，调用之后会得到view的位置的横纵坐标，控件的宽高又可以get得到，所以就可以判断触点是不是落在了这个view内部，决定要不要做接下来的处理。
下边讲一下关键的实现细节
绘制逻辑参考了这篇文章QQ手机版 5.0“一键下班”设计小结，这个主要是一些高中几何的知识，绘制的API可以参考一下aige的自定义控件专栏（强烈推荐），也可以看一下稍后给出的demo。
SnotView的一些主要属性
private final long KICK_BACK_DURATION = 200;// 鼻涕回弹的时长 单位ms
private final int BOOM_DURATION = 300;// 爆炸效果时长
public float oriX, oriY;// “钉住”的鼻涕部分的中心点
private int oriR;// “钉住”的鼻涕部分的中心点
public int MAX_DISTANCE;// 最大距离 超过这个距离鼻涕被扯断
private float fingerX, fingerY;// 手指按住的点 坐标
private int fingerR;// 拖出来的园的半径
private int snotColor;// 鼻涕的颜色
private Paint snotPaint;// 鼻涕画笔
private Paint textPaint;// 文字画笔
private int textColor;// 文字颜色
private String text;// 文字内容
private double newR;// 鼻涕被拖动时候 钉住部分的半径 变化的
private double dist;// 手指和钉住点之间的距离
// newR变化区间
private int oriRMax;// “钉住”的鼻涕部分的最大半径
private int oriRMin;// “钉住”的鼻涕部分做小半径
private float textSize;// 文字的大小
// 手指松开的一刻记录的坐标
private float recordX;
private float recordY;//
private double SAFE_DISTANCE;// 安全距离
volatile boolean hasCut;// 鼻涕是不是被扯断
private float width, height;// 鼻涕的宽高
private int[] imgs = new int[] { R.drawable.idp, R.drawable.idq, R.drawable.idr, R.drawable.ids, R.drawable.idt };// 动画资源
private boolean boombing;// 是不是正在播放爆炸动画
private Bitmap bitmap;// 动画帧资源
Handler handler = new Handler();
private DragCallback callback;而我们绘制的内容是要和触摸到的view相关联的，于是有了以下这个初始化方法。参数exHeigh是ActionBar加上状态栏的高度，方便我们计算精确的坐标。注意里边有些属性值的确定相较于qq并不是确切的。
private void copyPropertiesOf(TextView view, int exHeigh) {
int[] location = new int[2];
view.getLocationInWindow(location);
textSize = view.getTextSize();
ColorDrawable cDrawable = (ColorDrawable) view.getBackground();
snotColor = cDrawable.getColor();
ColorStateList clist = view.getTextColors();
textColor = clist.getDefaultColor();
width = view.getWidth();
height = view.getHeight();
oriR = view.getHeight() / 2;
oriX = location[0] + view.getWidth() / 2;
oriY = location[1] + oriR - exHeigh;
text = view.getText().toString();
fingerR = oriR * 5 / 7;
oriRMax = oriR;
oriRMin = oriR * 2 / 5;
MAX_DISTANCE = oriR * 6;
SAFE_DISTANCE = oriR * 5;
boombing = false;
hasCut = false;
setBackgroundColor(Color.parseColor("#00000000"));
}最后一句话setBackgroundColor(Color.parseColor(“#00000000”));使背景透明，因为我们的SnotView是在所有控件之上的，拖动的时候底下的部分也需要被看到。
看一看绘制方法，主要还是参考之前提到的那篇文章，有难度的可能是一些简单的几何运算，因为手机屏幕上的坐标系和几何坐标系不同，略微烧脑，不过相信对大多数人来说，把这个缕清应该不是问题。
protected void onDraw(Canvas canvas) {
if (boombing) {
if (bitmap != null)
canvas.drawBitmap(bitmap, fingerX - oriR, fingerY - oriR, snotPaint);
} else {
drawNowOriCircleAndSnot(canvas);
drawMovingObject(canvas);
}
}
/**
* @Description 画跟随手指移动的部分
*/
private void drawMovingObject(Canvas canvas) {
RectF rect1 = new RectF(fingerX - width / 2, fingerY - height / 2, fingerX + width / 2, fingerY + height / 2);
canvas.drawRoundRect(rect1, oriR, oriR, snotPaint);
float dX = (textPaint.measureText(text) / 2);
float dY = -((textPaint.descent() + textPaint.ascent()) / 2);
canvas.drawText(text, fingerX - dX, fingerY + dY, textPaint);
}
/**
* 画出移动状态的原始的圆形 和中间的鼻涕
*
* @param canvas
*/
private void drawNowOriCircleAndSnot(Canvas canvas) {
dist = getDistance(fingerX, fingerY, oriX, oriY);
if (dist <= MAX_DISTANCE && !hasCut) {
double factor = dist / MAX_DISTANCE;
newR = oriRMax - (oriRMax - oriRMin) * factor;
canvas.drawCircle(oriX, oriY, (float) newR, snotPaint);
drawSide(canvas);
}
}
/**
* 绘制两边略带弧度的线 即手指按点和原位置之间‘粘稠’的部分
*
* @param canvas
*/
private void drawSide(Canvas canvas) {
double cos = getCons(fingerX, fingerY, oriX, oriY);
double sin = Math.sqrt(1 - cos * cos);
double dX1 = newR * cos;
double dY1 = newR * sin;
double dX2 = fingerR * cos;
double dY2 = fingerR * sin;
Point[] p = new Point[2];
Point[] p2 = new Point[2];
Point[] c = new Point[2];
c[0] = new Point((fingerX + oriX) / 2, (fingerY + oriY) / 2);
c[1] = c[0];
if ((fingerY >= oriY && fingerX <= oriX) || (fingerY <= oriY && fingerX >= oriX)) {
p[0] = new Point(oriX + dX1, oriY + dY1);
p[1] = new Point(oriX - dX1, oriY - dY1);
p2[0] = new Point(fingerX + dX2, fingerY + dY2);
p2[1] = new Point(fingerX - dX2, fingerY - dY2);
} else if (fingerY >= oriY && fingerX >= oriX || (fingerY <= oriY && fingerX <= oriX)) {
p[0] = new Point(oriX - dX1, oriY + dY1);
p[1] = new Point(oriX + dX1, oriY - dY1);
p2[0] = new Point(fingerX - dX2, fingerY + dY2);
p2[1] = new Point(fingerX + dX2, fingerY - dY2);
}
drawStickyShape(canvas, p, p2, c);
}
/**
* 贝塞尔曲线围起来的梯形
*/
public void drawStickyShape(Canvas canvas, Point[] p, Point[] p2, Point[] c) {
Path path = new Path();
path.moveTo((float) p[0].x, (float) p[0].y);
path.quadTo((float) c[0].x, (float) c[0].y, (float) p2[0].x, (float) p2[0].y);
path.lineTo((float) p2[1].x, (float) p2[1].y);
path.quadTo((float) c[1].x, (float) c[1].y, (float) p[1].x, (float) p[1].y);
path.lineTo((float) p[0].x, (float) p[0].y);
canvas.drawPath(path, snotPaint);
}事件的处理因为事件的来源不是SnotView本身，自然就不能在onTouchEvent方法里写。以下这个方法处理来自activity的dispatchTouchEvent事件
public synchronized void handlerTvTouchEvent2(MotionEvent event, View v, int exHeight) {
float x = event.getX();
float y = event.getY();
this.fingerX = x;
this.fingerY = y - exHeight;
this.v = v;
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
setProperty((TextView) v, exHeight);
setVisibility(View.VISIBLE);
break;
case MotionEvent.ACTION_UP:
handleFingerUp();
break;
case MotionEvent.ACTION_MOVE:
doWhenFingerMove();
break;
}
}下边讲讲手指抬起的时候回弹动画的处理，看qq的效果我首先想到的是使用属性动画，有一个overShoot的效果，但是那个回弹的次数比qq我们要的效果少一次，于是我们自定义一个插值器来实现这种效果。
/**
*
* @Description 回弹
*/
private void kickback() {
recordX = fingerX;
recordY = fingerY;
ValueAnimator backAnimator = ValueAnimator.ofFloat((float) dist, 0);
OvershootInterpolator inter = new MyQQDragInterprator();
// changeTension(inter, 4);
backAnimator.setInterpolator(inter);
backAnimator.setDuration(KICK_BACK_DURATION);
backAnimator.addUpdateListener(new AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
doWhenKickback(animation);
}
});
backAnimator.addListener(new AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
}
@Override
public void onAnimationRepeat(Animator animation) {
}
@Override
public void onAnimationEnd(Animator animation) {
setVisibility(View.GONE);
if (callback != null)
callback.onFree();
}
@Override
public void onAnimationCancel(Animator animation) {
}
});
backAnimator.start();
}
protected void doWhenKickback(ValueAnimator animation) {
float value = Float.parseFloat(animation.getAnimatedValue().toString());//
final double cos = getCons(fingerX, fingerY, oriX, oriY);
final double sin = Math.sqrt(1 - cos * cos);
if (recordX >= oriX && recordY >= oriY) {
fingerX = (float) (oriX + value * sin);
fingerY = (float) (oriY + value * cos);
} else if (recordX < oriX && recordY > oriY) {
fingerX = (float) (oriX - value * sin);
fingerY = (float) (oriY + value * cos);
} else if (recordX > oriX && recordY < oriY) {
fingerX = (float) (oriX + value * sin);
fingerY = (float) (oriY - value * cos);
} else {
fingerX = (float) (oriX - value * sin);
fingerY = (float) (oriY - value * cos);
}
postInvalidate();
}
/**
* @Description: 回弹的时候的差值器
* @author monkey-d-wood
*/
private class MyQQDragInterprator extends OvershootInterpolator {
@Override
public float getInterpolation(float t) {
t -= 1.0f;
float answer1 = (float) Math.sin(Math.PI * 5 / 2 * t) * t;
return 1 - answer1;
}
}下边讲讲activity中需要做的处理，在布局文件中加入我们的自定义view并让其占满整个布局，并让其隐藏
<com.sovnem.qqbardrag.SnotView android:id="@+id/snotview" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#efefef" android:visibility="gone" />
在dispatchTouchEvent方法中处理手指事件。
@Override
public boolean dispatchTouchEvent(MotionEvent ev) {
getHeights();
tView.getLocationInWindow(location);
float x = ev.getX();
float y = ev.getY();
if (ev.getAction() == MotionEvent.ACTION_DOWN && x > location[0] && x < location[0] + tView.getWidth() && y > location[1] && y < location[1] + tView.getHeight()) {
isIn = true;
}
if (ev.getAction() == MotionEvent.ACTION_UP) {
isIn = false;
touchView.handlerTvTouchEvent2(ev, tView, exHeight);
}
if (isIn) {
touchView.handlerTvTouchEvent2(ev, tView, exHeight);
return true;
}
return super.dispatchTouchEvent(ev);
}如果是在布局中使用了Listview，在dispatchTouchEvent中需要一一判断手指触摸的到底是哪个view。如何拿到这些view？在adapter的getView方法中，将这些Textview加一个标记(Tag)，监听listview的OnScroll事件，获取当前页面所有可见的item索引，通过索引和tag的一一对应关系，通过索引找到Textview，在做手指触点的判断处理。
@Override
public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
firstVisiable = firstVisibleItem;
visiableCout = visibleItemCount;
}总结
其实后来发现跟qq的拖动还是有一些差别的，也可能会有些bug，所以这个东西离实际使用还有一些差距。这篇博客目的是给出一个实现的思路，文中有纰漏和错误还望指正，上边没讲到的细节可以在随后的demo中查看。
如果这篇博客激发了你的某些灵感或解决了你的某些困惑，那我深感荣幸。
demo地址http://download.csdn.net/detail/u012293381/8933109
作者：LOSTINCODEs
用户评论