最近完成了一个高仿的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);
}
}
三、最后一个难点，接口回调，另用一篇博客来讲吧，这次算是真正理解了接口回调的实现方式。
网友评论
跳转其他活动时底部布局不变