脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → Android → Android仿QQ聊天消息气泡拖拽效果

Android使用贝塞尔曲线仿QQ聊天消息气泡拖拽效果

 更新时间：2019年01月27日 11:05:09   作者：小悦月CG  
这篇文章主要为大家详细介绍了Android使用贝塞尔曲线仿QQ聊天消息气泡拖拽效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了Android仿QQ聊天消息气泡拖拽效果展示的具体代码，供大家参考，具体内容如下

先画圆，都会吧。代码如下：

public class Bezier extends View {
 private final Paint mGesturePaint = new Paint();
 private final Path mPath = new Path();
 private float mX1 = 100, mY1 = 150;
 private float mX2 = 300, mY2 = 150;
 private boolean mBezier = true;
 private int mRadius = 30;
 
 public Bezier(Context context, AttributeSet attrs) {
 super(context, attrs);
 mGesturePaint.setAntiAlias(true);
 mGesturePaint.setStyle(Paint.Style.FILL_AND_STROKE);
 mGesturePaint.setStrokeWidth(5);
 mGesturePaint.setColor(Color.RED);
 }
 
 @Override
 protected void onDraw(Canvas canvas) {
 // TODO Auto-generated method stub
 super.onDraw(canvas);
 canvas.drawCircle(mX1, mX2, mRadius, mGesturePaint);
 }
 
}

效果

拖拽的另个一圆就不画了，效果的实现主要是计算两个点之间的拖拽区域，如下图：

求出区域之后，使用贝塞尔线画出效果就可以了，代码：

public class Bezier extends View {
 private final Paint mGesturePaint = new Paint();
 private final Path mPath = new Path();
 private float mX1 = 100, mY1 = 150;
 private float mX2 = 300, mY2 = 150;
 private boolean mBezier = true;
 private int mRadius = 30;
 
 public Bezier(Context context, AttributeSet attrs) {
 super(context, attrs);
 mGesturePaint.setAntiAlias(true);
 mGesturePaint.setStyle(Paint.Style.FILL_AND_STROKE);
 mGesturePaint.setStrokeWidth(5);
 mGesturePaint.setColor(Color.RED);
 setBezier();
 }
 
 private void setBezier() {
 float offsetX = (float) (mRadius * Math.sin(Math.atan((mY2 - mY1) / (mX2 - mX1))));
 float offsetY = (float) (mRadius * Math.cos(Math.atan((mY2 - mY1) / (mX2 - mX1))));
 float x1 = mX1 - offsetX;
 float y1 = mY1 + offsetY;
 
 float x2 = mX2 - offsetX;
 float y2 = mY2 + offsetY;
 
 float x3 = mX2 + offsetX;
 float y3 = mY2 - offsetY;
 
 float x4 = mX1 + offsetX;
 float y4 = mY1 - offsetY;
 
 mPath.reset();
 mPath.moveTo(x1, y1);
 mPath.quadTo((mX1 + mX2) / 2, (mY1 + mY2) / 2, x2, y2);//锚点直接取偏移量的一半
 mPath.lineTo(x3, y3);
 mPath.quadTo((mX1 + mX2) / 2, (mY1 + mY2) / 2, x4, y4);
 mPath.lineTo(x1, y1);
 }
 
 @Override
 protected void onDraw(Canvas canvas) {
 // TODO Auto-generated method stub
 super.onDraw(canvas);
 //通过画布绘制多点形成的图形
 canvas.drawCircle(mX1, mY1, mRadius, mGesturePaint);
 if (mBezier) {
 canvas.drawPath(mPath, mGesturePaint);
 canvas.drawCircle(mX2, mY2, mRadius, mGesturePaint);
 }
 }
}

效果图：

拖拽效果只要在onTouchEvent里动态改变拖动点的坐标重绘就可以实现了，代码：

public class Bezier extends View {
 private final Paint mGesturePaint = new Paint();
 private final Path mPath = new Path();
 private float mX1 = 100, mY1 = 150;
 private float mX2 = 300, mY2 = 150;
 private boolean mBezier = true;
 private int mRadius = 30;
 
 public Bezier(Context context, AttributeSet attrs) {
 super(context, attrs);
 mGesturePaint.setAntiAlias(true);
 mGesturePaint.setStyle(Paint.Style.FILL_AND_STROKE);
 mGesturePaint.setStrokeWidth(5);
 mGesturePaint.setColor(Color.RED);
 setBezier();
 }
 
