Android仿音樂播放器帶進(jìn)度的播放暫停按鈕
因?yàn)轫?xiàng)目需要,要做一個下載暫停開始的按鈕,要求按鈕上顯示進(jìn)度。網(wǎng)上找了找沒有合適的,不太滿意,于是自己動手寫了一個。
效果如下:
主要步驟:
1、最外側(cè)的圓環(huán)。
2、圓環(huán)內(nèi)側(cè)代表進(jìn)度的圓弧。
3、暫停時(shí)在中心部位畫出三角形。
4、播放時(shí)在中心部位畫出矩形。
5、重寫onTouch方法,DOWN事件時(shí)設(shè)置播放或者暫停的狀態(tài)。
6、添加一個狀態(tài)監(jiān)聽器,在調(diào)用者中監(jiān)聽狀態(tài)。
7、設(shè)置進(jìn)度,重繪。
代碼比較簡單,所以貼出來View的代碼,Activity和布局文件就不寫了:
/** Created by xuzhilei on 2016/8/16. 模仿音樂暫停開始按鈕的View */ public class PlayButtonView extends View { /** 中心點(diǎn)X軸坐標(biāo) */ private int viewCenterX; /** 中心點(diǎn)Y軸坐標(biāo) */ private int viewCenterY; /** 有效長度的一般(View長寬較小者的一半) */ private int viewHalfLength; /** 三角形右側(cè)頂點(diǎn) */ private Point pointA = new Point(); /** 三角形左上頂點(diǎn) */ private Point pointB = new Point(); /** 三角形左下頂點(diǎn) */ private Point pointC = new Point(); /** 矩形左邊界 */ private int RectLeft; /** 矩形上邊界 */ private int RectTOP; /** 矩形右邊界 */ private int RectRight; /** 矩形下邊界 */ private int RectBottom; /** 三角形的三條邊路徑 */ private Path path = new Path(); /** 包圍最外側(cè)圓環(huán)的矩形 */ private RectF rectF = new RectF(); /** 包圍進(jìn)度圓弧的矩形 */ private RectF rectF2 = new RectF(); /** 進(jìn)度 */ private int progress; /** 暫停中還是播放中 */ private boolean isPlaying = false; /** 是否進(jìn)行過了測量 */ private boolean isMeasured = false; /** 畫筆顏色 */ private int color = 0xffff0099; /** 最外側(cè)圓環(huán)畫筆 */ private Paint paintA = new Paint(); /** 進(jìn)度圓弧畫筆 */ private Paint paintB = new Paint(); /** 暫停開始畫筆 */ private Paint paintC = new Paint(); /** 狀態(tài)監(jiān)聽器 */ private OnStatusChangeListener onStatusChangeListener; /** 構(gòu)造器 */ public PlayButtonView(Context context, AttributeSet attrs) { super(context, attrs); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); if (!isMeasured) { getWidthAndHeight(); isMeasured = true; } } /** 得到視圖等的高度寬度尺寸數(shù)據(jù) */ private void getWidthAndHeight() { int viewHeight = getMeasuredHeight(); int viewWidth = getMeasuredWidth(); viewCenterX = viewWidth / 2; viewCenterY = viewHeight / 2; viewHalfLength = viewHeight < viewWidth ? viewHeight / 2 : viewWidth / 2; int paintAwidth = viewHalfLength / 15; int paintBwidth = viewHalfLength / 8; rectF.left = viewCenterX - (viewHalfLength - paintAwidth / 2); rectF.top = viewCenterY - (viewHalfLength - paintAwidth / 2); rectF.right = viewCenterX + (viewHalfLength - paintAwidth / 2); rectF.bottom = viewCenterY + (viewHalfLength - paintAwidth / 2); rectF2.left = viewCenterX - (viewHalfLength - paintBwidth / 2); rectF2.top = viewCenterY - (viewHalfLength - paintBwidth / 2); rectF2.right = viewCenterX + (viewHalfLength - paintBwidth / 2); rectF2.bottom = viewCenterY + (viewHalfLength - paintBwidth / 2); paintA.setColor(color); paintA.setStrokeWidth(paintAwidth); paintA.setAntiAlias(true); paintA.setStyle(Paint.Style.STROKE); paintB.setColor(color); paintB.setStrokeWidth(paintBwidth); paintB.setAntiAlias(true); paintB.setStyle(Paint.Style.STROKE); paintC.setColor(color); paintC.setStrokeWidth(1); paintC.setAntiAlias(true); paintC.setStyle(Paint.Style.FILL); pointA.x = viewCenterX + viewHalfLength / 2; pointA.y = viewCenterY; double sin = Math.sin(Math.toRadians(60)); // √(3) / 2 double cos = Math.cos(Math.toRadians(60)); // 1/ 2 pointB.x = (float) ((viewCenterX - cos * viewHalfLength + viewCenterX) / 2); pointB.y = (float) ((viewCenterY - sin * viewHalfLength + viewCenterY) / 2); pointC.x = (float) ((viewCenterX - cos * viewHalfLength + viewCenterX) / 2); pointC.y = (float) ((viewCenterY + sin * viewHalfLength + viewCenterY) / 2); RectLeft = viewCenterX - viewHalfLength / 3; RectTOP = viewCenterY - viewHalfLength / 3; RectRight = viewCenterX + viewHalfLength / 3; RectBottom = viewCenterY + viewHalfLength / 3; } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); // 畫未完成進(jìn)度的圓環(huán) canvas.drawArc(rectF, 0, 360, false, paintA); // 畫已經(jīng)完成進(jìn)度的圓弧 從-90度開始,即從圓環(huán)頂部開始 canvas.drawArc(rectF2, -90, progress * 3.6f, false, paintB); if (isPlaying) { canvas.drawRect(RectLeft, RectTOP, RectRight, RectBottom, paintC); } else { path.reset(); path.moveTo(pointA.x, pointA.y); path.lineTo(pointB.x, pointB.y); path.lineTo(pointC.x, pointC.y); path.close(); canvas.drawPath(path, paintC); } } /** 監(jiān)聽觸摸DOWN時(shí)間,開始播放,暫停播放 */ @Override public boolean onTouchEvent(MotionEvent event) { if (event.getAction() == MotionEvent.ACTION_DOWN) { isPlaying = !isPlaying; invalidate(); if (isPlaying) { onStatusChangeListener.play(); } else { onStatusChangeListener.pause(); } } return super.onTouchEvent(event); } /** 設(shè)置進(jìn)度 0-100區(qū)間 */ public void setProgress(int progress) { if (progress < 0) { progress = 0; } if (progress > 100) { progress = 100; } this.progress = progress; invalidate(); } /** 外界設(shè)置播放狀態(tài) */ public void setPlaying(boolean isPlaying) { this.isPlaying = isPlaying; invalidate(); } /** 播放暫停狀態(tài)監(jiān)聽的接口 */ public interface OnStatusChangeListener { void play(); void pause(); } /** 設(shè)置監(jiān)聽接口 */ public void setOnStatusChangeListener(OnStatusChangeListener onStatusChangeListener) { this.onStatusChangeListener = onStatusChangeListener; } /** 位置信息 */ private class Point { float x; float y; }
在調(diào)用者中設(shè)置OnStatusChangeListener 的監(jiān)聽器即可監(jiān)聽播放狀態(tài),通過setProgress方法就可以設(shè)置進(jìn)度。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android檢查手機(jī)網(wǎng)絡(luò)狀態(tài)及網(wǎng)絡(luò)類型的方法
這篇文章主要介紹了Android檢查手機(jī)網(wǎng)絡(luò)狀態(tài)及網(wǎng)絡(luò)類型的方法,涉及Android檢測手機(jī)網(wǎng)絡(luò)狀態(tài)的技巧,需要的朋友可以參考下2015-04-04Android Studio報(bào)錯Manifest merger failed with multiple errors
這篇文章主要介紹了Android Studio報(bào)錯Manifest merger failed with multiple errors2017-10-10Android開發(fā)中使用顏色矩陣改變圖片顏色,透明度及亮度的方法
這篇文章主要介紹了Android開發(fā)中使用顏色矩陣改變圖片顏色,透明度及亮度的方法,涉及Android針對圖片的讀取、運(yùn)算、設(shè)置等相關(guān)操作技巧,需要的朋友可以參考下2017-10-10Android入門之TableLayout應(yīng)用解析(一)
這篇文章主要介紹了Android入門之TableLayout應(yīng)用,需要的朋友可以參考下2014-08-08Android應(yīng)用自動跳轉(zhuǎn)到應(yīng)用市場詳情頁面的方法
最近在工作中遇到一個需求,推廣部門要求實(shí)現(xiàn)應(yīng)用自動跳轉(zhuǎn)到應(yīng)用市場詳情頁面,通過查找一些資料,實(shí)現(xiàn)出來了,覺得有必要整理下方便以后或者有需要的朋友們參考借鑒,下面來一起詳細(xì)看看Android應(yīng)用自動跳轉(zhuǎn)到應(yīng)用市場詳情頁面的方法吧。2016-12-12