Android自定義View-模仿QQ的拖拽氣泡






第一步:明白氣泡的幾個狀態
1.默認狀態[STATE_DEFAULT]
2、拖拽狀態[STATE_DRAG](要回彈的情況):
可能產生拖拽狀態的幾個情形:
(1)移動的距離較小<某一個值(比如半徑的2倍+一個偏移值)
(2)移動到最大的一個限度值(比如最大的限度值+-一個偏移值)
3、移動狀態[STATE_MOVE]
當移動的距離值>可移動的最大限度值
4、消失狀態[STATE_DISMISS]
移動之後就是消失了。

第二步:明白大概的思路
不用思考,肯定使用到了貝賽爾曲線:

第三步:初始化組價的屬性,並計算組件的大小
這些基礎就不用說了,需要的屬性有,氣泡的半徑大小,氣泡的顏色,氣泡字體的顏色,以及最大拖拽距離{在大於這個值得時候就是拖動了}等等。
自定義屬性:


計算組件的大小:

第四步:通過點擊,拖動,取消,分別獲取到兩點之間的距離,然後得到組件的各個狀態
在處理之前說明一下:假設組件放在ListView或者RecyclerView的列表上面,要記得攔截父控件的點擊事件:
getParent().requestDisallowInterceptTouchEvent(true);

點擊的時候:首先明白在不可見的時候是不可以點擊的
否則計算出當前手指的位置和起始點的座標值,當拖動的距離在一個比較小的範圍內,說明是在拖動的

拖動的時候:當不是在默認的情況下,計算出當前拖動的點和起始點的距離從而得到拖動的距離,當拖動的距離小於最大的距離的時候:
也是出於拖拽狀態,但是此時起始點的半徑應該逐漸變小;
相反出於拖動狀態

手指擡起的時候:
當出於拖拽狀態的時候,就彈回原來的位置
當處於移動狀態,但是移動的位置最後卻在起始點的位置附近,也彈回原來的位置
否則:讓組件消失
第五步:繪製圖像
1、如果狀態不是消失,那麼久繪製拖動氣泡(即右上角的那個圓形)


2、如果處於拖拽狀態,那麼久繪製貝塞爾曲線

(1)得到控制點的座標

(2)分別得到上述兩個圓周圍相切的四個點的座標值【使用圖中的公示】
(3)繪製貝塞爾曲線的路徑(主要要閉合哦)

3、繪製文字

第六步、使用屬性動畫寫組件處於拖拽狀態彈回原始位置的估值器

此處使用的物理運動的插值器【BounceInterpolater】,這個插值器,是相當於物理運動,掉落了,又彈回來,又掉落,直到到的最後的位置。
1、估值器
它的作用就是將mBubbleCenterX,mBubbleCenterY逐漸移動到mCenterX,mCenterY;
2、復原動畫
第七步、寫組件消失動畫(放大+透明度)


第八步、添加接口和方法



項目地址:








發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章