 private void setBezier() {
 float offsetX = (float) (mRadius * Math.sin(Math.atan((mY2 - mY1) / (mX2 - mX1))));
 float offsetY = (float) (mRadius * Math.cos(Math.atan((mY2 - mY1) / (mX2 - mX1))));
 float x1 = mX1 - offsetX;
 float y1 = mY1 + offsetY;
 
 float x2 = mX2 - offsetX;
 float y2 = mY2 + offsetY;
 
 float x3 = mX2 + offsetX;
 float y3 = mY2 - offsetY;
 
 float x4 = mX1 + offsetX;
 float y4 = mY1 - offsetY;
 
 mPath.reset();
 mPath.moveTo(x1, y1);
 mPath.quadTo((mX1 + mX2) / 2, (mY1 + mY2) / 2, x2, y2);//锚点直接取偏移量的一半
 mPath.lineTo(x3, y3);
 mPath.quadTo((mX1 + mX2) / 2, (mY1 + mY2) / 2, x4, y4);
 mPath.lineTo(x1, y1);
 }
 
 @Override
 protected void onDraw(Canvas canvas) {
 // TODO Auto-generated method stub
 super.onDraw(canvas);
 //通过画布绘制多点形成的图形
 canvas.drawCircle(mX1, mY1, mRadius, mGesturePaint);
 if (mBezier) {
 canvas.drawPath(mPath, mGesturePaint);
 canvas.drawCircle(mX2, mY2, mRadius, mGesturePaint);
 }
 }
 
 @Override
 public boolean onTouchEvent(MotionEvent event) {
 mX2 = event.getX();
 mY2 = event.getY();
 switch (event.getAction()) {
 case MotionEvent.ACTION_DOWN:
 mBezier = true;
 setBezier();
 break;
 case MotionEvent.ACTION_MOVE:
 mBezier = true;
 setBezier();
 break;
 case MotionEvent.ACTION_UP:
 mBezier = false;
 break;
 
 }
 invalidate();
 return true;
 }
 
}

源码：Android仿QQ聊天消息气泡拖拽效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • Android布局加载之LayoutInflater示例详解

    Android布局加载之LayoutInflater示例详解

    这篇文章主要介绍了Android布局加载之LayoutInflater的相关资料，文中介绍的非常详细，对大家具有一定的参考借鉴价值，需要的朋友们下面来一起看看吧。
    2017-03-03
  • android之自定义Toast使用方法

    android之自定义Toast使用方法

    有时我们的程序使用默认的Toast时会和程序的整体风格不搭配，这个时候我们就需要自定义Toast，使其与我们的程序更加融合,使用自定义Toast，首先我们需要添加一个布局文件，该布局文件的结构和Activity使用的布局文件结构一致，在该布局文件中我们需设计我们Toast的布局
    2013-01-01
  • Android使用AlertDialog实现弹出菜单的详细过程

    Android使用AlertDialog实现弹出菜单的详细过程

    在Android经常会用到AlertDialog,下面这篇文章主要给大家介绍了关于Android使用AlertDialog实现弹出菜单的详细过程,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-04-04
  • Android编程之软键盘的隐藏显示实例详解

    Android编程之软键盘的隐藏显示实例详解

    这篇文章主要介绍了Android编程之软键盘的隐藏显示,结合实例形式详细分析了Android编程中软键盘的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-12-12
  • Android spinner下垃菜单用法实例详解

    Android spinner下垃菜单用法实例详解

    这篇文章主要介绍了Android spinner下垃菜单用法,详细分析了spinner下垃菜单的定义、布局及功能实现相关技巧,需要的朋友可以参考下
    2016-07-07
  • Kotlin挂起函数的详细介绍

    Kotlin挂起函数的详细介绍

    挂起函数用状态机以挂起点将协程的运算逻辑拆分成不同的片段，每次执行协程运行不同的逻辑片段，由此可以知道协程是运行在线程中的，线程的并发处理方式也可以用在协程上
    2022-09-09
  • 解决Android Studio 格式化快捷键和QQ 锁键盘快捷键冲突问题

    解决Android Studio 格式化快捷键和QQ 锁键盘快捷键冲突问题

    每次打开qq使用android studio格式化的快捷键Ctrl + Alt +L时，总是出现qq锁键盘提示，怎么回事呢？下面小编给大家带来了android studio格式化的快捷键和qq快捷键之间的冲突的处理方法，需要的朋友参考下吧
    2017-12-12
  • Android注解基础介绍快速入门与解读

    Android注解基础介绍快速入门与解读

    首先什么是注解,它的作用是什么,本文讲解了Android注解的最基本内容与实例解读
    2018-09-09
  • 利用Android实现一种点赞动画效果的全过程

    利用Android实现一种点赞动画效果的全过程

    最近做项目需要实现点赞动画,下面这篇文章主要给大家介绍了关于利用Android实现一种点赞动画效果的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-12-12
  • 三款Android炫酷Loading动画组件推荐

    三款Android炫酷Loading动画组件推荐

    这篇文章主要介绍了三款Android炫酷Loading动画组件推荐,本文介绍了CircleProgress、android-shapeLoadingView、WaitingDots等三款Loading组件,并给出了运行效果图,需要的朋友可以参考下
    2015-05-05

最新评论