您的位置:首页 > 其它

自定义view——贝塞尔曲线之仿qq消息气泡拖拽让所有view拖动爆炸

2018-03-05 11:45 369 查看
之前写过一篇文章:自定义view——贝塞尔曲线之仿qq消息气泡拖拽

http://blog.csdn.net/qq_24675479/article/details/79430672

这里将完善上个项目,让其所有view都可以首先拖动爆炸



首先工具类

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);
}

/**
* 获取状态栏的高度
*/
public static int getStatusBarHeight(Context context) {
int resourceId = context.getResources().getIdentifier("status_bar_height", "dimen", "android");
if (resourceId > 0) {
return context.getResources().getDimensionPixelOffset(resourceId);
}
return dip2px(25, context);
}
/**
* 根据百分比获取两点之间的某个点坐标
*/
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;
}
}


修改MessageBubbleView

public class MessageBubbleView extends View {
// 两个圆的圆形
private PointF mFixationPoint, mDragPoint;
// 拖拽圆的半径
private int mDragRadius = 10;
private Paint mPaint;
// 固定圆的最大半径(初始半径)
private int mFixationRadiusMax = 7;
private int mFixationRadiusMin = 3;
private int mFixationRadius;
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);
mPaint = new Paint();
mPaint.setColor(Color.RED);
mPaint.setAntiAlias(true);
mPaint.setDither(true);
mDragRadius = dp2x(mDragRadius);
mFixationRadiusMax = dp2x(mFixationRadiusMax);
mFixationRadiusMin = dp2x(mFixationRadiusMin);
}

private int dp2x(int dpValue) {
return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dpValue, getResources().getDisplayMetrics());
}

@Override
protected void onDraw(Canvas canvas) {
if (mDragPoint == null || mFixationPoint == null) {
return;
}
//绘制拖拽的圆
canvas.drawCircle(mDragPoint.x, mDragPoint.y, mDragRadius, mPaint);

//获得两个圆之间的距离
double distance = getDistance(mDragPoint, mFixationPoint);
mFixationRadius = (int) (mFixationRadiusMax - distance / 14);
Path bezeierPath = getBezeierPath();

if (bezeierPath != null) {//当大于最小的时候才绘制
//绘制固定的圆
canvas.drawCircle(mFixationPoint.x, mFixationPoint.y, mFixationRadius, mPaint);
//绘制贝塞尔曲线
canvas.drawPath(bezeierPath, mPaint);

}
if (mDragBitmap != null) {
//绘制一个bitmap
canvas.drawBitmap(mDragBitmap, mDragPoint.x - mDragBitmap.getWidth() / 2
, mDragPoint.y - mDragBitmap.getHeight() / 2, null);
}
}

/**
* 获取两个圆之间的距离
*/
private double getDistance(PointF point1, PointF point2) {
return Math.sqrt((point1.x - point2.x) * (point1.x - point2.x)
+ (point1.y - point2.y) * (point1.y - point2.y));
}

/* @Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
float downX = event.getX();
float downY = event.getY();
initPoint(downX, downY);
break;
case MotionEvent.ACTION_MOVE:
float moveX = event.getX();
float moveY = event.getY();
updatePoint(moveX, moveY);
break;
case MotionEvent.ACTION_UP:
break;
}
invalidate();
return true;

}*/

/**
* 更新拖拽点的坐标
*/
public void updatePoint(float moveX, float moveY) {
mDragPoint.x = moveX;
mDragPoint.y = moveY;
invalidate();
}

/**
* 初始化点
*/
public void initPoint(float downX, float downY) {
mFixationPoint = new PointF(downX, downY);
mDragPoint = new PointF(downX, downY);
invalidate();
}

