仿QQ消息气泡拖拽效果

最新推荐文章于 2023-05-29 15:39:30 发布
最新推荐文章于 2023-05-29 15:39:30 发布
阅读量490 收藏 1
点赞数 1
分类专栏： Android 自定义view 文章标签： 布局 qq 源码 消息气泡
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mengliguhun/article/details/51548164
版权

此次的自定义View是仿qq消息列表，消息气泡拖拽效果。

1.原理介绍：自定义view，绘制原始点圆，touch点圆，然后将两圆用贝塞尔曲线连接并填充。
这里写图片描述

2.应用WindowManager，将自定义view添加到屏幕中区，全屏布局，根据相关坐标，计算出目标view在屏幕中的坐标，并将目标view（消息气泡view）绘制到自定义view中。

3，源码解析
1)按中目标view代码操作

/**
     * 开始拖动
     * @param target
     */
    public void dragStart(View target){

        convertViewToBitmap(target);//将目标view转换成bitmap，ondraw绘制时用

        final int[] locations = new int[2];
        target.getLocationOnScreen(locations);//目标view在屏幕中的坐标

        windowManagerAddView(getContext(),this);//添加到屏幕中

        this.initPoints(locations[0],locations[1],target.getWidth(),target.getHeight());//初始化相关坐标

    }

2)开始拖动代码操作

/**
     * 用户移动view，并更新
     * @param x
     * @param y
     */
    public void updatePoints(float x,float y){
        touchX = x;
        touchY = y - getStatusBarHeight();
        centerX = startCircleX/2 +touchX/2;
        centerY = startCircleY/2 +touchY/2;

        invalidate();
    }

3)拖动抬起代码操作

/**
     * 拖动结束
     */
    public void dragFinish(){
        if (onDragFinishListener != null){
            onDragFinishListener.onDragFinish();//结束监听器
        }
        if (isArriveMaxDistance){//拖动超出最大距离
            windowManagerRemoveView();//移除自定view
        }
        else {
            startRollBackAnimation(1000);//回弹动画效果
        }

    }

4)ondraw方法解析

 @Override
    protected void onDraw(Canvas canvas) {

        calculate();//计算贝塞尔曲线
        if (!isArriveMaxDistance){
            canvas.drawCircle(startCircleX,startCircleY,startRadius,mPaint);//起始圆
            canvas.drawCircle(touchX,touchY,endRadius,mPaint);//触摸点圆
            canvas.drawPath(mPath,mPaint);//两圆之间的路径绘制

        }

        canvas.drawBitmap(mDest,touchX - mDest.getWidth()/2f,touchY - mDest.getHeight()/2f,mPaint);//目标view的绘制


    }

5)贝塞尔曲线的绘制
这里写图片描述

 /**
     * 计算贝塞尔曲线
     */
    private void calculate(){
        float distance = (float) Math.sqrt(Math.pow(touchX - startCircleX,2)+Math.pow(touchY - startCircleY,2));
        startRadius = -distance/15 +endRadius;
        if (startRadius <8){
            startRadius = 8;
        }
        if (distance > GraphicUtils.dip2px(getContext(),maxDistance)){
            isArriveMaxDistance = true;
        }else {
            //根据两个圆心算出三角函数角度
            double angle = Math.atan((touchY - startCircleY)/(touchX - startCircleX));
            float offsetX = (float) (startRadius*Math.sin(angle));
            float offsetY = (float) (startRadius*Math.cos(angle));
            float x1 = startCircleX - offsetX;
            float y1 = startCircleY + offsetY;
            float x4 = startCircleX + offsetX;
            float y4 = startCircleY - offsetY;

            offsetX = (float) (endRadius*Math.sin(angle));
            offsetY = (float) (endRadius*Math.cos(angle));
            float x2 = touchX - offsetX;
            float y2 = touchY + offsetY;
            float x3 = touchX + offsetX;
            float y3 = touchY - offsetY;

            mPath.reset();
            mPath.moveTo(x1,y1);
            mPath.quadTo(centerX,centerY,x2,y2);
            mPath.lineTo(x3,y3);
            mPath.quadTo(centerX,centerY,x4,y4);
            mPath.lineTo(x1,y1);
        }


    }

4.自定义view源代码

/**
 * TODO: document your custom view class.
 */
