轉載 : 猴菇先生 的博客地址:
http://blog.csdn.net/qq_31715429
正文
了解了Android端的貝塞爾曲線,本篇就舉個栗子練習一下像街,仿QQ未讀消息氣泡,是最經典的練習貝塞爾曲線的東東篮幢,效果如下:
大體思路****就是****:
畫兩個圓纳令,一個黏連小球固定在一個點上森枪,一個氣泡小球跟隨手指的滑動改變坐標辽社。隨著兩個圓間距越來越大喘先,黏連小球半徑越來越小。
當間距小于一定值解幽,松開手指氣泡小球會恢復原來位置贴见;
當間距超過一定值之后,黏連小球消失躲株,氣泡小球繼續(xù)跟隨手指移動片部,此時手指松開,氣泡小球消失~
**1. **首先老一套~新建attrs.xml文件霜定,編寫自定義屬性档悠,新建 DragBubbleView 繼承View廊鸥,重寫構造方法,獲取自定義屬性值辖所,初始化Paint惰说、Path等東東,重寫 onMeasure 計算寬高奴烙,這里不再啰嗦~
**2. **在 onSizeChanged 方法中確定黏連小球和氣泡小球的圓心坐標助被,這里我們取寬高的一半:
**3. **經分析氣泡小球有以下幾個狀態(tài):默認剖张、拖拽切诀、移動、消失搔弄,我們這里定義一下幅虑,方便根據(jù)不同的狀態(tài)分析不同情況:
**4. **重寫 onTouchEvent 方法,其中 d 代表兩圓圓心間距顾犹,maxD 代表可拖拽的最大間距:
如果控件外面有嵌套 ListView倒庵、RecyclerView 等攔截焦點的控件,那就在 ACTION_DOWN 中請求父控件不攔截事件:
getParent().requestDisallowInterceptTouchEvent(true);
然后 ACTION_UP 再把事件還回去:
getParent().requestDisallowInterceptTouchEvent(false);
**5. **在 onDraw 方法中畫圓炫刷、畫貝賽爾曲線擎宝、畫消息個數(shù)文本:
其中計算 二階貝塞爾曲線 做需要的起點、終點 和 控制點坐標浑玛,順序是 moveTo A, quadTo B, lineTo C, quadTo D, close绍申。先來張示意圖:
手機可點擊放大查看
再上代碼:
**6. **氣泡復原的動畫,使用估值器計算坐標
**7. **順便來個氣泡狀態(tài)的監(jiān)聽器顾彰,方便外部調用監(jiān)聽其狀態(tài):
**8. **關于氣泡爆炸的動畫极阅,思路就是放幾張圖片到 drawable 里,然后動態(tài)計數(shù)重繪涨享,在 onDraw 中調用 canvas.drawBitmap() 方法筋搏,具體如下:
在構造方法中:
然后在手指抬起的時候使用如下動畫:
最后在 onDraw 中:
**9. 在布局文件中使用該控件,并使用自定義屬性:
其中 android:clipChildren=”false” **這個屬性可以使根布局下的子控件超出本身控件范圍的大小厕隧,加上這個屬性就可以滿屏幕隨意拖拽而不必拘泥于它本身的大小了奔脐,炒雞方便~
還有如果覺得在屬性中設置消息個數(shù)不方便,需要在代碼中動態(tài)獲取數(shù)據(jù)并設置的話吁讨,只要在 DragBubbleView 中添加一個方法即可
public void setText(String text){ mText = text; invalidate();}
**10. **在MainActivity中:
總結
這次既練習了自定義View髓迎,還囊括了貝賽爾曲線,坐標的計算一定要畫圖挡爵,簡單直觀竖般。
項目地址:
https://github.com/MonkeyMushroom/DragBubbleView