古之立大事者，不惟有超世之才，亦必有坚忍不拔之志。这篇文章主要讲述Android自定义控件：类QQ未读消息拖拽效果相关的知识，希望能为你提供帮助。
QQ的未读消息， 算是一个比较好玩的效果， 趁着最近时间比较多， 参考了网上的一些资料之后， 本次实现一个仿照QQ未读消息的拖拽小红点， 最终完成效果如下：

文章图片

首先我们从最基本的原理开始分析， 看一张图：

文章图片

这个图该怎么绘制呢？ 实际上我们这里是先绘制两个圆， 然后将两个圆的切点通过贝塞尔曲线连接起来就达到这个效果了。至于贝塞尔曲线的概念， 这里就不多做解释了， 百度一下就知道了。

文章图片

切点怎么算呢， 这里我们稍微复习一些初中的数学知识。看了这个图之后， 求出四个切点应该是轻而易举了。

文章图片

现在思路已经很清晰了， 按照我们的思路， 开撸。
首先是我们计算切点以及各坐标点的工具类

public class GeometryUtils { /** * As meaning of method name. * 获得两点之间的距离 * @ param p0 * @ param p1 * @ return */ public static float getDistanceBetween2Points(PointF p0, PointF p1) { float distance = (float) Math.sqrt(Math.pow(p0.y - p1.y, 2) + Math.pow(p0.x - p1.x, 2)); return distance; }/** * Get middle point between p1 and p2. * 获得两点连线的中点 * @ param p1 * @ param p2 * @ return */ public static PointF getMiddlePoint(PointF p1, PointF p2) { return new PointF((p1.x + p2.x) / 2.0f, (p1.y + p2.y) / 2.0f); }/** * Get point between p1 and p2 by percent. * 根据百分比获取两点之间的某个点坐标 * @ param p1 * @ param p2 * @ param percent * @ return */ public static PointF getPointByPercent(PointF p1, PointF p2, float percent) { return new PointF(evaluateValue(percent, p1.x , p2.x), evaluateValue(percent, p1.y , p2.y)); }/** * 根据分度值， 计算从start到end中， fraction位置的值。fraction范围为0 -> 1 * @ param fraction * @ param start * @ param end * @ return */ public static float evaluateValue(float fraction, Number start, Number end){ return start.floatValue() + (end.floatValue() - start.floatValue()) * fraction; }/** * Get the point of intersection between circle and line. * 获取 通过指定圆心， 斜率为lineK的直线与圆的交点。 * * @ param pMiddle The circle center point. * @ param radius The circle radius. * @ param lineK The slope of line which cross the pMiddle. * @ return */ public static PointF[] getIntersectionPoints(PointF pMiddle, float radius, Double lineK) { PointF[] points = new PointF[2]; float radian, xOffset = 0, yOffset = 0; if(lineK != null){ radian= (float) Math.atan(lineK); xOffset = (float) (Math.sin(radian) * radius); yOffset = (float) (Math.cos(radian) * radius); }else { xOffset = radius; yOffset = 0; } points[0] = new PointF(pMiddle.x + xOffset, pMiddle.y - yOffset); points[1] = new PointF(pMiddle.x - xOffset, pMiddle.y + yOffset); return points; } }

然后下面看下我们的核心绘制代码， 代码注释比较全， 此处就不多做解释了。

