Android仿qq消息拖拽效果
更新時間：2019年01月27日 10:30:05 作者：老胡楊
這篇文章主要為大家詳細(xì)介紹了Android仿qq消息拖拽效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了Android仿qq消息拖拽效果展示的具體代碼，供大家參考，具體內(nèi)容如下
這是一個仿qq消息拖拽效果，View和拖拽實(shí)現(xiàn)了分離，TextView、Button、Imageview等都可以實(shí)現(xiàn)相應(yīng)的拖拽效果；在觸發(fā)的地方調(diào)用
MessageBubbleView.attach(findViewById(R.id.text_view), new MessageBubbleView.BubbleDisappearListener() {
@Override
public void dismiss(View view) {
Toast.makeText(MainActivity.this,"消失了",Toast.LENGTH_LONG).show();
}
});
就可以了，第一個參數(shù)需要傳入一個View，第二個參數(shù)需要出入BubbleDisappearListener的實(shí)現(xiàn)類進(jìn)行消失監(jiān)聽回調(diào)；在attach();方法中也給傳入的View設(shè)置了觸摸監(jiān)聽事件；
/**
* 綁定可以拖拽的控件
*
* @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類的話是用來處理觸摸監(jiān)聽的類，先去看MessageBubbleView類，先去實(shí)現(xiàn)自定義view的效果，再去處理相應(yīng)的觸摸事件；
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());
}
}
首先是一些參數(shù)的定義及畫筆的初始化，接下來就要在onDraw()方法中進(jìn)行繪制，這里會涉及到兩個圓的繪制，一個是固定圓，還有一個是拖拽圓，對于拖拽圓來說，確定x，y坐標(biāo)及圓的半徑就可以進(jìn)行繪制了，相對來說簡單些，對于固定圓來說，一開始有一個初始值，半徑是隨著距離的增大而減小，小到一定程度就消失；
@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);
}
}
繪制了拖拽圓和固定圓后，就需要將兩個圓連接起來，連接兩個圓的路徑的繪制就需要使用三階貝塞爾曲線來實(shí)現(xiàn)；
看過去，需要求p0、p1、p2、p3，這幾個點(diǎn)的左邊，對于c0、c1的坐標(biāo)，拖拽圓和固定圓的半徑都是知道的，可以先求出c0到c1的距離，對于p0、p1、p2、p3坐標(biāo)可以通過三角函數(shù)求得，再利用Path路徑進(jìn)行繪制；
/**
* 獲取貝塞爾的路徑
*
* @return
*/
public Path getBezeierPath() {
//計算兩個點(diǎn)的距離
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);
//兩個點(diǎn)，第一個是控制點(diǎn)，第二個是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() {
//控制點(diǎn)選取的為圓心的中心點(diǎn)
PointF controlPoint = new PointF();
controlPoint.x = (mDragPoint.x + mFixactionPoint.x) / 2;
controlPoint.y = (mDragPoint.y + mFixactionPoint.y) / 2;
return controlPoint;
}
接下來就是處理手勢觸摸了，手勢觸摸主要是在BubbleMessageTouchListener類中的onTouch()方法中進(jìn)行處理；
@Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
//在windowManager上面搞一個view，
mWindowManager.addView(mMessageBubbleView, mParams);
//初始化貝塞爾view的點(diǎn)
//需要獲取屏幕的位置 不是相對于父布局的位置 還需要減掉狀態(tài)欄的高度
//將頁面做為全屏的可以將其拖拽到狀態(tài)欄上面
//保證固定圓的中心在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));
//給消息拖拽設(shè)置一個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能拖拽到手機(jī)屏幕上的任意一點(diǎn)，是在該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);
//設(shè)置監(jiān)聽
mMessageBubbleView.setMessageBubbleListener(this);
mParams = new WindowManager.LayoutParams();
//設(shè)置背景透明
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);
}
在按下的時候需要初始化坐標(biāo)點(diǎn)及設(shè)置相應(yīng)的背景；
/**
* 初始化位置
*
* @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手勢移動來說，只需要去不斷更新移動的坐標(biāo)就可以了；
/**
* 更新當(dāng)前拖拽點(diǎn)的位置
*
* @param moveX
* @param moveY
*/
public void updataDragPoint(float moveX, float moveY) {
mDragPoint.x = moveX;
mDragPoint.y = moveY;
//不斷繪制
invalidate();
}
對于ACTION_UP手勢松開的話，處理就要麻煩些，這里需要判斷拖拽的距離，如果拖拽的距離在規(guī)定的距離內(nèi)就反彈，如果超過規(guī)定的距離就消失，并伴隨相應(yīng)的動畫效果；
/**
* 處理手指松開
*/
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);
//更新當(dāng)前拖拽點(diǎn)
updataDragPoint(pointF.x, pointF.y);
}
});
animator.setInterpolator(new OvershootInterpolator(5f));
animator.start();
//通知TouchListener移除當(dāng)前View然后顯示靜態(tài)的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接口監(jiān)聽中需要對void restore();和void dimiss(PointF pointf);進(jìn)行相應(yīng)的監(jiān)聽處理，在拖拽距離在規(guī)定距離內(nèi)的話就會去回調(diào)restore()方法；
@Override
public void restore() {
//把消息的view移除
mWindowManager.removeView(mMessageBubbleView);
//將原來的View顯示
mStateView.setVisibility(View.VISIBLE);
}
如果拖拽的距離大于規(guī)定的距離就會去回調(diào)void dimiss(PointF pointf);方法：
@Override
public void dimiss(PointF pointF) {
//要去執(zhí)行爆炸動畫 幀動畫
//原來的view肯定要移除
mWindowManager.removeView(mMessageBubbleView);
//要在WindowManager添加一個爆炸動畫
mWindowManager.addView(mBombFrame, mParams);
//設(shè)置背景
mBombImageView.setBackgroundResource(R.drawable.anim_bubble_pop);
AnimationDrawable drawable = (AnimationDrawable) mBombImageView.getBackground();
//設(shè)置位置
mBombImageView.setX(pointF.x-drawable.getIntrinsicWidth()/2);
mBombImageView.setY(pointF.y-drawable.getIntrinsicHeight()/2);
//開啟動畫
drawable.start();
//執(zhí)行完畢后要移除掉mBombFrame
mBombImageView.postDelayed(new Runnable() {
@Override
public void run() {
//移除
mWindowManager.removeView(mBombFrame);
//通知該view消失了
if(disappearListener!=null){
disappearListener.dismiss(mMessageBubbleView);
}
}
}, getAnimationDrawableTime(drawable));
}
在拖拽消失后的那個消失動畫是使用幀動畫來實(shí)現(xiàn)的；
<?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了。
源碼地址：仿qq消息拖拽效果
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Kotlin中l(wèi)et()with()run()apply()also()函數(shù)的使用方法與區(qū)別
在Kotlin中的源碼標(biāo)準(zhǔn)庫(Standard.kt)中提供了一些Kotlin擴(kuò)展的內(nèi)置函數(shù)可以優(yōu)化kotlin的編碼,今天為大家聊聊let,with,run,apply,also幾個函數(shù)的用法與區(qū)別2018-03-03
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)手寫簽名的具體實(shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-04-04
Android中判斷網(wǎng)絡(luò)是否連接實(shí)例詳解
這篇文章主要介紹了Android中判斷網(wǎng)絡(luò)是否連接實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-01-01
android實(shí)現(xiàn)雙日期選擇控件（可隱藏日，只顯示年月）
本篇文章主要介紹了android實(shí)現(xiàn)雙日期選擇控件（可隱藏日，只顯示年月） ，非常具有實(shí)用價值，需要的朋友可以參考下。2017-01-01
Android 中Fragment與Activity通訊的詳解
這篇文章主要介紹了Android 中Fragment與Activity通訊的詳解的相關(guān)資料,希望通過本文能幫助到大家，讓大家理解掌握如何通信的，需要的朋友可以參考下2017-10-10
Android 中為什么要用Fragment.setArguments(Bundle bundle)來傳遞參數(shù)
這篇文章主要介紹了Android 中為什么要用Fragment.setArguments(Bundle bundle)來傳遞參數(shù)，非常不錯，具有參考借鑒價值，需要的朋友參考下2017-01-01
Android實(shí)現(xiàn)伸縮彈力分布菜單效果的示例
本文介紹下在Android中實(shí)現(xiàn)伸縮彈力分布菜單效果。這種效果比較炫酷，有需要的朋友可以參考一下。2016-10-10
這篇文章主要介紹了Android實(shí)現(xiàn)用戶頭像更換操作的相關(guān)資料,更改頭像用戶操作很簡單，但是對于程序員實(shí)際操作有些復(fù)雜，需要了解的朋友可以參考下2016-04-04
Android 桌面快捷方式實(shí)現(xiàn)實(shí)例詳解
這篇文章主要為大家介紹了Android 桌面快捷方式實(shí)現(xiàn)實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
android自定義gradle插件并且發(fā)布到本地倉庫詳細(xì)教程
這篇文章主要介紹了android自定義gradle插件并且發(fā)布到本地倉庫詳細(xì)教程的相關(guān)資料,需要的朋友可以參考下2023-07-07