Android貝塞爾曲線初步學(xué)習(xí)第二課 仿QQ未讀消息氣泡拖拽黏連效果
更新時(shí)間：2022年06月29日 14:43:12 作者：猴菇先生
這篇文章主要為大家詳細(xì)介紹了Android貝塞爾曲線初步學(xué)習(xí)的第二課，仿QQ未讀消息氣泡拖拽黏連效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
上一節(jié)初步了解了Android端的貝塞爾曲線，這一節(jié)就舉個(gè)栗子練習(xí)一下，仿QQ未讀消息氣泡，是最經(jīng)典的練習(xí)貝塞爾曲線的東東，效果如下
附上github源碼地址：https://github.com/MonkeyMushroom/DragBubbleView
歡迎star~
大體思路就是畫(huà)兩個(gè)圓，一個(gè)黏連小球固定在一個(gè)點(diǎn)上，一個(gè)氣泡小球跟隨手指的滑動(dòng)改變坐標(biāo)。隨著兩個(gè)圓間距越來(lái)越大，黏連小球半徑越來(lái)越小。當(dāng)間距小于一定值，松開(kāi)手指氣泡小球會(huì)恢復(fù)原來(lái)位置；當(dāng)間距超過(guò)一定值之后，黏連小球消失，氣泡小球繼續(xù)跟隨手指移動(dòng)，此時(shí)手指松開(kāi)，氣泡小球消失~
1、首先老一套~新建attrs.xml文件，編寫(xiě)自定義屬性，新建DragBubbleView繼承View，重寫(xiě)構(gòu)造方法，獲取自定義屬性值，初始化Paint、Path等東東，重寫(xiě)onMeasure計(jì)算寬高，這里不再啰嗦~
2、在onSizeChanged方法中確定黏連小球和氣泡小球的圓心坐標(biāo)，這里我們?nèi)捀叩囊话耄?/p>
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mBubbleCenterX = w / 2;
mBubbleCenterY = h / 2;
mCircleCenterX = mBubbleCenterX;
mCircleCenterY = mBubbleCenterY;
}
3、經(jīng)分析氣泡小球有以下幾個(gè)狀態(tài)：默認(rèn)、拖拽、移動(dòng)、消失，我們這里定義一下，方便根據(jù)不同的狀態(tài)分析不同情況：
/* 氣泡的狀態(tài) */ private int mState; /* 默認(rèn)，無(wú)法拖拽 */ private static final int STATE_DEFAULT = 0x00; /* 拖拽 */ private static final int STATE_DRAG = 0x01; /* 移動(dòng) */ private static final int STATE_MOVE = 0x02; /* 消失 */ private static final int STATE_DISMISS = 0x03;
4、重寫(xiě)onTouchEvent方法，其中d代表兩圓圓心間距，maxD代表可拖拽的最大間距：
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
if (mState != STATE_DISMISS) {
d = (float) Math.hypot(event.getX() - mBubbleCenterX, event.getY() - mBubbleCenterY);
if (d < mBubbleRadius + maxD / 4) {
//當(dāng)指尖坐標(biāo)在圓內(nèi)的時(shí)候，才認(rèn)為是可拖拽的
//一般氣泡比較小，增加(maxD/4)像素是為了更輕松的拖拽
mState = STATE_DRAG;
} else {
mState = STATE_DEFAULT;
}
}
break;
case MotionEvent.ACTION_MOVE:
if (mState != STATE_DEFAULT) {
mBubbleCenterX = event.getX();
mBubbleCenterY = event.getY();
//計(jì)算氣泡圓心與黏連小球圓心的間距
d = (float) Math.hypot(mBubbleCenterX - mCircleCenterX, mBubbleCenterY - mCircleCenterY);
//float d = (float) Math.sqrt(Math.pow(mBubbleCenterX - mCircleCenterX, 2)
//+ Math.pow(mBubbleCenterY - mCircleCenterY, 2));
if (mState == STATE_DRAG) {//如果可拖拽
//間距小于可黏連的最大距離
if (d < maxD - maxD / 4) {//減去(maxD/4)的像素大小，是為了讓黏連小球半徑到一個(gè)較小值快消失時(shí)直接消失
mCircleRadius = mBubbleRadius - d / 8;//使黏連小球半徑漸漸變小
if (mOnBubbleStateListener != null) {
mOnBubbleStateListener.onDrag();
}
} else {//間距大于于可黏連的最大距離
mState = STATE_MOVE;//改為移動(dòng)狀態(tài)
if (mOnBubbleStateListener != null) {
mOnBubbleStateListener.onMove();
}
}
}
invalidate();
}
break;
case MotionEvent.ACTION_UP:
if (mState == STATE_DRAG) {//正在拖拽時(shí)松開(kāi)手指，氣泡恢復(fù)原來(lái)位置并顫動(dòng)一下
setBubbleRestoreAnim();
} else if (mState == STATE_MOVE) {//正在移動(dòng)時(shí)松開(kāi)手指
//如果在移動(dòng)狀態(tài)下間距回到兩倍半徑之內(nèi)，我們認(rèn)為用戶(hù)不想取消該氣泡
if (d < 2 * mBubbleRadius) {//那么氣泡恢復(fù)原來(lái)位置并顫動(dòng)一下
setBubbleRestoreAnim();
} else {//氣泡消失
setBubbleDismissAnim();
}
}
break;
}
return true;
}
如果控件外面有嵌套ListView、RecyclerView等攔截焦點(diǎn)的控件，那就在ACTION_DOWN中請(qǐng)求父控件不攔截事件：
getParent().requestDisallowInterceptTouchEvent(true);
然后ACTION_UP再把事件還回去：
getParent().requestDisallowInterceptTouchEvent(false);
5、在onDraw方法中畫(huà)圓、畫(huà)貝賽爾曲線、畫(huà)消息個(gè)數(shù)文本：
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//畫(huà)拖拽氣泡
canvas.drawCircle(mBubbleCenterX, mBubbleCenterY, mBubbleRadius, mBubblePaint);
if (mState == STATE_DRAG && d < maxD - 48) {
//畫(huà)黏連小圓
canvas.drawCircle(mCircleCenterX, mCircleCenterY, mCircleRadius, mBubblePaint);
//計(jì)算二階貝塞爾曲線做需要的起點(diǎn)、終點(diǎn)和控制點(diǎn)坐標(biāo)
calculateBezierCoordinate();
//畫(huà)二階貝賽爾曲線
mBezierPath.reset();
mBezierPath.moveTo(mCircleStartX, mCircleStartY);
mBezierPath.quadTo(mControlX, mControlY, mBubbleEndX, mBubbleEndY);
mBezierPath.lineTo(mBubbleStartX, mBubbleStartY);
mBezierPath.quadTo(mControlX, mControlY, mCircleEndX, mCircleEndY);
mBezierPath.close();
canvas.drawPath(mBezierPath, mBubblePaint);
}
//畫(huà)消息個(gè)數(shù)的文本
if (mState != STATE_DISMISS && !TextUtils.isEmpty(mText)) {
mTextPaint.getTextBounds(mText, 0, mText.length(), mTextRect);
canvas.drawText(mText, mBubbleCenterX - mTextRect.width() / 2, mBubbleCenterY + mTextRect.height() / 2, mTextPaint);
}
}
其中計(jì)算二階貝塞爾曲線做需要的起點(diǎn)、終點(diǎn)和控制點(diǎn)坐標(biāo)，順序是moveTo A, quadTo B, lineTo C, quadTo D, close
先來(lái)張示意圖：
再上代碼
/**
* 計(jì)算二階貝塞爾曲線做需要的起點(diǎn)、終點(diǎn)和控制點(diǎn)坐標(biāo)
*/
private void calculateBezierCoordinate(){
//計(jì)算控制點(diǎn)坐標(biāo)，為兩圓圓心連線的中點(diǎn)
mControlX = (mBubbleCenterX + mCircleCenterX) / 2;
mControlY = (mBubbleCenterY + mCircleCenterY) / 2;
//計(jì)算兩條二階貝塞爾曲線的起點(diǎn)和終點(diǎn)
float sin = (mBubbleCenterY - mCircleCenterY) / d;
float cos = (mBubbleCenterX - mCircleCenterX) / d;
mCircleStartX = mCircleCenterX - mCircleRadius * sin;
mCircleStartY = mCircleCenterY + mCircleRadius * cos;
mBubbleEndX = mBubbleCenterX - mBubbleRadius * sin;
mBubbleEndY = mBubbleCenterY + mBubbleRadius * cos;
mBubbleStartX = mBubbleCenterX + mBubbleRadius * sin;
mBubbleStartY = mBubbleCenterY - mBubbleRadius * cos;
mCircleEndX = mCircleCenterX + mCircleRadius * sin;
mCircleEndY = mCircleCenterY - mCircleRadius * cos;
}
6、氣泡復(fù)原的動(dòng)畫(huà)，使用估值器計(jì)算坐標(biāo)
/**
* 設(shè)置氣泡復(fù)原的動(dòng)畫(huà)
*/
private void setBubbleRestoreAnim() {
ValueAnimator anim = ValueAnimator.ofObject(new PointFEvaluator(),
new PointF(mBubbleCenterX, mBubbleCenterY),
new PointF(mCircleCenterX, mCircleCenterY));
anim.setDuration(200);
//使用OvershootInterpolator差值器達(dá)到顫動(dòng)效果
anim.setInterpolator(new OvershootInterpolator(5));
anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
PointF curPoint = (PointF) animation.getAnimatedValue();
mBubbleCenterX = curPoint.x;
mBubbleCenterY = curPoint.y;
invalidate();
}
});
anim.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
//動(dòng)畫(huà)結(jié)束后狀態(tài)改為默認(rèn)
mState = STATE_DEFAULT;
if (mOnBubbleStateListener != null) {
mOnBubbleStateListener.onRestore();
}
}
});
anim.start();
}
/**
* PointF動(dòng)畫(huà)估值器
*/
public class PointFEvaluator implements TypeEvaluator<PointF> {
@Override
public PointF evaluate(float fraction, PointF startPointF, PointF endPointF) {
float x = startPointF.x + fraction * (endPointF.x - startPointF.x);
float y = startPointF.y + fraction * (endPointF.y - startPointF.y);
return new PointF(x, y);
}
}
7、順便來(lái)個(gè)氣泡狀態(tài)的監(jiān)聽(tīng)器，方便外部調(diào)用監(jiān)聽(tīng)其狀態(tài)：
/**
* 氣泡狀態(tài)的監(jiān)聽(tīng)器
*/
public interface OnBubbleStateListener {
/**
* 拖拽氣泡
*/
void onDrag();
/**
* 移動(dòng)氣泡
*/
void onMove();
/**
* 氣泡恢復(fù)原來(lái)位置
*/
void onRestore();
/**
* 氣泡消失
*/
void onDismiss();
}
/**
* 設(shè)置氣泡狀態(tài)的監(jiān)聽(tīng)器
*/
public void setOnBubbleStateListener(OnBubbleStateListener onBubbleStateListener) {
mOnBubbleStateListener = onBubbleStateListener;
}
8、關(guān)于氣泡爆炸的動(dòng)畫(huà)，思路就是放幾張圖片到drawable里，然后動(dòng)態(tài)計(jì)數(shù)重繪，在onDraw中調(diào)用canvas.drawBitmap()方法，具體如下：
/* 氣泡爆炸的圖片id數(shù)組 */
private int[] mExplosionDrawables = {R.drawable.explosion_one, R.drawable.explosion_two
, R.drawable.explosion_three, R.drawable.explosion_four, R.drawable.explosion_five};
/* 氣泡爆炸的bitmap數(shù)組 */
private Bitmap[] mExplosionBitmaps;
/* 氣泡爆炸當(dāng)前進(jìn)行到第幾張 */
private int mCurExplosionIndex;
/* 氣泡爆炸動(dòng)畫(huà)是否開(kāi)始 */
private boolean mIsExplosionAnimStart = false;在構(gòu)造方法中：
mExplosionPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mExplosionPaint.setFilterBitmap(true);
mExplosionRect = new Rect();
mExplosionBitmaps = new Bitmap[mExplosionDrawables.length];
for (int i = 0; i < mExplosionDrawables.length; i++) {
//將氣泡爆炸的drawable轉(zhuǎn)為bitmap
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), mExplosionDrawables[i]);
mExplosionBitmaps[i] = bitmap;
}
然后在手指抬起的時(shí)候使用如下動(dòng)畫(huà)：
/**
* 設(shè)置氣泡消失的動(dòng)畫(huà)
*/
private void setBubbleDismissAnim() {
mState = STATE_DISMISS;//氣泡改為消失狀態(tài)
mIsExplosionAnimStart = true;
if (mOnBubbleStateListener != null) {
mOnBubbleStateListener.onDismiss();
}
//做一個(gè)int型屬性動(dòng)畫(huà)，從0開(kāi)始，到氣泡爆炸圖片數(shù)組個(gè)數(shù)結(jié)束
ValueAnimator anim = ValueAnimator.ofInt(0, mExplosionDrawables.length);
anim.setInterpolator(new LinearInterpolator());
anim.setDuration(500);
anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
//拿到當(dāng)前的值并重繪
mCurExplosionIndex = (int) animation.getAnimatedValue();
invalidate();
}
});
anim.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
//動(dòng)畫(huà)結(jié)束后改變狀態(tài)
mIsExplosionAnimStart = false;
}
});
anim.start();
}
最后在onDraw中：
if (mIsExplosionAnimStart && mCurExplosionIndex < mExplosionDrawables.length) {
//設(shè)置氣泡爆炸圖片的位置
mExplosionRect.set((int) (mBubbleCenterX - mBubbleRadius), (int) (mBubbleCenterY - mBubbleRadius)
, (int) (mBubbleCenterX + mBubbleRadius), (int) (mBubbleCenterY + mBubbleRadius));
//根據(jù)當(dāng)前進(jìn)行到爆炸氣泡的位置index來(lái)繪制爆炸氣泡bitmap
canvas.drawBitmap(mExplosionBitmaps[mCurExplosionIndex], null, mExplosionRect, mExplosionPaint);
}
9、在布局文件中使用該控件，并使用自定義屬性：
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:monkey="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:clipChildren="false" tools:context=".MainActivity"> <com.monkey.dragpopview.DragBubbleView android:id="@+id/dragBubbleView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" monkey:bubbleColor="#ff0000" monkey:bubbleRadius="12dp" monkey:text="99+" monkey:textColor="#ffffff" monkey:textSize="12sp" /> </RelativeLayout>
其中 android:clipChildren=”false” 這個(gè)屬性可以使根布局下的子控件超出本身控件范圍的大小，加上這個(gè)屬性就可以滿屏幕隨意拖拽而不必拘泥于它本身的大小了，炒雞方便~
還有如果覺(jué)得在屬性中設(shè)置消息個(gè)數(shù)不方便，需要在代碼中動(dòng)態(tài)獲取數(shù)據(jù)并設(shè)置的話，只要在DragBubbleView中添加一個(gè)方法即可
public void setText(String text){
mText = text;
invalidate();
}
10、在MainActivity中：
DragBubbleView dragBubbleView = (DragBubbleView) findViewById(R.id.dragBubbleView);
dragBubbleView.setText("99+");
dragBubbleView.setOnBubbleStateListener(new DragBubbleView.OnBubbleStateListener() {
@Override
public void onDrag() {
Log.e("---> ", "拖拽氣泡");
}
@Override
public void onMove() {
Log.e("---> ", "移動(dòng)氣泡");
}
@Override
public void onRestore() {
Log.e("---> ", "氣泡恢復(fù)原來(lái)位置");
}
@Override
public void onDismiss() {
Log.e("---> ", "氣泡消失");
}
});
總結(jié)
這次既練習(xí)了自定義View，還囊括了貝賽爾曲線，坐標(biāo)的計(jì)算一定要畫(huà)圖，簡(jiǎn)單直觀。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Android 自定義返回按鈕的實(shí)例詳解的相關(guān)資料,這里提供實(shí)現(xiàn)代碼，幫助大家理解使用，需要的朋友可以參考下2017-07-07
TextView顯示系統(tǒng)時(shí)間(時(shí)鐘功能帶秒針變化
用System.currentTimeMillis()可以獲取系統(tǒng)當(dāng)前的時(shí)間，我們可以開(kāi)啟一個(gè)線程，然后通過(guò)handler發(fā)消息，來(lái)實(shí)時(shí)的更新TextView上顯示的系統(tǒng)時(shí)間,可以做一個(gè)時(shí)鐘的功能2013-11-11
Android自定義view實(shí)現(xiàn)左滑刪除的RecyclerView詳解
RecyclerView是Android一個(gè)更強(qiáng)大的控件,其不僅可以實(shí)現(xiàn)和ListView同樣的效果,還有優(yōu)化了ListView中的各種不足。其可以實(shí)現(xiàn)數(shù)據(jù)縱向滾動(dòng),也可以實(shí)現(xiàn)橫向滾動(dòng)(ListView做不到橫向滾動(dòng))。接下來(lái)講解RecyclerView的用法2022-11-11
Android編程實(shí)現(xiàn)自定義ProgressBar樣式示例(背景色及一級(jí)、二級(jí)進(jìn)度條顏色)
這篇文章主要介紹了Android編程實(shí)現(xiàn)自定義ProgressBar樣式功能,涉及針對(duì)背景色及一級(jí)、二級(jí)進(jìn)度條顏色的操作技巧,需要的朋友可以參考下2017-01-01
Android中實(shí)現(xiàn)圓角圖片的幾種方法
本篇文章主要介紹了Android中實(shí)現(xiàn)圓角圖片的幾種方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
Android ExpandableListView展開(kāi)列表控件使用實(shí)例
這篇文章主要介紹了Android ExpandableListView展開(kāi)列表控件使用實(shí)例,本文實(shí)現(xiàn)了一個(gè)類(lèi)似手機(jī)QQ好友列表的界面效果,需要的朋友可以參考下2014-07-07
android 中 webview 怎么用 localStorage
這篇文章主要介紹了android 中 webview 怎么用 localStorage方法的相關(guān)資料,需要的朋友可以參考下2015-07-07
Android動(dòng)態(tài)權(quán)限申請(qǐng)實(shí)現(xiàn)步驟分解
對(duì)于一些危險(xiǎn)權(quán)限在AndroidManifest清單文件中申請(qǐng)之后，還需要得到用戶(hù)的許可并打開(kāi)，才算是真正的開(kāi)啟了這個(gè)權(quán)限。所以可以使用動(dòng)態(tài)申請(qǐng)權(quán)限，對(duì)于某個(gè)功能，如果需要開(kāi)啟某個(gè)權(quán)限，在用戶(hù)使用它之前，彈窗提示用戶(hù)是否要開(kāi)啟這個(gè)權(quán)限2023-04-04
Android Messenger實(shí)現(xiàn)進(jìn)程間通信及其原理
這篇文章主要為大家詳細(xì)介紹了Android Messenger實(shí)現(xiàn)進(jìn)程間通信及其原理，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
Android高亮引導(dǎo)控件的實(shí)現(xiàn)代碼
這篇文章主要介紹了Android高亮引導(dǎo)控件的實(shí)現(xiàn)代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07