public class BezierView extends View {
    private OnDragFinishListener onDragFinishListener;
    private Paint mPaint;
    //绘图路径
    private Path mPath;
    //
    private float maxRadius;
    //两圆的半径差
    private float diffRadius = 2;
    //起始圆半径
    private float startRadius;
    //拖动圆的半径
    private float endRadius;
    //起始圆心 在屏幕中的坐标起点
    private float startCircleX;
    private float startCircleY;
    //触摸点 相对view
    private float touchX;
    private float touchY;
    //控制点 相对view
    private float centerX;
    private float centerY;
    //最大距离
    private int maxDistance = 100;
    //是否超出最大距离
    private boolean isArriveMaxDistance;

    private Bitmap mDest;

    public void setMaxRadius(float maxRadius) {
        this.maxRadius = maxRadius;
    }

    public void setMaxDistance(int maxDistance) {
        this.maxDistance = maxDistance;
    }

    public BezierView(Context context) {
        super(context);
        init(null, 0);
    }

    public BezierView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(attrs, 0);
    }

    public BezierView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init(attrs, defStyle);
    }

    private void init(AttributeSet attrs, int defStyle) {
        mPath = new Path();
        mPaint = new Paint();
        mPaint.setColor(Color.RED);
        mPaint.setAntiAlias(true);
        maxRadius = GraphicUtils.dip2px(getContext(),10);
    }

    /**
     * 用户按下并初始化
     * @param startX
     * @param startY
     * @param width
     * @param height
     */
    public void  initPoints(float startX,float startY,int width,int height){

        endRadius = Math.min(width,height)/2;
        if (endRadius >maxRadius){
            endRadius = maxRadius;
        }
        startRadius = endRadius-diffRadius;
        startCircleX = startX + width/2;
        startCircleY = startY + height/2 - getStatusBarHeight();
        touchX = startCircleX;
        touchY = startCircleY;

        centerX = startCircleX/2 +touchX/2;
        centerY = startCircleY/2 +touchY/2;

        invalidate();
    }
    /**
     * 开始拖动
     * @param target
     */
    public void dragStart(View target){

        convertViewToBitmap(target);

        final int[] locations = new int[2];
        target.getLocationOnScreen(locations);

        windowManagerAddView(getContext(),this);

        this.initPoints(locations[0],locations[1],target.getWidth(),target.getHeight());

    }
    /**
     * 用户移动view，并更新
     * @param x
     * @param y
     */
    public void updatePoints(float x,float y){
        touchX = x;
        touchY = y - getStatusBarHeight();
        centerX = startCircleX/2 +touchX/2;
        centerY = startCircleY/2 +touchY/2;

        invalidate();
    }

    /**
     * 拖动结束
     */
    public void dragFinish(){
        if (onDragFinishListener != null){
            onDragFinishListener.onDragFinish();
        }
        if (isArriveMaxDistance){
            windowManagerRemoveView();
        }
        else {
            startRollBackAnimation(1000);
        }

    }
    /**
     * 将view转换成bitmap
     * @param view
     * @return
     */
    private Bitmap convertViewToBitmap(View view) {
        int width = view.getWidth();
        int height = view.getHeight();
        mDest = Bitmap.createBitmap(width,height, Bitmap.Config.ARGB_8888);
        //定义一个指定位图的画布，来绘制内容
        Canvas canvas = new Canvas(mDest);
        //将view的内容绘制到bitmap上
        view.draw(canvas);
        return mDest;
    }
    /**
     * 回滚状态动画
     */
    private void startRollBackAnimation(long duration) {
        //属性动画弹性效果 缓动函数
        ValueAnimator rollBackAnim = ObjectAnimator.ofObject(new PointEvaluator(duration),new Point(touchX,touchY),new Point(startCircleX,startCircleY));
        rollBackAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                Point point = (Point) animation.getAnimatedValue();
                touchX = point.getX();
                touchY = point.getY();
                centerX = startCircleX/2 +touchX/2;
                centerY = startCircleY/2 +touchY/2;
                postInvalidate();
            }
        });

        rollBackAnim.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                //可以自己定义监听，进行目标view的处理
                BezierView.this.clearAnimation();
                windowManagerRemoveView();
            }
        });
        rollBackAnim.setDuration(duration);
        rollBackAnim.start();
    }

    @Override
    protected void onDraw(Canvas canvas) {

        calculate();
        if (!isArriveMaxDistance){
            canvas.drawCircle(startCircleX,startCircleY,startRadius,mPaint);
            canvas.drawCircle(touchX,touchY,endRadius,mPaint);
            canvas.drawPath(mPath,mPaint);

        }

        canvas.drawBitmap(mDest,touchX - mDest.getWidth()/2f,touchY - mDest.getHeight()/2f,mPaint);


    }

    /**
     * 计算贝塞尔曲线
     */
    private void calculate(){
        float distance = (float) Math.sqrt(Math.pow(touchX - startCircleX,2)+Math.pow(touchY - startCircleY,2));
        startRadius = -distance/15 +endRadius;
        if (startRadius <8){
            startRadius = 8;
        }
        if (distance > GraphicUtils.dip2px(getContext(),maxDistance)){
            isArriveMaxDistance = true;
        }else {
            //根据两个圆心算出三角函数角度
            double angle = Math.atan((touchY - startCircleY)/(touchX - startCircleX));
            float offsetX = (float) (startRadius*Math.sin(angle));
            float offsetY = (float) (startRadius*Math.cos(angle));
            float x1 = startCircleX - offsetX;
            float y1 = startCircleY + offsetY;
            float x4 = startCircleX + offsetX;
            float y4 = startCircleY - offsetY;

            offsetX = (float) (endRadius*Math.sin(angle));
            offsetY = (float) (endRadius*Math.cos(angle));
            float x2 = touchX - offsetX;
            float y2 = touchY + offsetY;
            float x3 = touchX + offsetX;
            float y3 = touchY - offsetY;

            mPath.reset();
            mPath.moveTo(x1,y1);
            mPath.quadTo(centerX,centerY,x2,y2);
            mPath.lineTo(x3,y3);
            mPath.quadTo(centerX,centerY,x4,y4);
            mPath.lineTo(x1,y1);
        }


    }
    /**
     * 向窗口添加view
     */
    WindowManager windowManager;
    private void windowManagerAddView(Context context,View view){
        WindowManager.LayoutParams params = new WindowManager.LayoutParams();//全屏MATCH_PARENT

        params.format = PixelFormat.TRANSLUCENT;
        params.flags = WindowManager.LayoutParams.FLAG_NOT_TOUCH_MODAL;//后面窗口仍然可以处理点设备事件
        windowManager = (WindowManager)context.getSystemService(Context.WINDOW_SERVICE);
        windowManager.addView(view, params);
    }
    //移除view
    private void windowManagerRemoveView(){
        if (windowManager != null){
            windowManager.removeView(this);
        }
    }
    /**
     * 获取状态栏高度
     * @return
     */
    public int getStatusBarHeight() {
        int result = 0;
        int resourceId = getResources().getIdentifier("status_bar_height", "dimen", "android");
        if (resourceId > 0) {
            result = getResources().getDimensionPixelSize(resourceId);
        }
        return result;
    }

    /**
     * 拖动抬起监听
     * @param onDragFinishListener
     */

    public void setOnDragFinishListener(OnDragFinishListener onDragFinishListener) {
        this.onDragFinishListener = onDragFinishListener;
    }

    /**
     * 自定义监听器
     */
    public interface OnDragFinishListener{
         void onDragFinish();
    }
}

