1.要模仿的效果
hnwuq-656lw.gif
2 实现思路
2.1 怎么才能够把一个View拖动到状态栏上面
我们要把这个View放在 WindowManager 上面拖动，原来的View还是在原来位置只是隐藏，
拖动的时候其实是新建了一个View，复制一张图片在WindowManager上面拖动
2.2 回弹就是不断改变拖拽圆的位置
2.3 爆炸效果是一个帧动画
3 代码实现
public class BubbleMessageTouchListener implements View.OnTouchListener, MessageBubbleView.MessageBubbleListener {
private final Context mContext;
private final WindowManager mWindowManager;
private final WindowManager.LayoutParams mParams;
private View mView;
private final MessageBubbleView mMessageBubbleView;
private BubbleDisappearListener mBubbleTouchListener;
private FrameLayout mFrameLayout;
private ImageView mBombImage;
BubbleMessageTouchListener(View view, Context context, BubbleDisappearListener bubbleTouchListener) {
mView = view;
this.mContext = context;
mMessageBubbleView = new MessageBubbleView(view.getContext());
mBubbleTouchListener = bubbleTouchListener;
mMessageBubbleView.setMessageBubbleListener(this);
mWindowManager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
mParams = new WindowManager.LayoutParams();
// 背景要透明
mParams.format = PixelFormat.TRANSPARENT;
mFrameLayout = new FrameLayout(context);
mBombImage = new ImageView(context);
mFrameLayout.addView(mBombImage);
FrameLayout.LayoutParams layoutParams = (FrameLayout.LayoutParams) mBombImage.getLayoutParams();
layoutParams.width = FrameLayout.LayoutParams.WRAP_CONTENT;
layoutParams.height = FrameLayout.LayoutParams.WRAP_CONTENT;
mBombImage.setLayoutParams(layoutParams);
}
@Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
// 要在WindowManager上面搞一个View ,上一节写好的贝塞尔的View
mWindowManager.addView(mMessageBubbleView, mParams);
//获取当前View的bitmap
int[] location = new int[2];
mView.getLocationOnScreen(location);
Bitmap bitmap = getBitmapByView(mView);
//初始化固定圆
mMessageBubbleView.setDragBitmap(bitmap);
mMessageBubbleView.initFixedPoint(location[0] + mView.getWidth() / 2,
location[1] + mView.getWidth() / 2 - BubbleUtils.getStatusBarHeight(mContext));
//按下,隐藏当前的view.
mView.setVisibility(View.INVISIBLE);
break;
case MotionEvent.ACTION_MOVE:
mMessageBubbleView.updateDragPoint(event.getRawX(), event.getRawY() - BubbleUtils.getStatusBarHeight(mContext));
break;
case MotionEvent.ACTION_UP:
mMessageBubbleView.handleActionUp();
break;
default:
break;
}
return true;
}
/**
* 从一个View中获取Bitmap
*
* @param view
* @return
*/
private Bitmap getBitmapByView(View view) {
view.buildDrawingCache();
Bitmap bitmap = view.getDrawingCache();
return bitmap;
}
@Override
public void restore() {
mWindowManager.removeView(mMessageBubbleView);
mView.setVisibility(View.VISIBLE);
}
@Override
public void dismiss(PointF pointF) {
mWindowManager.removeView(mMessageBubbleView);
// 要在 mWindowManager 添加一个爆炸动画
mWindowManager.addView(mFrameLayout,mParams);
mBombImage.setBackgroundResource(R.drawable.anim_bubble_pop);
AnimationDrawable drawable = (AnimationDrawable) mBombImage.getBackground();
mBombImage.setX(pointF.x-drawable.getIntrinsicWidth()/2);
mBombImage.setY(pointF.y-drawable.getIntrinsicHeight()/2);
drawable.start();
// 等它执行完之后我要移除掉这个 爆炸动画也就是 mBombFrame
mBombImage.postDelayed(new Runnable() {
@Override
public void run() {
mWindowManager.removeView(mFrameLayout);
// 通知一下外面该消失
if(mBubbleTouchListener != null){
mBubbleTouchListener.dismiss();
}
}
},getAnimationDrawableTime(drawable));
}
private long getAnimationDrawableTime(AnimationDrawable drawable) {
int numberOfFrames = drawable.getNumberOfFrames();
long time = 0;
for (int i=0;i
public interface BubbleDisappearListener {
/**
* 消失
*/
void dismiss();
}
}
public class BubbleUtils {
/**
* dip 转换成 px
*
* @param dip
* @param context
* @return
*/
public static int dip2px( float dip, Context context) {
DisplayMetrics displayMetrics = context.getResources().getDisplayMetrics();
return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dip, displayMetrics);
}
/**
* 获取状态栏高度
*
* @return
*/
public static int getStatusBarHeight(Context context) {
//获取status_bar_height资源的ID
int resourceId = context.getResources().getIdentifier("status_bar_height", "dimen", "android");
if (resourceId > 0) {
//根据资源ID获取响应的尺寸值
return context.getResources().getDimensionPixelSize(resourceId);
}
return dip2px(25, context);
}
/**
* As meaning of method name. 获得两点之间的距离 (x1-x2)*(x1-x2)+(y1-y2)*(y1-y2) 开平方
* Math.sqrt:开平方 Math.pow(p0.y - p1.y, 2):求一个数的平方
*
* @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 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
* = 1
* @param start
* = 10
* @param end
* = 3
* @return
*/
public static float evaluateValue(float fraction, Number start, Number end) {
// start = 10 end = 2
//fraction = 0.5
// result = 10 + (-8) * fraction = 6
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 arctan, xOffset = 0, yOffset = 0;
if (lineK != null) {
// 计算直角三角形边长
// 余切函数（弧度）
arctan = (float) Math.atan(lineK);
// 正弦函数
xOffset = (float) (Math.sin(arctan) * radius);
// 余弦函数
yOffset = (float) (Math.cos(arctan) * 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;
}
}
public class MessageBubbleView extends View {
private static final String TAG = "zsjTAG";
private PointF mFixedPoint;
private PointF mDragPoint;
private int mFixedMaxRadius = 10;
private int mFixedMinRadius = 5;
private int mDragRadius = 12;
private Paint mPaint;
private PointF mP0;
private PointF mP1;
private PointF mP2;
private PointF mP3;
private PointF mControlPoint;
private Bitmap mDragBitmap;
public MessageBubbleView(Context context) {
this(context, null);
}
public MessageBubbleView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public MessageBubbleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
mFixedMaxRadius = dip2px(mFixedMaxRadius);
mFixedMinRadius = dip2px(mFixedMinRadius);
mDragRadius = dip2px(mDragRadius);
initPaint();
}
private void initPaint() {
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setDither(true);
mPaint.setColor(Color.RED);
}
private int dip2px(int dip) {
return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dip, getResources().getDisplayMetrics());
}
/* @Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
float fixedX = event.getX();
float fixedY = event.getY();
initFixedPoint(fixedX, fixedY);
break;
case MotionEvent.ACTION_MOVE:
float dragX = event.getX();
float dragY = event.getY();
updateDragPoint(dragX, dragY);
break;
case MotionEvent.ACTION_UP:
break;
default:
break;
}
invalidate();
return true;
}*/
public void updateDragPoint(float dragX, float dragY) {
if (mDragPoint == null) {
mDragPoint = new PointF( dragX, dragY);
}
mDragPoint.x = dragX;
mDragPoint.y = dragY;
invalidate();
}
public void initFixedPoint(float fixedX, float fixedY) {
if (mFixedPoint == null) {
mFixedPoint = new PointF();
}
mFixedPoint.x = fixedX;
mFixedPoint.y = fixedY;
invalidate();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (mFixedPoint == null || mDragPoint == null) {
return;
}
//绘制拖拽圆
canvas.drawCircle(mDragPoint.x, mDragPoint.y, mDragRadius, mPaint);
//移动的时候,固定圆缩小.根据拖拽圆和固定圆的距离缩小
//计算拖拽圆和固定圆的距离
double dragFixedDistance = getDragFixedDistance(mFixedPoint, mDragPoint);
float fixedRadius = (float) (mFixedMaxRadius - dragFixedDistance / 14);
if (fixedRadius > mFixedMinRadius) {
//绘制固定圆
canvas.drawCircle(mFixedPoint.x, mFixedPoint.y, fixedRadius, mPaint);
Path bezierPath = getBezierPath(mFixedPoint, mDragPoint);
canvas.drawPath(bezierPath, mPaint);
}
canvas.drawBitmap(mDragBitmap, mDragPoint.x - mDragBitmap.getWidth() / 2
, mDragPoint.y - mDragBitmap.getHeight() / 2, null);
}
private Path getBezierPath(PointF fixedPoint, PointF dagPoint) {
double dragFixedDistance = getDragFixedDistance(mFixedPoint, mDragPoint);
float fixedRadius = (float) (mFixedMaxRadius - dragFixedDistance / 14);
float dx = Math.abs(fixedPoint.x - dagPoint.x);
float dy = Math.abs(fixedPoint.y - dagPoint.y);
float tanA = dy / dx;
float a = (float) Math.atan(tanA);
//P0 点
if (mP0 == null) {
mP0 = new PointF();
}
mP0.x = mDragPoint.x + (int) (mDragRadius * Math.sin(a));
mP0.y = mDragPoint.y - (int) (mDragRadius * Math.cos(a));
//P1 点
if (mP1 == null) {
mP1 = new PointF();
}
mP1.x = mFixedPoint.x + (int) (fixedRadius * Math.sin(a));
mP1.y = mFixedPoint.y - (int) (fixedRadius * Math.cos(a));
//P2 点
if (mP2 == null) {
mP2 = new PointF();
}
mP2.x = mFixedPoint.x - (int) (fixedRadius * Math.sin(a));
mP2.y = mFixedPoint.y + (int) (fixedRadius * Math.cos(a));
//P0 点
if (mP3 == null) {
mP3 = new PointF();
}
mP3.x = mDragPoint.x - (int) (mDragRadius * Math.sin(a));
mP3.y = mDragPoint.y + (int) (mDragRadius * Math.cos(a));
//绘制路径
Path path = new Path();
path.moveTo(mP0.x, mP0.y);
//控制点选择固定圆和拖拽圆的中心点
PointF controlPoint = getControlPoint();
path.quadTo(controlPoint.x, controlPoint.y, mP1.x, mP1.y);
path.lineTo(mP2.x, mP2.y);
path.quadTo(controlPoint.x, controlPoint.y, mP3.x, mP3.y);
path.close();
return path;
}
private PointF getControlPoint() {
if (mControlPoint == null) {
mControlPoint = new PointF();
}
mControlPoint.x = (mDragPoint.x + mFixedPoint.x) / 2;
mControlPoint.y = (mDragPoint.y + mFixedPoint.y) / 2;
return mControlPoint;
}
private double getDragFixedDistance(PointF fixedPoint, PointF dagPoint) {
return Math.sqrt((dagPoint.x - fixedPoint.x) * (dagPoint.x - fixedPoint.x) + (dagPoint.y - fixedPoint.y) * (dagPoint.y - fixedPoint.y));
}
public static void attach(View view, BubbleMessageTouchListener.BubbleDisappearListener bubbleTouchListener) {
view.setOnTouchListener(new BubbleMessageTouchListener(view, view.getContext(),bubbleTouchListener));
}
public void setDragBitmap(Bitmap dragBitmap) {
mDragBitmap = dragBitmap;
invalidate();
}
public void handleActionUp() {
double dragFixedDistance = getDragFixedDistance(mFixedPoint, mDragPoint);
float fixedRadius = (float) (mFixedMaxRadius - dragFixedDistance / 14);
if (fixedRadius > mFixedMinRadius) {
//回弹
// 0 - 1
ValueAnimator valueAnimator = ValueAnimator.ofFloat(1);
valueAnimator.setDuration(250);
final PointF start = new PointF(mFixedPoint.x, mFixedPoint.y);
final PointF end = new PointF(mDragPoint.x, mDragPoint.y);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float percent = (float) animation.getAnimatedValue();
PointF pointF = BubbleUtils.getPointByPercent(end, start, percent);
updateDragPoint(pointF.x, pointF.y);
}
});
valueAnimator.setInterpolator(new OvershootInterpolator(3f));
valueAnimator.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
if (mListener != null) {
mListener.restore();
}
}
});
valueAnimator.start();
} else {
//爆炸
if (mListener != null){
mListener.dismiss(mDragPoint);
}
}
}
private MessageBubbleListener mListener;
public void setMessageBubbleListener(MessageBubbleListener listener) {
this.mListener = listener;
}
public interface MessageBubbleListener {
// 还原
public void restore();
// 消失爆炸
public void dismiss(PointF pointF);
}
}
4 仿写效果
gpjvn-6go3t.gif
5 完整代码
messagebubbleview