Android仿QQ消息拖拽黏连消失效果,气泡爆炸效果

公司需要这个效果,看了很多博客,根据自己项目的需要写出来的一个完整的过程.

拖拽控件代码

根据手势拖动的位置利用贝塞尔曲线算法画出控件

package cn.stike.bubble.stickbubbledemo.view;import android.content.Context;
import android.graphics.PixelFormat;
import android.graphics.PointF;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.WindowManager;public class StickBubble extends LLBBubble {private LRBubble mInnerStickBall;// 手抬起时的回调private OnDragUpListener mOnDragUpListener;private WindowManager mWindowManager;private float getCurrentX;private float getCurrentY;public float getGetCurrentX() {return getCurrentX;}public void setGetCurrentX(float getCurrentX) {this.getCurrentX = getCurrentX;}public float getGetCurrentY() {return getCurrentY;}public void setGetCurrentY(float getCurrentY) {this.getCurrentY = getCurrentY;}public StickBubble(Context context) {this(context, null);}public StickBubble(Context context, @Nullable AttributeSet attrs) {this(context, attrs, 0);}public StickBubble(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);mWindowManager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {mLTPoint.set(getPaddingLeft() + mContentHeight / 2, getPaddingTop());mRBPoint.set(mLTPoint.x + mContentWidth - mContentHeight, mLTPoint.y + mContentHeight);mBaseLinePoint.set(getPaddingLeft() + (mContentWidth - mBounds.width()) / 2, getPaddingTop() + (mContentHeight + mBounds.height()) / 2);widthMeasureSpec = MeasureSpec.makeMeasureSpec(mContentWidth + getPaddingLeft() + getPaddingRight(), MeasureSpec.getMode(widthMeasureSpec));heightMeasureSpec = MeasureSpec.makeMeasureSpec(mContentHeight + getPaddingTop() + getPaddingBottom(), MeasureSpec.getMode(heightMeasureSpec));super.onMeasure(widthMeasureSpec, heightMeasureSpec);}@Overridepublic boolean onTouchEvent(MotionEvent event) {switch (event.getAction()) {case MotionEvent.ACTION_DOWN:if (mHasDown) {return true;}mHasDown = true;setVisibility(INVISIBLE);showDragView();return true;case MotionEvent.ACTION_MOVE:mInnerStickBall.performTouchEvent(event);return true;case MotionEvent.ACTION_UP:/***记录bubble气泡爆炸应出现的坐标值*/setGetCurrentX(event.getRawX());setGetCurrentY(event.getRawY());mInnerStickBall.performTouchEvent(event);return true;}return super.onTouchEvent(event);}int[] outSize;private void showDragView() {outSize = new int[2];getLocationOnScreen(outSize);mInnerStickBall = new LRBubble(getContext(),new PointF(mLTPoint.x + outSize[0], mLTPoint.y + outSize[1]),new PointF(mRBPoint.x + outSize[0], mRBPoint.y + outSize[1]),mMaxDistance, getText(), mTextColor, mBallColor, getPaint());mInnerStickBall.setOnDragUpListener(new OnDragUpListener() {@Overridepublic void onDragUp(boolean overstep) {if (mWindowManager != null) {mWindowManager.removeView(mInnerStickBall);}if (!overstep) {setVisibility(VISIBLE);}if (mOnDragUpListener != null) {mOnDragUpListener.onDragUp(overstep);}mHasDown = false;}});if (mWindowManager == null) {return;}WindowManager.LayoutParams params = new WindowManager.LayoutParams();params.format = PixelFormat.TRANSLUCENT;params.type |= WindowManager.LayoutParams.TYPE_APPLICATION_PANEL;mWindowManager.addView(mInnerStickBall, params);}/*** 设置判定超出范围的最大距离** @param maxDistance*/public void setMaxDistance(double maxDistance) {mMaxDistance = maxDistance;}public void setOnDragUpListener(OnDragUpListener onDragUpListener) {mOnDragUpListener = onDragUpListener;}/*** 手指抬起时的回调*/public interface OnDragUpListener {/*** @param overstep true表示超过最大范围，粘性球消失，false表示未超过范围，粘性球未消失*/void onDragUp(boolean overstep);}}

Activity代码

使用帧动画将气泡爆炸的效果展现出来,帧动画是用xml实现的,很简单,这里就不贴代码了

package cn.stike.bubble.stickbubbledemo;import android.content.Context;
import android.content.Intent;
import android.graphics.PixelFormat;
import android.graphics.drawable.AnimationDrawable;
import android.os.Build;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.view.WindowManager;
import android.widget.FrameLayout;
import android.widget.ImageView;import cn.stike.bubble.stickbubbledemo.view.BubbleLayout;
import cn.stike.bubble.stickbubbledemo.view.StickBall;public class MainActivity extends TabActivity {private TabHost tabHost;int CurrentPage;int setlanguage;TabHost.TabSpec spec;private StickBall mybragballview;private WindowManager mWm;private WindowManager.LayoutParams mParams;private Handler mHandler = new Handler() {@Overridepublic void handleMessage(Message msg) {super.handleMessage(msg);}};@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);mWm = (WindowManager) getSystemService(Context.WINDOW_SERVICE);mParams = new WindowManager.LayoutParams();mParams.format = PixelFormat.TRANSLUCENT;//使窗口支持透明度if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {mParams.flags = WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS;}mybragballview = (StickBall) findViewById(R.id.mybragballview);mybragballview.setOnDragUpListener(new StickBall.OnDragUpListener() {@Overridepublic void onDragUp(boolean overstep) {if (overstep) {//气泡消失   在此气泡爆炸的动画开始出现showDisapearBubble();}}});}public void showDisapearBubble() {if (mWm != null && mybragballview.getParent() != null) {//播放气泡爆炸动画ImageView imageView = new ImageView(MainActivity.this);imageView.setImageResource(R.drawable.anim_bubble_pop);AnimationDrawable mAnimDrawable = (AnimationDrawable) imageView.getDrawable();final BubbleLayout bubbleLayout = new BubbleLayout(MainActivity.this);//获取bubble气泡爆炸出现的坐标值  显示int x = (int) mybragballview.getGetCurrentX();int y = (int) mybragballview.getGetCurrentY();bubbleLayout.setCenter(x, y);bubbleLayout.addView(imageView, new FrameLayout.LayoutParams(android.widget.FrameLayout.LayoutParams.WRAP_CONTENT,android.widget.FrameLayout.LayoutParams.WRAP_CONTENT));mWm.addView(bubbleLayout, mParams);mAnimDrawable.start();// 播放结束后，删除该bubbleLayoutmHandler.postDelayed(new Runnable() {@Overridepublic void run() {mWm.removeView(bubbleLayout);}}, 501);mHandler.postDelayed(new Runnable() {@Overridepublic void run() {//更新界面把所有消息变成已读}}, 510);}}
}