动画 缓动函数

/**
 * Created by Administrator on 2016/4/6.
 * 缓动函数
 */
public class PointEvaluator implements TypeEvaluator {
    private float mDuration;

    public PointEvaluator(float mDuration) {
        this.mDuration = mDuration;
    }

    @Override
    public Object evaluate(float fraction, Object startValue, Object endValue) {

        Point startPoint = (Point) startValue;
        Point endPoint = (Point) endValue;

        float t = mDuration * fraction;
        float x = calculate(t,startPoint.getX(),endPoint.getX() - startPoint.getX(),mDuration);
        float y = calculate(t,startPoint.getY(),endPoint.getY() - startPoint.getY(),mDuration);
        return new Point(x,y);
    }
    public Float calculate(float t, float b, float c, float d) {

        double s=1.70158;
        float a=c;
        if (t==0)
            return b;
        if ((t/=d)==1)
            return b+c;
        float p= (float) (d*.3);
        if (a < Math.abs(c)) {
            a=c;
            s=p/4;
        }
        else
        {
            s = p/(2*Math.PI) * Math.asin (c/a);
        }
        return a*(float) Math.pow(2,-10*t) * (float) Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
    }
}

6.使用方法 mBezierViewTest 目标view

 mBezierViewTest.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {

                switch (event.getAction()) {
                    case MotionEvent.ACTION_DOWN:
                        mBezierView = new BezierView(CustomViewsActivity.this);

                        if (mParent != null){
                            mParent.requestDisallowInterceptTouchEvent(true);//父view禁止滚动（scrollview，listview等）
                        }

                        mBezierView.dragStart(mBezierViewTest);

                        break;
                    case MotionEvent.ACTION_MOVE:
                        mBezierViewTest.setVisibility(View.INVISIBLE);
                        mBezierView.updatePoints(event.getRawX(),event.getRawY());
                        break;
                    case MotionEvent.ACTION_UP:
                    case MotionEvent.ACTION_CANCEL:
                        if (mParent != null){
                            mParent.requestDisallowInterceptTouchEvent(false);
                        }
                        mBezierViewTest.setVisibility(View.VISIBLE);
                        mBezierView.dragFinish();
                        break;
                }
                return true;
            }
        });
