先看效果

本項目實現起來大體上我們分三步講解

【1】水面波動效果

實現代碼

首先畫出波浪線，通過通過貝塞爾曲線

for (int i = 0; i < 20; i++) {path.rQuadTo(20, size, 40, 0);path.rQuadTo(20, -size, 40, 0);}

然后讓曲線動起來

private Handler handler = new Handler() {@Overridepublic void handleMessage(Message msg) {super.handleMessage(msg);switch (msg.what) {case 0x23:count += 5;if (count >= 80) {count = 0;}if (isAdd) {size++;if (size > 10) {isAdd = false;}} else {size--;if (size <= -10) {isAdd = true;}}invalidate();sendEmptyMessageDelayed(0x23, 100);break;

【2】顯示加速球圓形

這一步需要用到的知識比較多

1我來給講解一下，畫布的問題；首先onDraw（）提供一個默認的canvas；我們可以想象一下，這塊畫布就是手機屏幕，我們可以使用這塊畫布畫背景色；
2我們的球形加速球，是通過兩層圖重疊取得重疊的部分
示意圖如下

---

我們先畫出了矩形，代碼如下

path.reset();path.moveTo(600, courentProgress);path.lineTo(600, 600);path.lineTo(count, 600);path.lineTo(count, courentProgress);

---

然后畫出了圓形，設置畫筆，使得只顯示兩部分重疊的部分：
此處可參考上一篇：http://blog.csdn.net/taoolee/article/details/48527917

PorterDuffXfermode mode = new PorterDuffXfermode(PorterDuff.Mode.SRC_ATOP);paintRect.setXfermode(mode);

這樣顯示的效果就是

【3】實現點擊加速球，加速效果
先要添加點擊事件

private float x;private float y;@Overridepublic boolean onTouchEvent(MotionEvent event) {x = event.getX();y = event.getY();switch (event.getAction()) {case MotionEvent.ACTION_DOWN:if (x>250&&x<550&&y>250&&y<550) {handler.sendEmptyMessage(0x11);return true;}}return super.onTouchEvent(event);}

然后使用handler處理改變當前水面高度，
我們先默認初始高度75%

private int courentProgress=325;private Handler handler = new Handler() {@Overridepublic void handleMessage(Message msg) {super.handleMessage(msg);switch (msg.what) {case 0x11:if(courentProgress<550){courentProgress+=5;sendEmptyMessageDelayed(0x11,50);invalidate();}break;}}};

最后附上源代碼

/*** Created by Administrator on 2015/9/17.*/ public class MyPathView extends View {private Path path;private Paint paintRect;private Paint paintBubble;private Paint paintWave;private int width;private int height;private int count = 0;private int size = 0;private int courentProgress=325;private boolean isAdd = true;private Handler handler = new Handler() {@Overridepublic void handleMessage(Message msg) {super.handleMessage(msg);switch (msg.what) {case 0x23:count += 5;if (count >= 80) {count = 0;}if (isAdd) {size++;if (size > 10) {isAdd = false;}} else {size--;if (size <= -10) {isAdd = true;}}invalidate();sendEmptyMessageDelayed(0x23, 100);break;case 0x11:if(courentProgress<550){courentProgress+=5;sendEmptyMessageDelayed(0x11,50);invalidate();}break;}}};public MyPathView(Context context, AttributeSet attrs) {super(context, attrs);paintWave = new Paint();paintWave.setStyle(Paint.Style.STROKE);paintWave.setTextSize(70);paintRect = new Paint();paintRect.setStrokeWidth(5);paintRect.setColor(Color.rgb(251,122,108));PorterDuffXfermode mode = new PorterDuffXfermode(PorterDuff.Mode.SRC_ATOP);paintRect.setStyle(Paint.Style.FILL);paintRect.setXfermode(mode);paintBubble = new Paint();paintBubble.setStyle(Paint.Style.FILL);paintBubble.setColor(Color.rgb(86,111,141));path = new Path();handler.sendEmptyMessageDelayed(0x23, 1000);}private Bitmap bitmapBubble;private Canvas canvasBubble;protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure(widthMeasureSpec, heightMeasureSpec);width = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);height = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec);setMeasuredDimension(width, height);bitmapBubble = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);canvasBubble = new Canvas(bitmapBubble);}private float x;private float y;@Overridepublic boolean onTouchEvent(MotionEvent event) {x = event.getX();y = event.getY();switch (event.getAction()) {case MotionEvent.ACTION_DOWN:if (x>250&&x<550&&y>250&&y<550) {handler.sendEmptyMessage(0x11);return true;}}return super.onTouchEvent(event);}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);canvas.drawColor(Color.rgb( 246, 235, 188));canvasBubble.drawCircle(400, 400, 150, paintBubble);path.reset();path.moveTo(600, courentProgress);path.lineTo(600, 600);path.lineTo(count, 600);path.lineTo(count, courentProgress);for (int i = 0; i < 20; i++) {path.rQuadTo(20, size, 40, 0);path.rQuadTo(20, -size, 40, 0);}path.close();canvasBubble.drawPath(path, paintRect);canvas.drawBitmap(bitmapBubble, 0, 0, null);canvas.drawText((550-courentProgress)/3+"%",400,400,paintWave);} }

總結

以上是生活随笔為你收集整理的android自定义组件（手机加速球+水面波动效果）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。