bubble爆炸布局

package cn.stike.bubble.stickbubbledemo.view;import android.content.Context;
import android.view.View;
import android.widget.FrameLayout;/*** Created by Administrator on 2018/9/19.* 播放爆炸动画的layout*/public class BallLayout extends FrameLayout {Context context;public BallLayout(Context context) {super(context);this.context = context;}private int mCenterX, mCenterY;public void setCenter(int x, int y) {mCenterX = x;mCenterY = y;requestLayout();}@Overrideprotected 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));}}
}

demo下载网址:https://download.csdn.net/download/congcongguniang/10676281

Android仿QQ消息拖拽黏连消失效果,气泡爆炸效果相关推荐

Android仿QQ消息拖拽效果（二）
前言本文参考辉哥贝塞尔曲线 - QQ消息汽包拖拽,前面我们使用二阶贝塞尔曲线绘制了拖拽圆点效果Android仿QQ消息拖拽效果(一)(二阶贝塞尔曲线使用),这里我们在此基础之上实现仿QQ消息拖拽爆炸 ...
贝塞尔曲线（Bezier）之 QQ 消息拖拽动画效果
博主声明: 转载请在开头附加本文链接及作者信息,并标记为转载.本文由博主威威喵原创,请多支持与指教. 本文首发于此博主:威威喵 | 博客主页:https://blog.csdn.net/ ...
Android自定义View-模仿QQ的拖拽气泡
第一步:明白气泡的几个状态第二步:明白大概的思路第三步:初始化组价的属性,并计算组件的大小第四步:通过点击,拖动,取消,分别获取到两点之间的距离,然后得到组件的各个状态第五步:绘制图像 1.如 ...
Android仿QQ、微信聊天界面长按提示框效果
最近在工作项目中要实现一个长按提示 "复制" 的功能,类似于QQ.微信聊天界面长按提示框效果,本来想偷懒在网上找个开源的项目用,但是看了好几个都不是很满意,所以就打算按照自己的思路 ...
Android 仿QQ消息界面
values 下面 dimens.xml <resources><!-- Default screen margins, per the Android Design guideli ...
Android文本长按qq风格,Android仿QQ、微信聊天界面长按提示框效果
先来看看效果图如何使用示例代码 PromptViewHelper pvHelper = new PromptViewHelper(mActivity); pvHelper.setPromptVie ...
android qq消息数拖拽动画,史上最详细仿QQ未读消息拖拽粘性效果的实现
好久没写文章了,前段时间由于项目代码重构忙了一段时间,现在终于有点时间了就为大家带来一篇关于动画学习的自定义View:类似QQ消息拖拽的效果. 其实QQ当时更新的时候我还没注意到这个小红点是可以拖拽的 ...
微信小程序之『仿 QQ 消息气泡拖拽消失』
转载:请写明掘金原文链接及作者名 '小小小' 一个潜心研究小程序QQ群:139128168 ← 点击加群今天带来的是仿QQ消息气泡拖拽消失特效,源码中很多地方还是有很多不足,希望大家一起齐心协力,给 ...
Android 仿新版QQ的tab下面拖拽标记为已读的效果
可拖拽的红点,(仿新版QQ,tab下面拖拽标记为已读的效果),拖拽一定的距离可以消失回调. GitHub:DraggableFlagView(https://github.com/wangjiegul ...

Android仿QQ消息拖拽黏连消失效果,气泡爆炸效果

Android仿QQ消息拖拽黏连消失效果,气泡爆炸效果相关推荐

最新文章

热门文章