Android仿qq消息拖拽效果
更新時(shí)間：2019年01月27日 10:30:05 作者：老胡楊
這篇文章主要為大家詳細(xì)介紹了Android仿qq消息拖拽效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了Android仿qq消息拖拽效果展示的具體代碼，供大家參考，具體內(nèi)容如下
這是一個(gè)仿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();
}
});
就可以了，第一個(gè)參數(shù)需要傳入一個(gè)View，第二個(gè)參數(shù)需要出入BubbleDisappearListener的實(shí)現(xiàn)類進(jìn)行消失監(jiān)聽(tīng)回調(diào)；在attach();方法中也給傳入的View設(shè)置了觸摸監(jiān)聽(tīng)事件；
/**
* 綁定可以拖拽的控件
*
* @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類的話是用來(lái)處理觸摸監(jiān)聽(tīng)的類，先去看MessageBubbleView類，先去實(shí)現(xiàn)自定義view的效果，再去處理相應(yīng)的觸摸事件；
public class MessageBubbleView extends View {
//兩個(gè)圓的圓心
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ù)的定義及畫筆的初始化，接下來(lái)就要在onDraw()方法中進(jìn)行繪制，這里會(huì)涉及到兩個(gè)圓的繪制，一個(gè)是固定圓，還有一個(gè)是拖拽圓，對(duì)于拖拽圓來(lái)說(shuō)，確定x，y坐標(biāo)及圓的半徑就可以進(jìn)行繪制了，相對(duì)來(lái)說(shuō)簡(jiǎn)單些，對(duì)于固定圓來(lái)說(shuō)，一開(kāi)始有一個(gè)初始值，半徑是隨著距離的增大而減小，小到一定程度就消失；
@Override
protected void onDraw(Canvas canvas) {
if (mDragPoint == null || mFixactionPoint == null) {
return;
}
//畫兩個(gè)圓
//繪制拖拽圓
canvas.drawCircle(mDragPoint.x, mDragPoint.y, mDragRadius, mPaint);
//繪制固定圓 有一個(gè)初始大小，而且半徑是隨著距離的增大而減小，小到一定程度就消失
Path bezeierPath = getBezeierPath();
if (bezeierPath != null) {
canvas.drawCircle(mFixactionPoint.x, mFixactionPoint.y, mFixactionRadius, mPaint);
//繪制貝塞爾曲線
canvas.drawPath(bezeierPath, mPaint);
}
if (mDragBitmap != null) {
//繪制圖片 位置也是手指一動(dòng)的位置 中心位置才是手指拖動(dòng)的位置
canvas.drawBitmap(mDragBitmap, mDragPoint.x - mDragBitmap.getWidth() / 2, mDragPoint.y - mDragBitmap.getHeight() / 2, null);
}
}
繪制了拖拽圓和固定圓后，就需要將兩個(gè)圓連接起來(lái)，連接兩個(gè)圓的路徑的繪制就需要使用三階貝塞爾曲線來(lái)實(shí)現(xiàn)；
看過(guò)去，需要求p0、p1、p2、p3，這幾個(gè)點(diǎn)的左邊，對(duì)于c0、c1的坐標(biāo)，拖拽圓和固定圓的半徑都是知道的，可以先求出c0到c1的距離，對(duì)于p0、p1、p2、p3坐標(biāo)可以通過(guò)三角函數(shù)求得，再利用Path路徑進(jìn)行繪制；
/**
* 獲取貝塞爾的路徑
*
* @return
*/
public Path getBezeierPath() {
//計(jì)算兩個(gè)點(diǎn)的距離
double distance = getDistance(mDragPoint, mFixactionPoint);
mFixactionRadius = (int) (mFixactionRadiusMax - distance / 14);
if (mFixactionRadius < mFixactionRadiusmin) {
//超過(guò)一定距離不需要繪制貝塞爾曲線和圓
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);
//兩個(gè)點(diǎn)，第一個(gè)是控制點(diǎn)，第二個(gè)是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;
}
接下來(lái)就是處理手勢(shì)觸摸了，手勢(shì)觸摸主要是在BubbleMessageTouchListener類中的onTouch()方法中進(jìn)行處理；
@Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
//在windowManager上面搞一個(gè)view，
mWindowManager.addView(mMessageBubbleView, mParams);
//初始化貝塞爾view的點(diǎn)
//需要獲取屏幕的位置 不是相對(duì)于父布局的位置 還需要減掉狀態(tài)欄的高度
//將頁(yè)面做為全屏的可以將其拖拽到狀態(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è)置一個(gè)bitmap
mMessageBubbleView.setDragBitmap(bitmapByView);
//首先將自己隱藏
mStateView.setVisibility(View.INVISIBLE);
break;
case MotionEvent.ACTION_MOVE:
mMessageBubbleView.updataDragPoint(event.getRawX(), event.getRawY());
break;
case MotionEvent.ACTION_UP:
//拖動(dòng)如果貝塞爾曲線沒(méi)有消失就回彈
//拖動(dòng)如果貝塞爾曲線消失就爆炸
mMessageBubbleView.handleActionUp();
break;
}
return true;
}
在按下拖拽的時(shí)候，為了能讓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)聽(tīng)
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);
}
在按下的時(shí)候需要初始化坐標(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;
}
對(duì)于ACTION_MOVE手勢(shì)移動(dòng)來(lái)說(shuō)，只需要去不斷更新移動(dòng)的坐標(biāo)就可以了；
/**
* 更新當(dāng)前拖拽點(diǎn)的位置
*
* @param moveX
* @param moveY
*/
public void updataDragPoint(float moveX, float moveY) {
mDragPoint.x = moveX;
mDragPoint.y = moveY;
//不斷繪制
invalidate();
}
對(duì)于ACTION_UP手勢(shì)松開(kāi)的話，處理就要麻煩些，這里需要判斷拖拽的距離，如果拖拽的距離在規(guī)定的距離內(nèi)就反彈，如果超過(guò)規(guī)定的距離就消失，并伴隨相應(yīng)的動(dòng)畫效果；
/**
* 處理手指松開(kāi)
*/
public void handleActionUp() {
if (mFixactionRadius > mFixactionRadiusmin) {
//拖動(dòng)如果貝塞爾曲線沒(méi)有消失就回彈
//ValueAnimator 值變化的動(dòng)畫 從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 {
//拖動(dòng)如果貝塞爾曲線消失就爆炸
if(mListener!=null){
mListener.dimiss(mDragPoint);
}
}
}
而在MessageBubbleListener接口監(jiān)聽(tīng)中需要對(duì)void restore();和void dimiss(PointF pointf);進(jìn)行相應(yīng)的監(jiān)聽(tīng)處理，在拖拽距離在規(guī)定距離內(nèi)的話就會(huì)去回調(diào)restore()方法；
@Override
public void restore() {
//把消息的view移除
mWindowManager.removeView(mMessageBubbleView);
//將原來(lái)的View顯示
mStateView.setVisibility(View.VISIBLE);
}
如果拖拽的距離大于規(guī)定的距離就會(huì)去回調(diào)void dimiss(PointF pointf);方法：
@Override
public void dimiss(PointF pointF) {
//要去執(zhí)行爆炸動(dòng)畫 幀動(dòng)畫
//原來(lái)的view肯定要移除
mWindowManager.removeView(mMessageBubbleView);
//要在WindowManager添加一個(gè)爆炸動(dòng)畫
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);
//開(kāi)啟動(dòng)畫
drawable.start();
//執(zhí)行完畢后要移除掉mBombFrame
mBombImageView.postDelayed(new Runnable() {
@Override
public void run() {
//移除
mWindowManager.removeView(mBombFrame);
//通知該view消失了
if(disappearListener!=null){
disappearListener.dismiss(mMessageBubbleView);
}
}
}, getAnimationDrawableTime(drawable));
}
在拖拽消失后的那個(gè)消失動(dòng)畫是使用幀動(dòng)畫來(lái)實(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消息拖拽效果
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Android Map數(shù)據(jù)結(jié)構(gòu)全面總結(jié)分析
這篇文章主要為大家介紹了Android Map數(shù)據(jù)結(jié)構(gòu)全面總結(jié)分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
Android之IphoneTreeView帶組指示器的ExpandableListView效果
在正在顯示的最上面的組的標(biāo)簽位置添加一個(gè)和組視圖完全一樣的視圖，作為組標(biāo)簽。這個(gè)標(biāo)簽的位置要隨著列表的滑動(dòng)不斷變化，以保持總是顯示在最上方，并且該消失的時(shí)候就消失2013-06-06
Android開(kāi)發(fā)RecyclerView實(shí)現(xiàn)折線圖效果
這篇文章主要為大家詳細(xì)介紹了Android開(kāi)發(fā)RecyclerView實(shí)現(xiàn)折線圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-09-09
這篇文章主要為大家詳細(xì)介紹了Android下拉框PopupWindow的使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
Android實(shí)現(xiàn)圖片設(shè)置圓角形式
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)圖片設(shè)置圓角形式，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
Android WebView 內(nèi)處理302重定向不跳轉(zhuǎn)的解決
這篇文章主要介紹了Android WebView 內(nèi)處理302重定向不跳轉(zhuǎn)的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-03-03
Android實(shí)現(xiàn)Bitmap位圖旋轉(zhuǎn)效果
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)Bitmap位圖旋轉(zhuǎn)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
Android實(shí)現(xiàn)相冊(cè)中圖片上傳或下載
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)相冊(cè)中圖片上傳或下載，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05
Android開(kāi)發(fā)實(shí)現(xiàn)的簡(jiǎn)單五子棋游戲示例
這篇文章主要介紹了Android開(kāi)發(fā)實(shí)現(xiàn)的簡(jiǎn)單五子棋游戲,結(jié)合實(shí)例形式分析了Android實(shí)現(xiàn)五子棋游戲功能的布局、游戲功能等具體實(shí)現(xiàn)步驟與相關(guān)算法實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-12-12
Android中TextView實(shí)現(xiàn)超過(guò)固定行數(shù)顯示“...展開(kāi)全部”
這篇文章主要給大家介紹了關(guān)于Android中TextView如何實(shí)現(xiàn)超過(guò)固定行數(shù)顯示"...展開(kāi)全部"的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12