/** * 绘制贝塞尔曲线部分以及固定圆 * * @ param canvas */ private void drawGooPath(Canvas canvas) { Path path = new Path(); //1. 根据当前两圆圆心的距离计算出固定圆的半径 float distance = (float) GeometryUtils.getDistanceBetween2Points(mDragCenter, mStickCenter); stickCircleTempRadius = getCurrentRadius(distance); //2. 计算出经过两圆圆心连线的垂线的dragLineK（ 对边比临边） 。求出四个交点坐标 float xDiff = mStickCenter.x - mDragCenter.x; Double dragLineK = null; if (xDiff != 0) { dragLineK = (double) ((mStickCenter.y - mDragCenter.y) / xDiff); }//分别获得经过两圆圆心连线的垂线与圆的交点（ 两条垂线平行， 所以dragLineK相等） 。 PointF[] dragPoints = GeometryUtils.getIntersectionPoints(mDragCenter, dragCircleRadius, dragLineK); PointF[] stickPoints = GeometryUtils.getIntersectionPoints(mStickCenter, stickCircleTempRadius, dragLineK); //3. 以两圆连线的0.618处作为 贝塞尔曲线 的控制点。（ 选一个中间点附近的控制点） PointF pointByPercent = GeometryUtils.getPointByPercent(mDragCenter, mStickCenter, 0.618f); // 绘制两圆连接闭合 path.moveTo((float) stickPoints[0].x, (float) stickPoints[0].y); path.quadTo((float) pointByPercent.x, (float) pointByPercent.y, (float) dragPoints[0].x, (float) dragPoints[0].y); path.lineTo((float) dragPoints[1].x, (float) dragPoints[1].y); path.quadTo((float) pointByPercent.x, (float) pointByPercent.y, (float) stickPoints[1].x, (float) stickPoints[1].y); canvas.drawPath(path, mPaintRed); // 画固定圆 canvas.drawCircle(mStickCenter.x, mStickCenter.y, stickCircleTempRadius, mPaintRed); }

此时我们已经实现了绘制的核心代码， 然后我们加上touch事件的监听， 达到动态的更新dragPoint的中心点位置以及stickPoint半径的效果。当手抬起的时候， 添加一个属性动画， 达到回弹的效果。

@ Override public boolean onTouchEvent(MotionEvent event) { switch (MotionEventCompat.getActionMasked(event)) { case MotionEvent.ACTION_DOWN: { isOutOfRange = false; updateDragPointCenter(event.getRawX(), event.getRawY()); break; } case MotionEvent.ACTION_MOVE: { //如果两圆间距大于最大距离mMaxDistance， 执行拖拽结束动画 PointF p0 = new PointF(mDragCenter.x, mDragCenter.y); PointF p1 = new PointF(mStickCenter.x, mStickCenter.y); if (GeometryUtils.getDistanceBetween2Points(p0, p1) > mMaxDistance) { isOutOfRange = true; updateDragPointCenter(event.getRawX(), event.getRawY()); return false; } updateDragPointCenter(event.getRawX(), event.getRawY()); break; } case MotionEvent.ACTION_UP: { handleActionUp(); break; } default: { isOutOfRange = false; break; } } return true; }/** * 手势抬起动作 */ private void handleActionUp() { if (isOutOfRange) { // 当拖动dragPoint范围已经超出mMaxDistance， 然后又将dragPoint拖回mResetDistance范围内时 if (GeometryUtils.getDistanceBetween2Points(mDragCenter, mStickCenter) < mResetDistance) { //reset return; } // dispappear } else { //手指抬起时， 弹回动画 mAnim = ValueAnimator.ofFloat(1.0f); mAnim.setInterpolator(new OvershootInterpolator(5.0f)); final PointF startPoint = new PointF(mDragCenter.x, mDragCenter.y); final PointF endPoint = new PointF(mStickCenter.x, mStickCenter.y); mAnim.addUpdateListener(new AnimatorUpdateListener() { @ Override public void onAnimationUpdate(ValueAnimator animation) { float fraction = animation.getAnimatedFraction(); PointF pointByPercent = GeometryUtils.getPointByPercent(startPoint, endPoint, fraction); updateDragPointCenter((float) pointByPercent.x, (float) pointByPercent.y); } }); mAnim.addListener(new AnimatorListenerAdapter() { @ Override public void onAnimationEnd(Animator animation) { //reset } }); if (GeometryUtils.getDistanceBetween2Points(startPoint, endPoint) < 10) { mAnim.setDuration(100); } else { mAnim.setDuration(300); } mAnim.start(); } }

此时我们拖拽的核心代码基本都已经完成， 实际效果如下：

文章图片

现在小红点的绘制基本告一段落， 我们不得不去思考真正的难点。那就是如何将我们前面的这个GooView应用到实际呢？ 看实际效果我们的小红点是放在listView里面的， 如果是这样的话， 就代表我们的GooView的拖拽范围是肯定无法超过父控件item的区域的。
那么我们要如何实现小红点可以随便的在整个屏幕拖拽呢？ 我们这里稍微整理一下思路。

1. 先在listView的item布局中先放入一个小红点。
2. 当我们touch到这个小红点的时候， 隐藏这个小红点， 然后根据我们布局中小红点的位置初始化一个GooView并且添加到WindowManager中吗， 达到GooView可以全屏拖动的效果。
3. 在添加GooView到WindowManager中的时候， 记录初始小红点stickPoint的位置， 然后根据stickPoint和dragPointde位置是否超出我们的消失界限来判断接下来的逻辑。
4. 根据GooView的最终状态， 显示回弹或者消失动画。

思路有了， 那么就上代码， 根据第一步， 我们完成listView的item布局。

< ?xml version= " 1.0" encoding= " utf-8" ?> < RelativeLayout xmlns:android= " http://schemas.android.com/apk/res/android" android:layout_width= " match_parent" android:layout_height= " 80dp" android:minHeight= " 80dp" > < ImageView android:id= " @ + id/iv_head" android:layout_width= " 50dp" android:layout_height= " 50dp" android:layout_centerVertical= " true" android:layout_marginLeft= " 20dp" android:src= " @ mipmap/head" /> < TextView android:id= " @ + id/tv_content" android:layout_width= " wrap_content" android:layout_height= " 50dp" android:layout_centerVertical= " true" android:gravity= " center" android:layout_marginLeft= " 20dp" android:layout_toRightOf= " @ + id/iv_head" android:text= " content - " android:textSize= " 25sp" /> < LinearLayout android:id= " @ + id/ll_point" android:layout_width= " 80dp" android:layout_height= " 80dp" android:layout_alignParentEnd= " true" android:layout_alignParentRight= " true" android:layout_alignParentTop= " true" android:gravity= " center" > < TextView android:id= " @ + id/point" android:layout_width= " wrap_content" android:layout_height= " 18dp" android:background= " @ drawable/red_bg" android:gravity= " center" android:singleLine= " true" android:textColor= " @ android:color/white" android:textSize= " 12sp" /> < /LinearLayout> < /RelativeLayout>

效果如下， 要注意的是， 对比QQ的真实体验， 小红点周边范围点击的时候， 都是可以直接拖拽小红点的。考虑到红点的点击范围比较小， 所以给红点增加了一个宽高80dp的父layout， 然后我们将touch小红点事件更改为touch小红点父layout， 这样只要我们点击了小红点的父layout范围， 都会添加GooView到WindowManager中。

文章图片

接下来第二步， 我们完成添加GooView到WindowManager中的代码。
由于我们的GooView初始添加是从listViewItem中红点的touch事件开始的， 所以我们先完成listView adapter的实现。

public class GooViewAapter extends BaseAdapter { private Context mContext; //记录已经remove的position private HashSet< Integer> mRemoved = new HashSet< Integer> (); private List< String> list = new ArrayList< String> (); public GooViewAapter(Context mContext, List< String> list) { super(); this.mContext = mContext; this.list = list; }@ Override public int getCount() { return list.size(); }@ Override public Object getItem(int position) { return list.get(position); }@ Override public long getItemId(int position) { return position; }@ Override public View getView(final int position, View convertView, ViewGroup parent) { if (convertView = = null) { convertView = View.inflate(mContext, R.layout.list_item_goo, null); } ViewHolder holder = ViewHolder.getHolder(convertView); holder.mContent.setText(list.get(position)); //item固定小红点layout LinearLayout pointLayout = holder.mPointLayout; //item固定小红点 final TextView point = holder.mPoint; boolean visiable = !mRemoved.contains(position); pointLayout.setVisibility(visiable ? View.VISIBLE : View.GONE); if (visiable) { point.setText(String.valueOf(position)); pointLayout.setTag(position); GooViewListener mGooListener = new GooViewListener(mContext, pointLayout) { @ Override public void onDisappear(PointF mDragCenter) { super.onDisappear(mDragCenter); mRemoved.add(position); notifyDataSetChanged(); Utils.showToast(mContext, " position " + position + " disappear." ); }@ Override public void onReset(boolean isOutOfRange) { super.onReset(isOutOfRange); notifyDataSetChanged(); //刷新ListView Utils.showToast(mContext, " position " + position + " reset." ); } }; //在point父布局内的触碰事件都进行监听 pointLayout.setOnTouchListener(mGooListener); } return convertView; }static class ViewHolder {public ImageView mImage; public TextView mPoint; public LinearLayout mPointLayout; public TextView mContent; public ViewHolder(View convertView) { mImage = (ImageView) convertView.findViewById(R.id.iv_head); mPoint = (TextView) convertView.findViewById(R.id.point); mPointLayout = (LinearLayout) convertView.findViewById(R.id.ll_point); mContent = (TextView) convertView.findViewById(R.id.tv_content); }public static ViewHolder getHolder(View convertView) { ViewHolder holder = (ViewHolder) convertView.getTag(); if (holder = = null) { holder = new ViewHolder(convertView); convertView.setTag(holder); } return holder; } } }

由于listview需要知道GooView的状态， 所以我们在GooView中增加一个接口， 用于listView回调处理后续的逻辑。

interface OnDisappearListener { /** * GooView Disapper * * @ param mDragCenter */ void onDisappear(PointF mDragCenter); /** * GooView onReset * * @ param isOutOfRange */ void onReset(boolean isOutOfRange); }

新建一个实现了OnTouchListener以及OnDisappearListener 方法的的类， 最后将这个实现类设置给item中的红点Layout。

public class GooViewListener implements OnTouchListener, OnDisappearListener {private WindowManager mWm; private WindowManager.LayoutParams mParams; private GooView mGooView; private View pointLayout; private int number; private final Context mContext; private Handler mHandler; public GooViewListener(Context mContext, View pointLayout) { this.mContext = mContext; this.pointLayout = pointLayout; this.number = (Integer) pointLayout.getTag(); mGooView = new GooView(mContext); mWm = (WindowManager) mContext.getSystemService(Context.WINDOW_SERVICE); mParams = new WindowManager.LayoutParams(); mParams.format = PixelFormat.TRANSLUCENT; //使窗口支持透明度 mHandler = new Handler(mContext.getMainLooper()); }@ Override public boolean onTouch(View v, MotionEvent event) { int action = MotionEventCompat.getActionMasked(event); // 当按下时， 将自定义View添加到WindowManager中 if (action = = MotionEvent.ACTION_DOWN) { ViewParent parent = v.getParent(); // 请求其父级View不拦截Touch事件 parent.requestDisallowInterceptTouchEvent(true); int[] points = new int[2]; //获取pointLayout在屏幕中的位置（ layout的左上角坐标） pointLayout.getLocationInWindow(points); //获取初始小红点中心坐标 int x = points[0] + pointLayout.getWidth() / 2; int y = points[1] + pointLayout.getHeight() / 2; // 初始化当前点击的item的信息， 数字及坐标 mGooView.setStatusBarHeight(Utils.getStatusBarHeight(v)); mGooView.setNumber(number); mGooView.initCenter(x, y); //设置当前GooView消失监听 mGooView.setOnDisappearListener(this); // 添加当前GooView到WindowManager mWm.addView(mGooView, mParams); pointLayout.setVisibility(View.INVISIBLE); } // 将所有touch事件转交给GooView处理 mGooView.onTouchEvent(event); return true; }@ Override public void onDisappear(PointF mDragCenter) { //disappear 下一步完成 }@ Override public void onReset(boolean isOutOfRange) { // 当dragPoint弹回时， 去除该View， 等下次ACTION_DOWN的时候再添加 if (mWm != null & & mGooView.getParent() != null) { mWm.removeView(mGooView); } } }

这样下来， 我们基本上完成了大部分功能， 现在还差最后一步， 就是GooView超出范围消失后的处理， 这里我们用一个帧动画来完成爆炸效果。

public class BubbleLayout extends FrameLayout { Context context; public BubbleLayout(Context context) { super(context); this.context = context; }private int mCenterX, mCenterY; public void setCenter(int x, int y) { mCenterX = x; mCenterY = y; requestLayout(); }@ Override protected void onLayout(boolean changed, int left, int top, int right, int bottom) { View child = getChildAt(0); // 设置View到指定位置 if (child != null & & child.getVisibility() != GONE) { final int width = child.getMeasuredWidth(); final int height = child.getMeasuredHeight(); child.layout((int) (mCenterX - width / 2.0f), (int) (mCenterY - height / 2.0f) , (int) (mCenterX + width / 2.0f), (int) (mCenterY + height / 2.0f)); } } }@ Override public void onDisappear(PointF mDragCenter) { if (mWm != null & & mGooView.getParent() != null) { mWm.removeView(mGooView); //播放气泡爆炸动画 ImageView imageView = new ImageView(mContext); imageView.setImageResource(R.drawable.anim_bubble_pop); AnimationDrawable mAnimDrawable = (AnimationDrawable) imageView .getDrawable(); final BubbleLayout bubbleLayout = new BubbleLayout(mContext); bubbleLayout.setCenter((int) mDragCenter.x, (int) mDragCenter.y - Utils.getStatusBarHeight(mGooView)); bubbleLayout.addView(imageView, new FrameLayout.LayoutParams( android.widget.FrameLayout.LayoutParams.WRAP_CONTENT, android.widget.FrameLayout.LayoutParams.WRAP_CONTENT)); mWm.addView(bubbleLayout, mParams); mAnimDrawable.start(); // 播放结束后， 删除该bubbleLayout mHandler.postDelayed(new Runnable() { @ Override public void run() { mWm.removeView(bubbleLayout); } }, 501); } }

【Android自定义控件（类QQ未读消息拖拽效果）】最后附上完整demo地址： https://github.com/Horrarndoo/GooView

推荐阅读

• 

  2023昆明轿子山马缨花开放最新消息 昆明轿子山庄酒店
• 

  跨境电商是做什么的 什么是男性电商，电商网
• 

  东奔西跑的意思 东奔西跑出处
• 

  腾讯手游助手可以玩ios吗
• 

  常见数组的编程操作
• 

  蓝莓的功能和作用分别是什么呢
• 

  腹部赘肉怎么减 记住这3个减腹部赘肉的按摩小技巧
• 

  全战三国木将带什么兵种 全战三国木系武将先天自带特性介绍
• 

  抑郁，情绪低落如何自我缓解？ 心情总是郁闷怎么办
• 

  听马士兵讲redis笔记三 redis 持久化RDB fork copy_on_write
• 

  回音壁|身临其境的音视频体验：创新STAGE360回音壁评测
• 

  中国“神医”萧宏慈用“拍打拉筋”疗法
• 

  防晒过四小时还要补涂吗
• 

  怎么设置让IE浏览器记住网页中输入的密码
• 

  微信刚加好友不能转账吗
• 

  简单菜谱家常菜做法大全 简单菜的烹饪方法
• 

  统计分析表的制作要求
• 

  九寨沟这一名称的由来
• 

  高血压患者|高血压患者为什么要补钾？多吃5种食物来补钾，好处多多！
• 

  肚组词两个字 肚组词精选

• Android 官方推荐 : DialogFragment 创建对话框
• Android 自定义TextView实现文本内容自动调整字体大小以适应TextView的大小
• Java反射在Android中的使用
• Android--普通注册页面实现（无功能）
• 创建一个自定义的数据结构来计算O(1)中的函数
• 算法设计（从三元树创建双向链表）
• 带头和尾指针的双链表中的排序插入
• 如何在C++中的类内创建动态2D数组（）
• 使用Python-Tkinter创建第一个GUI应用程序