mengliguhun
关注
专栏目录
57.贝赛尔曲线初步（二） - 高仿QQ未读消息气泡拖拽黏连效果
猴菇同学的博客
01-12 5847
仿QQ未读消息气泡拖拽黏连效果，是最经典的练习贝塞尔曲线的东东
qq消息气泡拖拽消失效果
04-04
在Android开发中，实现动态和交互丰富的用户界面是至关重要的，而"qq消息气泡拖拽消失效果"正是这样一种能提升用户体验的创新设计。这个源码项目名为BezierDemo，它利用了贝塞尔曲线（Bezier Curve）的概念来创建一...
基于vue实现的仿QQ消息气泡拖拽插件
08-09
基于vue实现的仿QQ消息气泡拖拽插件
自定义View---仿QQ消息拖拽气泡
zk2000416的博客
09-02 311
仿QQ拖拽气泡基本原理基本实现首先要确定气泡的状态。每种状态下气泡需要实现的功能状态的变化写在结尾 至于为什么还有一根水平线，我接下来会说 基本原理 二阶贝塞尔曲线 即Path的quadTo方法： quadTo(float x1, float y1, float x2, float y2); 需要两条贝塞尔曲线，而且要形成一个闭合的环路才行。 基本实现 不动的气泡称：stillBubble，移动的气泡称：moveBubble 首先要确定气泡的状态。 a. 默认状态（default） b. 连接状态（c
仿照qq聊天，包含气泡消息发送
技术改变生活
05-23 759
仿qq聊天框
Android qq消息气泡实现效果,Android 实现仿QQ拖拽气泡效果的示例
weixin_36462845的博客
05-28 539
效果图：一、实现思路在列表中默认使用自定义的TextView控件来展示消息气泡，在自定义的TextView控件中重写onTouchEvent方法，然后在DOWN、MOVE、UP事件中分别处理拖拽效果。整个拖拽效果我们可以拆分成以下几步来实现：1.默认状态2.两气泡相连状态3.两气泡分离状态4.气泡消失状态二、功能实现默认状态：用来做一个状态的标识，无需特别处理。两气泡相连状态：绘制一个固定圆和一个...
Android贝塞尔曲线初步学习第二课 仿QQ未读消息气泡拖拽黏连效果
08-31
在本篇【Android贝塞尔曲线初步学习第二课：仿QQ未读消息气泡拖拽黏连效果】中，我们将深入探讨如何使用Android贝塞尔曲线来实现一个类似QQ未读消息气泡的拖拽黏连效果。这个效果允许用户拖动一个气泡小球，使其在与...
贝塞尔曲线 - QQ消息汽包拖拽
z240336124的专栏
07-31 876
1.概述  消息气泡拖拽资料有很多，网上也有开源代码，下载下来就可以用。为什么还要折腾呢？我想证明一下数学已经初中毕业，其次像贝塞尔这种效果还是很常见的，虽然目前我只有一个 APP 用了这个效果。我想一行代码让所有的控件都可以拖动爆炸，不是为了重复造轮子而是为了装B。 2．效果实现　　 * 2.1 效果分析 *  看上面的效果感觉有点麻烦，怎么做到任何控件都可以拖动爆炸，我想说网上应该仅此一家。
模仿qq未读消息气泡拖拽和滑动删除置顶
03-10
下载下来就可以用，模仿消息列表左划和置顶，还有未读消息气泡拖拽消失效果
Android使用贝塞尔线高仿QQ聊天消息气泡的拖拽效果
小悦月CG的专栏
12-02 1979
Android高仿QQ消息气泡拖拽效果
QQ聊天气泡拖动效果实现
sinat_26503455的博客
11-21 5171
QQ聊天气泡拖动效果实现概述本文的目的是实现类似于QQ消息提醒的气泡的拖拽效果。网上已有大神的实现效果是通过监听控件的OnTouchEvent事件的ACTION_DOWN,ACTION_MOVE,ACTION_UP事件来处理相应的拖拽效果，这里采用ViewDragHelper的方式去实现拖拽，顺便学习了一下ViewDragHelper的使用方式，拖拽时的粘连效果采用贝塞尔曲线来实现。用ViewDra
Vue3类似qq、微信界面的拖拽功能的组件
最新发布
懮俍的博客
05-29 358
最近低代码平台项目有个需求即点击屏幕墙或者左侧菜单资源出现后，页面出现编辑框，并且能够拖动，点击别的资源该菜单内容更改但位置不变，于是封装了这样的组件。因为项目经理需要一个demo能够快速去看，所以写的比较粗糙，见谅一下。点击左侧菜单设置或右侧背景即可出现该背景设置菜单。拖拽同时也做了范围限制。
仿qq气泡通知粘连效果
REIGE的博客
03-20 1273
前些天看到网上有个仿qq气泡的效果看了看也不难 今天来自己实现一下效果图其实很简单就是一个绘制过程 用到了插补器 OvershootInterpolatorpublic class BubbleView extends View { private Paint mPaint;//画笔 private int mMeasuredHeight;//控件高 private int m
Android drawPath实现QQ拖拽泡泡
千与千寻中
06-11 5340
这两天学习了使用Path绘制贝塞尔曲线相关，然后自己动手做了一个类似QQ未读消息可拖拽的小气泡，效果图如下：接下来一步一步的实现整个过程。基本原理其实就是使用Path绘制三点的二次方贝塞尔曲线来完成那个妖娆的曲线的。然后根据触摸点不断绘制对应的圆形，根据距离的改变改变原始固定圆形的半径大小。最后就是松手后返回或者爆裂的实现。Path介绍：顾名思义，就是一个路径的意思，Path里面有很多的方法，本次设
qq气泡实现
weixin_45253393的博客
09-30 900
使用贝塞尔曲线绘制qq气泡，整个动画过程可分为4个过程： 1、默认状态：此时显示一个气泡和一个消息框。 2、连接状态：一个固定气泡（大小随着拖拽的长度变化而变化），一个移动气泡和它之上的消息框。 3、分离状态，此时固定气泡消失，只有移动气泡（和它的消息框）随手指的移动而移动。 4、消失状态：放开手指后气泡爆炸消失。 将整个过程分割为这几个步骤，再分别实现每个步骤，整个过程就完成了！ 首先...
Unity学习小结4 - NGUI的几点性能问题
Stephanie的专栏
09-20 181
沉默了好长时间，也忙了好长时间，起始也 是一直在为自己没能好好的总结和思考找借口，想总结，时间总还是能抽出来的。最近积攒的坑感觉差不多够多，往出倒上一部分，也相当于为自己今后解决问题多留一些注意点。很多地方写的不准确和错的，还希望大家能够帮我指出。 1. 滚屏组件UIScrollView低性能问题： 如图是我们实现一个带子节点元素的滚动屏幕，括号 中的组件为非必须，像如...
Android自定义View仿QQ消息拖拽气泡实现
12-07 3634
Android自定义View仿QQ消息拖拽气泡实现 很多小的效果看上去很酷炫，其实操作起来很简单，就是要注意细节以及分析状态，然后去绘制，这里会实现qq消息拖拽气泡的实现。画图分析 源代码 效果展示 画图分析 在画图之前，看一下原效果图，分析实现步骤 由图可知，它这里拖拽画的是图片，为了更接近原理以及自定义可扩展，我们将拖拽的99+也当成一个圆。如下图：小圆是在原始位置，大圆是在当前手指的位
Android仿QQ气泡拖拽黏连效果实现
"Android贝塞尔曲线初步学习第二课 仿QQ未读消息气泡拖拽黏连效果" 在Android开发中，贝塞尔曲线是一种强大的工具，常用于创建平滑的曲线路径，尤其在动画和图形设计中。本教程将介绍如何使用贝塞尔曲线实现类似QQ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值