最近完成了一個高仿的QQ音樂播放器,其中我實現了常駐底部欄,里面的播放按鈕的實現方式在這里總結回顧一下。
可以看到這里的播放按鈕如下
拿到這個問題先對要實現的需求進行分析:
1.圓形進度條
2.播放控制
知道了需求,我想到的實現方式有兩種:
第一種,圓形進度條用自定義View繪制實現,然后整體用幀布局FrameLayout,在圓形進度條組件上方放一個ImageView的播放按鈕。
第二種,自定義ViewGroup,整體封裝成一個組件。
思考之后,兩種都可以實現,但是第一種相對來說有點像偷懶實現的方式,再加上這個是常駐底部欄,在很多地方都要用到,所以第一種不太適合,再加上自定義ViewGroup一直是一個難點,總要學習,所以這次我選擇了用第二種實現封裝。
現在來說一下實現思路:
這里可以看到我的實現思路,前面那個ViewPager在前一篇博客已經講過了,這次這個的實現思路很簡單:圓形進度條用自定義View,在用自定義ViewGroup將圓形進度條和一個控制播放的ImageView組合起來,最后因為要用到控制等事件響應,所以肯定要用到接口回調。
難點:
1.圓形進度條的自定義View的繪制。
2.自定義ViewGroup的實現步驟,怎么實現讓ImageView在圓形進度條的正中心(onLayout的計算)。
3.接口回調。
一、圓形進度條的自定義View的繪制。
這個我是參考慕課網的一節課(Android-打造炫酷進度條),網址http://www.imooc.com/learn/657 ,其中有講怎么繪制圓形進度條,這里說一下他的實現思路:
1、重寫onMeasure方法,其中要注意的就是三種不同的測量模式(UNSPECIFIED,AT_MOST,EXACTILY),這是自定義View經常要考慮的東西,不同的模式,長寬的計算方式是不一樣的。
2.重寫onDraw方法,向用畫筆Paint繪制一個圓(淺顏色的圓),在用Paint繪制一個圓弧(深顏色的圓弧)和圓重疊,當做進度條,這里有一個重點就是Android中默認繪制圓弧是從3點鐘方向開始繪制,但是我們的需求肯定是從0點鐘方向開始繪制,所以要倒退90度。
canvas.drawArc(new RectF(0,0,mRdius*2-mReachHeight/2,mRdius*2-mReachHeight/2),-90,sweepAngle,false,mPaint);
這句話就實現了,其中-90就是從3點鐘方向倒退到0點鐘方向開始繪制。
圓形進度條的代碼如下:
RoundProgressBarWithProgress.java
package com.project.musicplayer.customview;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import com.project.musicplayer.R;
/**
* Created by Administrator on 2016/7/4.
*/
public class RoundProgressBarWithProgress extends HorizontalProgressbarWithProgress {
private int mRdius = dp2px(30);
private int MaxPaintWidth;
public RoundProgressBarWithProgress(Context context) {
this(context, null);
}
public RoundProgressBarWithProgress(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public RoundProgressBarWithProgress(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
mReachHeight = (int) (mUnReachHeight*1.5f);
TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.RoundProgressBarWithProgress);
mRdius = (int) ta.getDimension(R.styleable.RoundProgressBarWithProgress_radius,mRdius);
ta.recycle();
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setAntiAlias(true);
mPaint.setDither(true);
mPaint.setStrokeCap(Paint.Cap.ROUND);
}
@Override
protected synchronized void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
MaxPaintWidth = Math.max(mReachHeight,mUnReachHeight);
int expect = mRdius*2 + MaxPaintWidth + getPaddingLeft() + getPaddingRight();
int width = resolveSize(expect,widthMeasureSpec);
int height = resolveSize(expect,heightMeasureSpec);
int realWidth = Math.min(width,height);
mRdius = (realWidth - getPaddingLeft() - getPaddingRight() - MaxPaintWidth)/2;
setMeasuredDimension(realWidth,realWidth);
}
@Override
protected synchronized void onDraw(Canvas canvas) {
String text = getProgress() + "%";
float textWidth = mPaint.measureText(text);
float textHeight = (mPaint.descent()+mPaint.ascent())/2;
canvas.save();
canvas.translate(getPaddingLeft() + MaxPaintWidth / 2, getPaddingTop() + MaxPaintWidth / 2);
mPaint.setStyle(Paint.Style.STROKE);
//drawunReachbar
mPaint.setColor(mUnReachColor);
mPaint.setStrokeWidth(mUnReachHeight);
canvas.drawCircle(mRdius, mRdius, mRdius, mPaint);
//draw reach bar
mPaint.setColor(mReachColor);
mPaint.setStrokeWidth(mReachHeight);
float sweepAngle = getProgress()*1.0f/getMax()*360;
canvas.drawArc(new RectF(0,0,mRdius*2-mReachHeight/2,mRdius*2-mReachHeight/2),-90,sweepAngle,false,mPaint);
/* //draw text
mPaint.setColor(mTextColor);
mPaint.setStyle(Paint.Style.FILL);
canvas.drawText(text,mRdius - textWidth/2,mRdius - textHeight,mPaint);*/
canvas.restore();;
}
}
HorizontalProgressbarWithProgress.java
package com.project.musicplayer.customview;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.widget.ProgressBar;
import com.project.musicplayer.R;
import java.lang.reflect.Type;
/**
* Created by Administrator on 2016/7/4.
*/
public class HorizontalProgressbarWithProgress extends ProgressBar {
private static final int DEFAULT_TEXT_SIZE = 10;//sp
private static final int DEFAULT_TEXT_COLOR = 0xFFFC00D1;
private static final int DEFAULT_COLOR_UNREACH = 0xFFD3D6DA;
private static final int DEFAULT_HEIGHT_UNREACH = 2;//dp
private static final int DEFAULT_COLOR_REACH = DEFAULT_TEXT_COLOR;
private static final int DEFAULT_HEIGHT_REACH = 2;
private static final int DEFAULT_TEXT_OFFSET = 10;
protected int mTextSize = sp2px(DEFAULT_TEXT_SIZE);
protected int mTextColor = DEFAULT_TEXT_COLOR;
protected int mUnReachColor = DEFAULT_COLOR_UNREACH;
protected int mUnReachHeight = dp2px(DEFAULT_HEIGHT_UNREACH);
protected int mReachColor = DEFAULT_COLOR_REACH;
protected int mReachHeight = dp2px(DEFAULT_HEIGHT_REACH);
protected int mTextOffset = dp2px(DEFAULT_TEXT_OFFSET);
protected Paint mPaint = new Paint();
private int mRealWidth;
public HorizontalProgressbarWithProgress(Context context) {
this(context, null);
}
public HorizontalProgressbarWithProgress(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public HorizontalProgressbarWithProgress(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
obtainStyledAttrs(attrs);
}
@Override
protected synchronized void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
//int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int widthVal = MeasureSpec.getSize(widthMeasureSpec);
int height = measureHeight(heightMeasureSpec);
setMeasuredDimension(widthVal,height);
mRealWidth = getMeasuredWidth() - getPaddingLeft() - getPaddingRight();
}
@Override
protected synchronized void onDraw(Canvas canvas) {
canvas.save();
//draw reachbar
canvas.translate(getPaddingLeft(),getHeight()/2);
boolean noNeedUnReach = false;
float radio = getProgress()*1.0f/getMax();
String text = getProgress() + "%";
int textWidth = (int) mPaint.measureText(text);
float progressX = radio*mRealWidth;
if(progressX + textWidth > mRealWidth){
progressX = mRealWidth - textWidth;
noNeedUnReach = true;
}
float endX = progressX - mTextOffset/2;
if(endX > 0){
mPaint.setColor(mReachColor);
mPaint.setStrokeWidth(mReachHeight);
canvas.drawLine(0,0,endX,0,mPaint);
}
//draw text
mPaint.setColor(mTextColor);
int y = (int) (-(mPaint.descent()+mPaint.ascent())/2);
canvas.drawText(text,progressX,y,mPaint);
//draw unreachbar
if(!noNeedUnReach){
float start = progressX + mTextOffset/2 + textWidth;
mPaint.setColor(mUnReachColor);
mPaint.setStrokeWidth(mUnReachHeight);
canvas.drawLine(start,0,mRealWidth,0,mPaint);
}
canvas.restore();
}
private int measureHeight(int heightMeasureSpec) {
int result = 0;
int mode = MeasureSpec.getMode(heightMeasureSpec);
int size = MeasureSpec.getSize(heightMeasureSpec);
if(mode == MeasureSpec.EXACTLY){
result = size;
}else{
int textHeight = (int) (mPaint.descent() - mPaint.ascent());
result = getPaddingTop() + getPaddingBottom() + Math.max(Math.max(mReachHeight,mUnReachHeight), textHeight);
if(mode == MeasureSpec.AT_MOST){
result = Math.min(result,size);
}
}
return result;
}
//獲取自定義屬性
private void obtainStyledAttrs(AttributeSet attrs) {
TypedArray ta = getContext().obtainStyledAttributes(attrs, R.styleable.HorizontalProgressbarWithProgress);
mTextSize = (int) ta.getDimension(R.styleable.HorizontalProgressbarWithProgress_progress_text_size, mTextSize);
mTextColor = ta.getColor(R.styleable.HorizontalProgressbarWithProgress_progress_text_color, mTextColor);
mTextOffset = (int) ta.getDimension(R.styleable.HorizontalProgressbarWithProgress_progress_text_offset, mTextOffset);
mUnReachColor = ta.getColor(R.styleable.HorizontalProgressbarWithProgress_progress_unreach_color, mUnReachColor);
mUnReachHeight = (int) ta.getDimension(R.styleable.HorizontalProgressbarWithProgress_progress_unreach_height, mUnReachHeight);
mReachColor = ta.getColor(R.styleable.HorizontalProgressbarWithProgress_progress_reach_color, mReachColor);
mReachHeight = (int) ta.getDimension(R.styleable.HorizontalProgressbarWithProgress_progress_reach_height, mReachHeight);
ta.recycle();
mPaint.setTextSize(mTextSize);
}
protected int dp2px(int dpVal) {
return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dpVal
, getResources().getDisplayMetrics());
}
protected int sp2px(int spVal) {
return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, spVal
, getResources().getDisplayMetrics());
}
}
attrs.xml
<resources>
<declare-styleable name="HorizontalProgressbarWithProgress">
<attr name="progress_unreach_color" format="color"/>
<attr name="progress_unreach_height" format="dimension"/>
<attr name="progress_reach_color" format="color"/>
<attr name="progress_reach_height" format="dimension"/>
<attr name="progress_text_color" format="color"/>
<attr name="progress_text_size" format="dimension"/>
<attr name="progress_text_offset" format="dimension"/>
</declare-styleable>
<declare-styleable name="RoundProgressBarWithProgress">
<attr name="radius" format="dimension"/>
</declare-styleable>
</resources>
二、自定義ViewGroup。
1.重寫onMeasure
2.重寫onLayout
3.接口回調
這里說一下難點,難點就是在onLayout中需要通過計算將ImageView居中,看似簡單但是怎么都無法正居中,最后慢慢調整才能夠實現。
其他的都是自定義ViewGroup的常規實現方式,這里就不講了,上代碼:
PlayButton.java
package com.project.musicplayer.customview;
import android.content.Context;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import com.project.musicplayer.R;
/**
* Created by Administrator on 2016/7/4.
*/
public class PlayButton extends ViewGroup implements View.OnClickListener {
private RoundProgressBarWithProgress RProgressBar;
private ImageView Btn;
private boolean isPlaying = false;
private onPlayClickListener listener;
public void setOnPlayListener(onPlayClickListener listener) {
this.listener = listener;
}
public int getProgressMAX() {
return RProgressBar.getMax();
}
public interface onPlayClickListener{
void onClick(View v);
}
public PlayButton(Context context) {
this(context, null);
}
public PlayButton(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public PlayButton(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int count = getChildCount();
for(int i = 0;i<count;i++){
measureChild(getChildAt(i),widthMeasureSpec,heightMeasureSpec);
}
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
if(changed){
layoutProgress();
layoutBtn();
}
}
//定位btn的位置
private void layoutBtn() {
Btn = (ImageView) getChildAt(1);
Btn.setOnClickListener(this);
int l = 0;
int t = 0;
int width = Btn.getMeasuredWidth();
int height = Btn.getMeasuredHeight();
Log.i("MeasureWidth",getMeasuredWidth()+"");
Log.i("ProGressMeasureWidth",RProgressBar.getMeasuredWidth()+"");
Log.i("padding",getPaddingLeft()+"");
l = (int) (RProgressBar.getMeasuredWidth()/2.0f-width/2.0f);
t = (int) (RProgressBar.getMeasuredHeight()/2.0f-height/2.0f+getPaddingTop());
Btn.layout(l,t,l+width,l+height);
}
//定位progressbar的位置
private void layoutProgress() {
RProgressBar = (RoundProgressBarWithProgress) getChildAt(0);
int l = 0;
int t = 0;
int width = RProgressBar.getMeasuredWidth();
int height = RProgressBar.getMeasuredHeight();
l = l + getPaddingLeft();
t = t + getPaddingTop();
RProgressBar.layout(l,t,l+width-getPaddingRight(),t+height-getPaddingBottom());
}
@Override
public void onClick(View v) {
Btn = (ImageView) findViewById(R.id.iv_id_play);
if(isPlaying){
isPlaying = false;
Btn.setImageResource(R.mipmap.play);
}else{
isPlaying = true;
Btn.setImageResource(R.mipmap.stop);
}
if(listener != null){
listener.onClick(Btn);
}
}
/**
* 設置播放狀態
*/
public void setPlayingStatus(){
isPlaying = true;
Btn.setImageResource(R.mipmap.stop);
}
/**
* 設置暫停狀態
*/
public void setPauseStatus(){
isPlaying = false;
Btn.setImageResource(R.mipmap.play);
}
/**
* 設置播放進度
*/
public void setProgress(int progress){
RProgressBar.setProgress(progress);
}
/**
* 獲取播放進度
*/
public int getProgress(){
return RProgressBar.getProgress();
}
/**
* 設置進度max
*/
public void setProgressMAX(int max){
RProgressBar.setMax(max);
}
}
三、最后一個難點,接口回調,另用一篇博客來講吧,這次算是真正理解了接口回調的實現方式。