由于最近项目需求,需要把原生的音量条换成圆形的,刚开始采用系统的ProgressBar,没有达到预想的效果,所以决定采用自定义的View来实现。先看下效果图:
GIF.gif
概述:
1.首先自定义View的属性,画出圆环形状
2.找到framework中音量条显示的代码并替换成自定义的布局
自定义圆形音量条的流程:
1.需要继承Android中的View,并且初始化圆形进度条需要的一些颜色值等。
private int mRoundColor = Color.parseColor("#ccffffff");//20%白色透明,圆环背景色
private int mRroundProgressColor = Color.parseColor("#00b4ff");//蓝色,圆环进度颜色
private float mRoundWidth = 25;//圆环宽度
private int mMaxValue = 100;//最大值
private int mCurrentPorgress;
private int startAngle;
public RoundProgressBar(Context context) {
this(context, null);
}
public RoundProgressBar(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public RoundProgressBar(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
mPaint = new Paint();
startAngle = -90;
setLayerType(View.LAYER_TYPE_HARDWARE, null);
}
2.画出最外圈圆环
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(mRoundWidth);
mPaint.setAntiAlias(true);
canvas.drawCircle(center, center, radius, mPaint);
3.画出最里面圆环
mPaint.setColor(mRroundProgressColor);
RectF oval = new RectF(center - radius, center - radius, center
+ radius, center + radius);
mPaint.setStrokeCap(Paint.Cap.ROUND);
mPaint.setStyle(Paint.Style.STROKE);
canvas.drawArc(oval, startAngle, 360 * mCurrentPorgress / mMaxValue,
false, mPaint);
4.设置圆环的进度显示
public synchronized void setProgress(int progress) {
if (progress < 0) {
return;
}
if (progress > mMaxValue) {
progress = mMaxValue;
}
if (progress <= mMaxValue) {
mCurrentPorgress = progress;
postInvalidate();
}
}
至此,自定义圆环进度条就完成,代码很简单,最主要的是要找到系统音量条显示的代码位置进行替换。
修改系统音量条显示
通过查看系统音量条的调用流程可以找到这段代码的位置SystemUI/src/com/android/systemui/volume/VolumePanel.java
1.VolumePanel类里面主要是设置音量条的显示布局,首先我们要看清楚要设置的音量类型,private enum StreamResources里面就展现出来系统音量的几种类型,包括铃声,蓝牙,音乐等类型的音量条。
2.接下来就需要初始化我们自定义的圆形进度条了,VolumePanel(Context context, ZenModeController zenController)在这个方法和createSliders()方法中去初始化我们要加载的布局文件,同时我们还可以自定义显示的位置大小等。
3.最后,在updateSliderProgress()方法中设置音量值。
至此,自定义圆环音量条已经介绍完毕。