/**
* 获得贝塞尔的曲线
*
* @return
*/
public Path getBezeierPath() {

if (mFixationRadius < mFixationRadiusMin) {
// 超过一定距离 贝塞尔和固定圆都不要画了
return null;
}

Path bezeierPath = new Path();
//求角a
//求斜率
float dy = mDragPoint.y - mFixationPoint.y;
float dx = mDragPoint.x - mFixationPoint.x;
float tanA = dy / dx;
//求出角a
double arcTanA = Math.atan(tanA);

//p0
float p0x = (float) (mFixationRadius * Math.sin(arcTanA) + mFixationPoint.x);
float p0y = (float) (mFixationPoint.y - mFixationRadius * Math.cos(arcTanA));

//p1
float p1x = (float) (mDragRadius * Math.sin(arcTanA) + mDragPoint.x);
float p1y = (float) (mDragPoint.y - mDragRadius * Math.cos(arcTanA));

//p2
float p2x = (float) (mDragPoint.x - mDragRadius * Math.sin(arcTanA));
float p2y = (float) (mDragPoint.y + mDragRadius * Math.cos(arcTanA));

//p3
float p3x = (float) (mFixationPoint.x - mFixationRadius * Math.sin(arcTanA));
float p3y = (float) (mFixationPoint.y + mFixationRadius * Math.cos(arcTanA));

//绘制贝塞尔曲线
bezeierPath.moveTo(p0x, p0y);
//绘制第一条线
PointF controlPoint = getControlPoint();
bezeierPath.quadTo(controlPoint.x, controlPoint.y, p1x, p1y);//控制点+目标坐标
//绘制到第二条
bezeierPath.lineTo(p2x, p2y);
bezeierPath.quadTo(controlPoint.x, controlPoint.y, p3x, p3y);
//最后闭合
bezeierPath.close();
return bezeierPath;
}

/**
* 获取控制点
*/
public PointF getControlPoint() {
return new PointF((mDragPoint.x + mFixationPoint.x) / 2, (mDragPoint.y + mFixationPoint.y) / 2);
}

/**
* 设置可拖拽的事件
*/
public static void attach(View view, BubbleMessageTouchListener.BubbleDisappearListener disappearListener) {
view.setOnTouchListener(new BubbleMessageTouchListener(view, view.getContext(),disappearListener));
}

public void setDragBitmap(Bitmap dragBitmap) {
this.mDragBitmap = dragBitmap;
}

//手指放开
public void handleActionUp() {
if (mFixationRadius > mFixationRadiusMin) {
//回弹   ValueAnimator 值变化的动画  0 变化到 1
ValueAnimator animator = ValueAnimator.ofFloat(0, 1);
animator.setDuration(250);
final PointF start=new PointF(mDragPoint.x,mDragPoint.y);
final PointF end=new PointF(mFixationPoint.x,mFixationPoint.y);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float precent = (float) animation.getAnimatedValue();//获得当前百分比
PointF pointF=BubbleUtils.getPointByPercent(start,end,precent);
//PointF pointF=BubbleUtils.getPointByPercent(mDragPoint,mFixationPoint,precent);//会没有回弹效果
updatePoint(pointF.x,pointF.y);
}
});
//差值器  回弹的时候弹一下
animator.setInterpolator(new OvershootInterpolator(3f));
animator.start();
// 还要通知 TouchListener 移除当前View 然后显示静态的 View
animator.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
//动画结束,移除
if(mListener!=null){
mListener.restore();
}
}
});
} else {
// 爆炸
if(mListener != null){
mListener.dismiss(mDragPoint);
}
}
}

private BubbleDisappearListener mListener;

public void setListener(BubbleDisappearListener mListener) {
this.mListener = mListener;
}

public interface BubbleDisappearListener {
//恢复
void restore();
//爆炸消失
void dismiss(PointF mDragPoint);
}
}


BubbleMessageTouchListener:触摸事件终究处理类

