在RecyclerView中集成QQ汽泡一
上次已经实现了QQ汽泡的自定义View的效果【http://www.cnblogs.com/webor2006/p/7726174.html】，接着再将它应用到列表当中，这样才算得上跟QQ的效果匹配，下面开始：
RecyclerView的列表实现：
至于RecyclerView是如何使用的这里不过多讨论，不过之后有时间会对它的使用进行一个剖析滴，这里快速实现一个列表既可，如下：
要想使用它首先需要在gradle配置中添加它的依赖，如下:
然后在布局中进行使用：
然后准备每个列表条目的布局：
其汽泡背景定义如下：
接着就可以给RecyclerView去绑定adapter并设置数据进行列表显示了：
MsgAdapter：
public class MsgAdapter extends Adapter<MsgAdapter.MyViewHolder> { private List<Msg> msgList; public MsgAdapter(List<Msg> msgList) { this.msgList = msgList; } @Override public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_msg_view, null); return new MyViewHolder(view); } @Override public void onBindViewHolder(MyViewHolder holder, int position) { holder.tv_title.setText(msgList.get(position).title); int unReadMsgCount = msgList.get(position).unReadMsgCount; if (unReadMsgCount == 0) {//如果未读消息数为0则将汽泡隐藏 holder.tv_unReadMsgCount.setVisibility(View.INVISIBLE); } else { holder.tv_unReadMsgCount.setVisibility(View.VISIBLE); holder.tv_unReadMsgCount.setText(unReadMsgCount + ""); } } @Override public int getItemCount() { return msgList.size(); } public static class MyViewHolder extends RecyclerView.ViewHolder { public TextView tv_title; public TextView tv_unReadMsgCount; public MyViewHolder(View itemView) { super(itemView); tv_title = (TextView) itemView.findViewById(R.id.tv_title); tv_unReadMsgCount = (TextView) itemView.findViewById(R.id.tv_unReadMsgCount); } } }
编译运行：
呃~~貌似显示不如预期，明显定义的条目布局的宽度是match_parent的，那为啥显示的效果却是wrap_content的呢？这个一百度就有网上的回答，具体原因这里不进行过多的探讨，这里按照网上的解答来进行修正：
再次编译运行：
还是存在bug，也就是刚进来的时候还是wrap_content效果，但是一滑动列表之后就变成march_parent的了，那这又是为啥呢？继续百度找到了最终修复方案:
那修改代码如下:
运行看效果:
ok,列表已经准备好了，继续下一步处理。
准备工作：
这一步来处理将GooView显示在列表当中，但是在显示之前，还得对咱们自定义的GooView进行一些额外的处理：
①、绘制文本：
为什么要绘制文本呢？这里分析一下最终的效果就可以知晓啦：
所以修改GooView代码，先写好绘制文本的框架：
/** * Goo：是粘性的意思，QQ汽泡效果 * 先在拖拽圆上能显示出文本 */ public class GooView extends View { /* 拖拽圆移动的最大距离 */ private static final float MAX_DRAG_DISTANCE = 200f; /* 固定圆缩放的最小半径 */ private static final float MIN_STABLE_RADIUS = 5f; private Paint paint; /* 固定圆的圆心 */ private PointF stableCenter = new PointF(200f, 200f); /* 固定圆的半径 */ private float stableRadius = 20f; /* 固定圆的两个附着点 */ private PointF[] stablePoints; /* 拖拽圆的圆心 */ private PointF dragCenter = new PointF(100f, 100f); /* 拖拽圆的半径 */ private float dragRadius = 20f; /* 拖拽圆的两个附着点 */ private PointF[] dragPoints; /* 绘制中间不规则的路径 */ private Path path; /* 贝塞尔曲线的控制点 */ private PointF controlPoint; /* 状态栏高度 */ private int statusBarHeight; /* 是否拖拽已经超出最大范围了，超出则不绘制拖拽圆和中间图形实现拉断效果 */ private boolean isOutOfRange = false; /* 是否全部消失，如果true则所有图形消失 */ private boolean isDisappear = false; /* 在拖拽圆上显示的文本，由外部传进来 */ private String text; public GooView(Context context) { this(context, null); } public GooView(Context context, @Nullable AttributeSet attrs) { this(context, attrs, 0); } public GooView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(); } private void init() { paint = new Paint(); paint.setAntiAlias(true); paint.setColor(Color.RED); path = new Path(); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); canvas.save(); canvas.translate(0, -statusBarHeight);//优雅的解决拖拽位置不是在圆心的问题，不用在触摸事件中单独处理了 //处理随着拖拽圆和固定圆的圆心距离越来越大，固定圆的半径越来越小：拖拽圆和固定圆圆心的距离百分比变化==固定圆半径的百分比变化 float distance = GeometryUtil.getDistanceBetween2Points(dragCenter, stableCenter);//获得两圆心的距离 float percent = distance / MAX_DRAG_DISTANCE;//计算百分比 float tempRadius = GeometryUtil.evaluateValue(percent, stableRadius, MIN_STABLE_RADIUS);//根据百分比来动态计算出固定圆的半径 if (tempRadius < MIN_STABLE_RADIUS)//处理最小半径 tempRadius = MIN_STABLE_RADIUS; if (!isDisappear) { if (!isOutOfRange) {//只有没有超出范围才绘制固定圆和中间图形 //绘制中间图形,直接基于两圆来绘制，其步骤为： //一、基于两圆来计算真实的附着点与曲线的控制点 float dx = dragCenter.x - stableCenter.x; float dy = dragCenter.y - stableCenter.y; double linek = 0; if (dx != 0) {//被除数不能为0，防止异常 linek = dy / dx; } //得到实际的附着点 dragPoints = GeometryUtil.getIntersectionPoints(dragCenter, dragRadius, linek); stablePoints = GeometryUtil.getIntersectionPoints(stableCenter, tempRadius, linek); controlPoint = GeometryUtil.getMiddlePoint(dragCenter, stableCenter); //二、开始绘制中间图形 // 1、移动到固定圆的附着点1; path.moveTo(stablePoints[0].x, stablePoints[0].y); // 2、向拖拽圆附着点1绘制贝塞尔曲线; path.quadTo(controlPoint.x, controlPoint.y, dragPoints[0].x, dragPoints[0].y); // 3、向拖拽圆的附着点2绘制直线; path.lineTo(dragPoints[1].x, dragPoints[1].y); // 4、向固定圆的附着点2绘制贝塞尔曲线; path.quadTo(controlPoint.x, controlPoint.y, stablePoints[1].x, stablePoints[1].y); // 5、闭合; path.close(); canvas.drawPath(path, paint); path.reset();//解决滑动时路径重叠的问题 ////绘制固定圆 canvas.drawCircle(stableCenter.x, stableCenter.y, tempRadius, paint); } //绘制拖拽圆 canvas.drawCircle(dragCenter.x, dragCenter.y, dragRadius, paint); drawText(canvas); } canvas.restore(); } /** * 绘制文本 */ private void drawText(Canvas canvas) { //TODO } @Override public boolean onTouchEvent(MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_DOWN: isOutOfRange = false;//方便调试 isDisappear = false;//方便调试 //event.getX();//点击的点距离当前自定义控件的左边缘的距离 float rawX = event.getRawX();//点击的点距离当前手机屏幕的左边缘的距离 float rawY = event.getRawY()/* - statusBarHeight*/; dragCenter.set(rawX, rawY); invalidate(); break; case MotionEvent.ACTION_MOVE: rawX = event.getRawX(); rawY = event.getRawY(); dragCenter.set(rawX, rawY); //当拖拽超出一定范围后，固定圆和中间图形都消失了，其"消失了"用程序来说就是在onDraw()中不绘制某一段了 //判断拖拽的距离，判断距离是否超出最大距离 float distance = GeometryUtil.getDistanceBetween2Points(stableCenter, dragCenter); if (distance > MAX_DRAG_DISTANCE) { //当超出最大距离则不再对固定圆和中间图形进行绘制 isOutOfRange = true; } invalidate(); break; case MotionEvent.ACTION_UP: distance = GeometryUtil.getDistanceBetween2Points(stableCenter, dragCenter); //判断在move的时候是否超出过最大范围 if (isOutOfRange) { //判断up的时候是否在最大范围外 if (distance > MAX_DRAG_DISTANCE) { isDisappear = true; } else { //up未超出最大范围，则将拖拽圆的圆心设置成固定圆圆心 dragCenter.set(stableCenter.x, stableCenter.y); } } else { //move、up均未超出最大范围这时得有一个回弹还原效果:从拖拽抬手处到固定圆圆心之间来一个顺间平移动画，当到达固定圆 //圆心之后回弹一下 final PointF tempPointF = new PointF(dragCenter.x, dragCenter.y);//需要将up的瞬间拖拽圆的坐标记录下来以便进行平移动画 ValueAnimator va = ValueAnimator.ofFloat(distance, 0); va.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { // float animatedValue = (float) animation.getAnimatedValue();//变化的具体值 float percent = animation.getAnimatedFraction();//变化的百分比 dragCenter = GeometryUtil.getPointByPercent(tempPointF, stableCenter, percent); invalidate(); } }); //动画插值器来实现回弹效果,然后回到原位 // va.setInterpolator(new OvershootInterpolator()); va.setInterpolator(new OvershootInterpolator(3));//其中回弹多少可以传参控制 va.setDuration(500); va.start(); } invalidate(); break; } //return super.onTouchEvent(event); return true;//表示当前控件想要处理事件 } @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); statusBarHeight = getStatusBarHeight(this); } /** * 获取状态栏高度 * * @param view * @return */ private int getStatusBarHeight(View view) { Rect rect = new Rect(); //获取视图对应的可视范围，会把视图的左上右下的数据传入到一个矩形中 view.getWindowVisibleDisplayFrame(rect); return rect.top; } public void setText(String text) {//具体的文本值由外面传过来 this.text = text; } }
而看一下绘制文本的函数：
我们知道绘制文本的标准点是在左下角，那问题来了，如何将绘制的文本放到拖拽圆心中间呢？所以用下图来得出计算公式:
如何求得这个左下角的点呢？其实比较简单：
所以x的值=拖拽圆圆心横坐标 - 文本宽度 * 0.5f，同理y的值=拖拽圆圆心纵坐标 + 文本高度 * 0.5f
那问题又来了，如何计算文本的这个矩形宽高呢？其实这个已经在之前学习过，有相应的API可以得到，如下：
/** * Goo：是粘性的意思，QQ汽泡效果 * 先在拖拽圆上能显示出文本 */ public class GooView extends View { /* 拖拽圆移动的最大距离 */ private static final float MAX_DRAG_DISTANCE = 200f; /* 固定圆缩放的最小半径 */ private static final float MIN_STABLE_RADIUS = 5f; private Paint paint; /* 固定圆的圆心 */ private PointF stableCenter = new PointF(200f, 200f); /* 固定圆的半径 */ private float stableRadius = 20f; /* 固定圆的两个附着点 */ private PointF[] stablePoints; /* 拖拽圆的圆心 */ private PointF dragCenter = new PointF(100f, 100f); /* 拖拽圆的半径 */ private float dragRadius = 20f; /* 拖拽圆的两个附着点 */ private PointF[] dragPoints; /* 绘制中间不规则的路径 */ private Path path; /* 贝塞尔曲线的控制点 */ private PointF controlPoint; /* 状态栏高度 */ private int statusBarHeight; /* 是否拖拽已经超出最大范围了，超出则不绘制拖拽圆和中间图形实现拉断效果 */ private boolean isOutOfRange = false; /* 是否全部消失，如果true则所有图形消失 */ private boolean isDisappear = false; /* 在拖拽圆上显示的文本，由外部传进来 */ private String text; /* 用来计算文本宽度的"空壳"矩形 */ private Rect textRect; public GooView(Context context) { this(context, null); } public GooView(Context context, @Nullable AttributeSet attrs) { this(context, attrs, 0); } public GooView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(); } private void init() { paint = new Paint(); paint.setAntiAlias(true); paint.setColor(Color.RED); path = new Path(); textRect = new Rect(); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); canvas.save(); canvas.translate(0, -statusBarHeight);//优雅的解决拖拽位置不是在圆心的问题，不用在触摸事件中单独处理了 //处理随着拖拽圆和固定圆的圆心距离越来越大，固定圆的半径越来越小：拖拽圆和固定圆圆心的距离百分比变化==固定圆半径的百分比变化 float distance = GeometryUtil.getDistanceBetween2Points(dragCenter, stableCenter);//获得两圆心的距离 float percent = distance / MAX_DRAG_DISTANCE;//计算百分比 float tempRadius = GeometryUtil.evaluateValue(percent, stableRadius, MIN_STABLE_RADIUS);//根据百分比来动态计算出固定圆的半径 if (tempRadius < MIN_STABLE_RADIUS)//处理最小半径 tempRadius = MIN_STABLE_RADIUS; if (!isDisappear) { if (!isOutOfRange) {//只有没有超出范围才绘制固定圆和中间图形 //绘制中间图形,直接基于两圆来绘制，其步骤为： //一、基于两圆来计算真实的附着点与曲线的控制点 float dx = dragCenter.x - stableCenter.x; float dy = dragCenter.y - stableCenter.y; double linek = 0; if (dx != 0) {//被除数不能为0，防止异常 linek = dy / dx; } //得到实际的附着点 dragPoints = GeometryUtil.getIntersectionPoints(dragCenter, dragRadius, linek); stablePoints = GeometryUtil.getIntersectionPoints(stableCenter, tempRadius, linek); controlPoint = GeometryUtil.getMiddlePoint(dragCenter, stableCenter); //二、开始绘制中间图形 // 1、移动到固定圆的附着点1; path.moveTo(stablePoints[0].x, stablePoints[0].y); // 2、向拖拽圆附着点1绘制贝塞尔曲线; path.quadTo(controlPoint.x, controlPoint.y, dragPoints[0].x, dragPoints[0].y); // 3、向拖拽圆的附着点2绘制直线; path.lineTo(dragPoints[1].x, dragPoints[1].y); // 4、向固定圆的附着点2绘制贝塞尔曲线; path.quadTo(controlPoint.x, controlPoint.y, stablePoints[1].x, stablePoints[1].y); // 5、闭合; path.close(); canvas.drawPath(path, paint); path.reset();//解决滑动时路径重叠的问题 ////绘制固定圆 canvas.drawCircle(stableCenter.x, stableCenter.y, tempRadius, paint); } //绘制拖拽圆 canvas.drawCircle(dragCenter.x, dragCenter.y, dragRadius, paint); drawText(canvas); } canvas.restore(); } /** * 绘制文本 */ private void drawText(Canvas canvas) { //获得文本的边界：原理是将文本套入一个"完壳"矩形，这个矩形的宽高是文本的距离 paint.getTextBounds(this.text, 0, text.length(), textRect); float x = dragCenter.x - textRect.width() * 0.5f;//为拖拽圆圆心横坐标 - 文本宽度 * 0.5f float y = dragCenter.y + textRect.height() * 0.5f;//为拖拽圆圆心纵坐标 + 文本高度 * 0.5f } @Override public boolean onTouchEvent(MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_DOWN: isOutOfRange = false;//方便调试 isDisappear = false;//方便调试 //event.getX();//点击的点距离当前自定义控件的左边缘的距离 float rawX = event.getRawX();//点击的点距离当前手机屏幕的左边缘的距离 float rawY = event.getRawY()/* - statusBarHeight*/; dragCenter.set(rawX, rawY); invalidate(); break; case MotionEvent.ACTION_MOVE: rawX = event.getRawX(); rawY = event.getRawY(); dragCenter.set(rawX, rawY); //当拖拽超出一定范围后，固定圆和中间图形都消失了，其"消失了"用程序来说就是在onDraw()中不绘制某一段了 //判断拖拽的距离，判断距离是否超出最大距离 float distance = GeometryUtil.getDistanceBetween2Points(stableCenter, dragCenter); if (distance > MAX_DRAG_DISTANCE) { //当超出最大距离则不再对固定圆和中间图形进行绘制 isOutOfRange = true; } invalidate(); break; case MotionEvent.ACTION_UP: distance = GeometryUtil.getDistanceBetween2Points(stableCenter, dragCenter); //判断在move的时候是否超出过最大范围 if (isOutOfRange) { //判断up的时候是否在最大范围外 if (distance > MAX_DRAG_DISTANCE) { isDisappear = true; } else { //up未超出最大范围，则将拖拽圆的圆心设置成固定圆圆心 dragCenter.set(stableCenter.x, stableCenter.y); } } else { //move、up均未超出最大范围这时得有一个回弹还原效果:从拖拽抬手处到固定圆圆心之间来一个顺间平移动画，当到达固定圆 //圆心之后回弹一下 final PointF tempPointF = new PointF(dragCenter.x, dragCenter.y);//需要将up的瞬间拖拽圆的坐标记录下来以便进行平移动画 ValueAnimator va = ValueAnimator.ofFloat(distance, 0); va.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { // float animatedValue = (float) animation.getAnimatedValue();//变化的具体值 float percent = animation.getAnimatedFraction();//变化的百分比 dragCenter = GeometryUtil.getPointByPercent(tempPointF, stableCenter, percent); invalidate(); } }); //动画插值器来实现回弹效果,然后回到原位 // va.setInterpolator(new OvershootInterpolator()); va.setInterpolator(new OvershootInterpolator(3));//其中回弹多少可以传参控制 va.setDuration(500); va.start(); } invalidate(); break; } //return super.onTouchEvent(event); return true;//表示当前控件想要处理事件 } @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); statusBarHeight = getStatusBarHeight(this); } /** * 获取状态栏高度 * * @param view * @return */ private int getStatusBarHeight(View view) { Rect rect = new Rect(); //获取视图对应的可视范围，会把视图的左上右下的数据传入到一个矩形中 view.getWindowVisibleDisplayFrame(rect); return rect.top; } public void setText(String text) { this.text = text; } }
那接下来就可以实现绘制文本的方法啦:
另外由于目前画笔是红颜色的，而拖拽圆的颜色也是红色，所以需要改变一下画笔的颜色如下:
这时代码已经写完了，接下来测试是否效果，先在主布局文件中声明一下它，然后在Activity中去给它设置一个文字，如下:
编译运行:
嗯~~确实是达到预期的效果了，但是文本的字体大写太小了，下面来改一下：
再次运行:
②、修改GooView的位置：
接着还有一个准备工作需要处理，还是先看一下最终效果：
点击item中的汽泡view时实际是将我们自定义的GooView显示出来，然后将item的汽泡view隐藏从而达到最终效果，而是点到哪个位置，我们的GooView就显示在哪，而目前我们的拖拽圆和固定圆的圆心是写死的如下：
所以说需要一个方法可以动态去改变这两个圆心的值，如下：
这时再做下测试：
编译运行：
再更新一个位置：
编译运行：
至此GooView的准备工作就已经到位了，还是将测试代码进行还原，继续下一个步骤。
为TextView设置触摸监听：
由于在点击Item中的汽泡TextView是需要将它隐藏并将我们写的GooView显示起来，另外还有一个滑动事件，所以需要给TextView设置触摸监听，如下：
但是这样写在每一次bindView时都会new一个监听，这不是一种好的写法，应该只初始化一次既可，所以可以将这个匿名监听提出来，如下：
这时运行看下监听是否打印出来了：
利用WindowManager添加GooView：
在DOWN的时候应该将Item的TextView隐藏并添加我们的GooView，所以修改DOWN事件：
接下来将咱们的GooView添加进来，如何添加呢？用WindowManager，像360安全卫士显示的悬浮效果其实就是用它来做的，在实际商用中也大量被用到，而像我们经常用的Toast也是用它，因为它允许在任务界面上添加一个额外的视图，修改代码如下：
而此时这个监听就需要传一个Context过来了，所以需要修改调用代码：
而在WindowManager中有一个addView方法，如下：
其中要add的view既为我们的GooView，所以实例化它：
关于这个布局参数可以参考Toast的源码，如下：
所以依葫芦画瓢:
编译运行，会发现报错了：
哦~~由于目前还木有传文本参数，所以为空了，而GooView中木有做判空，所以修复下：
再次运行：
嗯~~虽说是有bug，但是最起码能将咱们的GooView显示在屏幕上了，至于这BUG之后会慢慢去解决滴。
修复GooView的初始化文本和位置：
对于上一步可以看出其文本和当前x、y木有初始化，所以这里解决一下，其中x、y坐标应该是获取屏幕的x、y坐标，而非当前控件的x，y，所以如下：
编译运行：
