仿qq訊息拖拽效果
阿新 • • 發佈：2018-12-16
這是一個仿qq訊息拖拽效果，View和拖拽實現了分離，TextView、Button、Imageview等都可以實現相應的拖拽效果；在觸發的地方呼叫
MessageBubbleView.attach(findViewById(R.id.text_view), new MessageBubbleView.BubbleDisappearListener() { @Override public void dismiss(View view) { Toast.makeText(MainActivity.this,"消失了",Toast.LENGTH_LONG).show(); } });
就可以了，第一個引數需要傳入一個View，第二個引數需要出入BubbleDisappearListener的實現類進行消失監聽回撥；在attach();方法中也給傳入的View設定了觸控監聽事件；
/** * 繫結可以拖拽的控制元件 * * @param view * @param disappearListener */ public static void attach(View view, BubbleDisappearListener disappearListener) { if (view == null) { return; } view.setOnTouchListener(new BubbleMessageTouchListener(view, view.getContext(),disappearListener)); }
BubbleMessageTouchListener類的話是用來處理觸控監聽的類，先去看MessageBubbleView類，先去實現自定義view的效果，再去處理相應的觸控事件；
public class MessageBubbleView extends View { //兩個圓的圓心 private PointF mFixactionPoint; private PointF mDragPoint; //拖拽圓的半徑 private int mDragRadius = 15; //畫筆 private Paint mPaint; //固定圓的半徑 private int mFixactionRadius; //固定圓半徑的初始值 private int mFixactionRadiusMax = 12; //最小值 private int mFixactionRadiusmin = 3; private Bitmap mDragBitmap; public MessageBubbleView(Context context) { this(context, null); } public MessageBubbleView(Context context, AttributeSet attrs) { this(context, attrs, 0); } public MessageBubbleView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); mDragRadius = dip2px(mDragRadius); mFixactionRadiusMax = dip2px(mFixactionRadiusMax); mFixactionRadiusmin = dip2px(mFixactionRadiusmin); mPaint = new Paint(); mPaint.setColor(Color.RED); mPaint.setAntiAlias(true); mPaint.setDither(true); } private int dip2px(int dip) { return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dip, getResources().getDisplayMetrics()); } }
首先是一些引數的定義及畫筆的初始化，接下來就要在onDraw()方法中進行繪製，這裡會涉及到兩個圓的繪製，一個是固定圓，還有一個是拖拽圓，對於拖拽圓來說，確定x，y座標及圓的半徑就可以進行繪製了，相對來說簡單些，對於固定圓來說，一開始有一個初始值，半徑是隨著距離的增大而減小，小到一定程度就消失；
@Override
protected void onDraw(Canvas canvas) {
if (mDragPoint == null || mFixactionPoint == null) {
return;
}
//畫兩個圓
//繪製拖拽圓
canvas.drawCircle(mDragPoint.x, mDragPoint.y, mDragRadius, mPaint);
//繪製固定圓 有一個初始大小，而且半徑是隨著距離的增大而減小，小到一定程度就消失
Path bezeierPath = getBezeierPath();
if (bezeierPath != null) {
canvas.drawCircle(mFixactionPoint.x, mFixactionPoint.y, mFixactionRadius, mPaint);
//繪製貝塞爾曲線
canvas.drawPath(bezeierPath, mPaint);
}
if (mDragBitmap != null) {
//繪製圖片 位置也是手指一動的位置 中心位置才是手指拖動的位置
canvas.drawBitmap(mDragBitmap, mDragPoint.x - mDragBitmap.getWidth() / 2, mDragPoint.y - mDragBitmap.getHeight() / 2, null);
}
}
繪製了拖拽圓和固定圓後，就需要將兩個圓連線起來，連線兩個圓的路徑的繪製就需要使用三階貝塞爾曲線來實現；
看過去，需要求p0、p1、p2、p3，這幾個點的左邊，對於c0、c1的座標，拖拽圓和固定圓的半徑都是知道的，可以先求出c0到c1的距離，對於p0、p1、p2、p3座標可以通過三角函式求得，再利用Path路徑進行繪製；
/**
* 獲取貝塞爾的路徑
*
* @return
*/
public Path getBezeierPath() {
//計算兩個點的距離
double distance = getDistance(mDragPoint, mFixactionPoint);
mFixactionRadius = (int) (mFixactionRadiusMax - distance / 14);
if (mFixactionRadius < mFixactionRadiusmin) {
//超過一定距離不需要繪製貝塞爾曲線和圓
return null;
}
Path path = new Path();
//求斜率
float dy = (mDragPoint.y - mFixactionPoint.y);
float dx = (mDragPoint.x - mFixactionPoint.x);
float tanA = dy / dx;
//求角a
double arcTanA = Math.atan(tanA);
//p0
float p0x = (float) (mFixactionPoint.x + mFixactionRadius * Math.sin(arcTanA));
float p0y = (float) (mFixactionPoint.y - mFixactionRadius * Math.cos(arcTanA));
//p1
float p1x = (float) (mDragPoint.x + mDragRadius * Math.sin(arcTanA));
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) (mFixactionPoint.x - mFixactionRadius * Math.sin(arcTanA));
float p3y = (float) (mFixactionPoint.y + mFixactionRadius * Math.cos(arcTanA));
//拼裝貝塞爾曲線
path.moveTo(p0x, p0y);
//兩個點，第一個是控制點，第二個是p1的位置
PointF controlPoint = getControlPoint();
//繪製第一條
path.quadTo(controlPoint.x, controlPoint.y, p1x, p1y);
//繪製第二條
path.lineTo(p2x, p2y);
path.quadTo(controlPoint.x, controlPoint.y, p3x, p3y);
//閉合
path.close();
return path;
}
public PointF getControlPoint() {
//控制點選取的為圓心的中心點
PointF controlPoint = new PointF();
controlPoint.x = (mDragPoint.x + mFixactionPoint.x) / 2;
controlPoint.y = (mDragPoint.y + mFixactionPoint.y) / 2;
return controlPoint;
}接下來就是處理手勢觸摸了，手勢觸控主要是在BubbleMessageTouchListener類中的onTouch()方法中進行處理；
@Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
//在windowManager上面搞一個view，
mWindowManager.addView(mMessageBubbleView, mParams);
//初始化貝塞爾view的點
//需要獲取螢幕的位置 不是相對於父佈局的位置 還需要減掉狀態列的高度
//將頁面做為全屏的可以將其拖拽到狀態列上面
//保證固定圓的中心在view的中心
int[] location = new int[2];
mStateView.getLocationOnScreen(location);
Bitmap bitmapByView = getBitmapByView(mStateView);
mMessageBubbleView.initPoint(location[0] + mStateView.getWidth() / 2, location[1] + mStateView.getHeight() / 2 - BubbleUtils.getStatusBarHeight(mContext));
//給訊息拖拽設定一個bitmap
mMessageBubbleView.setDragBitmap(bitmapByView);
//首先將自己隱藏
mStateView.setVisibility(View.INVISIBLE);
break;
case MotionEvent.ACTION_MOVE:
mMessageBubbleView.updataDragPoint(event.getRawX(), event.getRawY());
break;
case MotionEvent.ACTION_UP:
//拖動如果貝塞爾曲線沒有消失就回彈
//拖動如果貝塞爾曲線消失就爆炸
mMessageBubbleView.handleActionUp();
break;
}
return true;
}在按下拖拽的時候，為了能讓View能拖拽到手機螢幕上的任意一點，是在該view新增到了WindowManager上，
public BubbleMessageTouchListener(View mStateView, Context context,MessageBubbleView.BubbleDisappearListener disappearListener) {
this.mStateView = mStateView;
this.mContext = context;
this.disappearListener=disappearListener;
mWindowManager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
mMessageBubbleView = new MessageBubbleView(context);
//設定監聽
mMessageBubbleView.setMessageBubbleListener(this);
mParams = new WindowManager.LayoutParams();
//設定背景透明
mParams.format = PixelFormat.TRANSLUCENT;
mBombFrame = new FrameLayout(mContext);
mBombImageView = new ImageView(mContext);
mBombImageView.setLayoutParams(new FrameLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
mBombFrame.addView(mBombImageView);
}在按下的時候需要初始化座標點及設定相應的背景；
/**
* 初始化位置
*
* @param downX
* @param downY
*/
public void initPoint(float downX, float downY) {
mFixactionPoint = new PointF(downX, downY);
mDragPoint = new PointF(downX, downY);
}
/**
* @param bitmap
*/
public void setDragBitmap(Bitmap bitmap) {
this.mDragBitmap = bitmap;
}對於ACTION_MOVE手勢移動來說，只需要去不斷更新移動的座標就可以了；
/**
* 更新當前拖拽點的位置
*
* @param moveX
* @param moveY
*/
public void updataDragPoint(float moveX, float moveY) {
mDragPoint.x = moveX;
mDragPoint.y = moveY;
//不斷繪製
invalidate();
}對於ACTION_UP手勢鬆開的話，處理就要麻煩些，這裡需要判斷拖拽的距離，如果拖拽的距離在規定的距離內就反彈，如果超過規定的距離就消失，並伴隨相應的動畫效果；
/**
* 處理手指鬆開
*/
public void handleActionUp() {
if (mFixactionRadius > mFixactionRadiusmin) {
//拖動如果貝塞爾曲線沒有消失就回彈
//ValueAnimator 值變化的動畫 從0-->1的變化
ValueAnimator animator = ObjectAnimator.ofFloat(1);
animator.setDuration(250);
final PointF start = new PointF(mDragPoint.x, mDragPoint.y);
final PointF end = new PointF(mFixactionPoint.x, mFixactionPoint.y);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float animatedValue = (float) animation.getAnimatedValue();
// int percent = (int) animatedValue;
PointF pointF = BubbleUtils.getPointByPercent(start, end, animatedValue);
//更新當前拖拽點
updataDragPoint(pointF.x, pointF.y);
}
});
animator.setInterpolator(new OvershootInterpolator(5f));
animator.start();
//通知TouchListener移除當前View然後顯示靜態的view
animator.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
if(mListener!=null){
mListener.restore();
}
}
});
} else {
//拖動如果貝塞爾曲線消失就爆炸
if(mListener!=null){
mListener.dimiss(mDragPoint);
}
}
}而在MessageBubbleListener介面監聽中需要對void restore();和void dimiss(PointF pointf);進行相應的監聽處理，在拖拽距離在規定距離內的話就會去回撥restore()方法；
@Override
public void restore() {
//把訊息的view移除
mWindowManager.removeView(mMessageBubbleView);
//將原來的View顯示
mStateView.setVisibility(View.VISIBLE);
}如果拖拽的距離大於規定的距離就會去回撥void dimiss(PointF pointf);方法：
@Override
public void dimiss(PointF pointF) {
//要去執行爆炸動畫 幀動畫
//原來的view肯定要移除
mWindowManager.removeView(mMessageBubbleView);
//要在WindowManager新增一個爆炸動畫
mWindowManager.addView(mBombFrame, 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(mBombFrame);
//通知該view消失了
if(disappearListener!=null){
disappearListener.dismiss(mMessageBubbleView);
}
}
}, getAnimationDrawableTime(drawable));
}在拖拽消失後的那個消失動畫是使用幀動畫來實現的；
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="true" >
<item
android:drawable="@drawable/pop1"
android:duration="100"/>
<item
android:drawable="@drawable/pop2"
android:duration="100"/>
<item
android:drawable="@drawable/pop3"
android:duration="100"/>
<item
android:drawable="@drawable/pop4"
android:duration="100"/>
<item
android:drawable="@drawable/pop5"
android:duration="100"/>
</animation-list>這樣子效果就差不多ok了。
原始碼地址：
https://pan.baidu.com/s/1rakMHuk