Android仿音樂播放器帶進(jìn)度的播放暫停按鈕
因?yàn)轫?xiàng)目需要,要做一個(gè)下載暫停開始的按鈕,要求按鈕上顯示進(jìn)度。網(wǎng)上找了找沒有合適的,不太滿意,于是自己動(dòng)手寫了一個(gè)。
效果如下:

主要步驟:
1、最外側(cè)的圓環(huán)。
2、圓環(huán)內(nèi)側(cè)代表進(jìn)度的圓弧。
3、暫停時(shí)在中心部位畫出三角形。
4、播放時(shí)在中心部位畫出矩形。
5、重寫onTouch方法,DOWN事件時(shí)設(shè)置播放或者暫停的狀態(tài)。
6、添加一個(gè)狀態(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 使用selector改變按鈕狀態(tài)實(shí)例詳解
這篇文章主要介紹了Android 使用selector改變按鈕狀態(tài)實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-01-01
EditText限制輸入數(shù)字,精確到小數(shù)點(diǎn)后1位的設(shè)置方法
下面小編就為大家?guī)硪黄狤ditText限制輸入數(shù)字,精確到小數(shù)點(diǎn)后1位的設(shè)置方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04
TabLayout+ViewPager實(shí)現(xiàn)切頁的示例代碼
這篇文章主要介紹了TabLayout+ViewPager實(shí)現(xiàn)切頁的示例代碼,可實(shí)現(xiàn)左右滑動(dòng)切換視圖界面和點(diǎn)擊切換,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2019-01-01
Android實(shí)現(xiàn)動(dòng)態(tài)改變shape.xml中圖形的顏色
這篇文章主要介紹了Android實(shí)現(xiàn)動(dòng)態(tài)改變shape.xml中圖形的顏色,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-03-03
Android利用Document實(shí)現(xiàn)xml讀取和寫入操作
這篇文章主要為大家詳細(xì)介紹了Android利用Document實(shí)現(xiàn)xml讀取和寫入操作,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-12-12
Android編程實(shí)現(xiàn)仿iphone抖動(dòng)效果的方法(附源碼)
這篇文章主要介紹了Android編程實(shí)現(xiàn)仿iphone抖動(dòng)效果的方法,結(jié)合實(shí)例形式分析了仿iphone抖動(dòng)效果的頁面布局及功能實(shí)現(xiàn)技巧,并附帶實(shí)例源碼供讀者下載,需要的朋友可以參考下2015-11-11
快速解決Android平臺(tái)移植ffmpeg的一些問題
模仿Android的MediaPlayer類實(shí)現(xiàn)了ffmpeg的播放接口,如setDataSource(),setDisplay(),start(), stop(),pause()等,缺點(diǎn)是沒有實(shí)現(xiàn)seek功能2013-11-11
Android中基于XMPP協(xié)議實(shí)現(xiàn)IM聊天程序與多人聊天室
這篇文章主要介紹了Android中基于XMPP協(xié)議實(shí)現(xiàn)IM聊天程序與多人聊天室的方法,XMPP基于XML數(shù)據(jù)格式傳輸,一般用于即時(shí)消息(IM)以及在線現(xiàn)場探測,需要的朋友可以參考下2016-02-02