public class BubbleMessageTouchListener implements View.OnTouchListener, MessageBubbleView.BubbleDisappearListener {
// 原来需要拖动爆炸的View
private View mStaticView;
//消失后创建一个view
private MessageBubbleView mMessageBubbleView;
//创建一个windowManager
private WindowManager mWindowManager;
private WindowManager.La
cba2
youtParams mParams;
private Context mContext;

//爆炸
private FrameLayout mBmobFrameLayout;
private ImageView mBombImageView;
BubbleDisappearListener mDisappearListener;

public BubbleMessageTouchListener(View view, Context context, BubbleDisappearListener disappearListener) {
this.mStaticView = view;
mMessageBubbleView = new MessageBubbleView(context);
mMessageBubbleView.setListener(this);
mWindowManager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
mParams = new WindowManager.LayoutParams();
//设置背景透明
mParams.format = PixelFormat.TRANSPARENT;
this.mContext = context;
this.mDisappearListener = disappearListener;
//初始化爆炸
mBmobFrameLayout = new FrameLayout(mContext);
mBombImageView = new ImageView(mContext);
mBombImageView.setLayoutParams(new FrameLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT
, ViewGroup.LayoutParams.WRAP_CONTENT));
mBmobFrameLayout.addView(mBombImageView);
}

@Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:

mWindowManager.addView(mMessageBubbleView, mParams);
//应该是中心位置而不是按下的位置
// mMessageBubbleView.initPoint(event.getRawX(), event.getRawY() - BubbleUtils.getStatusBarHeight(mContext));
int[] location = new int[2];
mStaticView.getLocationOnScreen(location);
mMessageBubbleView.initPoint(location[0] + mStaticView.getWidth(),
location[1] + mStaticView.getWidth() / 2 - BubbleUtils.getStatusBarHeight(mContext));
Bitmap bitmap = getBitmapByView(mStaticView);
//给mMessageBubbleView添加一个拖拽的view
mMessageBubbleView.setDragBitmap(bitmap);
//控件消失
mStaticView.setVisibility(View.INVISIBLE);
break;
case MotionEvent.ACTION_MOVE:
mMessageBubbleView.updatePoint(event.getRawX(), event.getRawY() - BubbleUtils.getStatusBarHeight(mContext));
break;
case MotionEvent.ACTION_UP:
mMessageBubbleView.handleActionUp();
break;
}

return true;
}

/**
* 从view中获取bitmap
*/
private Bitmap getBitmapByView(View view) {
view.buildDrawingCache();
Bitmap bitmap = view.getDrawingCache();
return bitmap;
}

//恢复
@Override
public void restore() {
mWindowManager.removeView(mMessageBubbleView);
mStaticView.setVisibility(View.VISIBLE);
}

@Override
public void dismiss(PointF pointF) {
// 要去执行爆炸动画 (帧动画)
// 原来的View的View肯定要移除
mWindowManager.removeView(mMessageBubbleView);
mWindowManager.addView(mBmobFrameLayout, mParams);
//添加一个动画效果
mBombImageView.setBackgroundResource(R.drawable.anim_bubble_pop);
AnimationDrawable drawable = (AnimationDrawable) mBombImageView.getBackground();
//设置爆炸图片的位置
mBombImageView.setX(pointF.x - drawable.getIntrinsicWidth() / 2);
mBombImageView.setY(pointF.y - drawable.getIntrinsicHeight() / 2);
drawable.start();
// 等它执行完之后要移除掉这个 爆炸动画也就是 mBombFrame
mBombImageView.postDelayed(new Runnable() {
@Override
public void run() {
mWindowManager.removeView(mBmobFrameLayout);
//通知外面要消失
mDisappearListener.dismiss(mStaticView);
}
}, getAnimationDrawableTime(drawable));
}

private long getAnimationDrawableTime(AnimationDrawable drawable) {
long time = 0;
int frames = drawable.getNumberOfFrames();
for (int i = 0; i < frames; i++) {
time += drawable.getDuration(i);
}
return time;
}

/**
* 提供接口给外部
*/
public interface BubbleDisappearListener {
void dismiss(View view);
}
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: