效果图如下:
实现代码:
import android.content.Context;
import android.graphics.Canvas; import android.graphics.Color; import android.graphics.LinearGradient; import android.graphics.Paint; import android.graphics.RectF; import android.graphics.Shader; import android.util.AttributeSet; import android.view.View; /** * Created by dawn on 2017/12/7. * * 自定义渐变进度条 */ public class ProgressView extends View{ public ProgressView(Context context) { super(context); } /**渐变颜色*/ private static final int[] SECTION_COLORS = {0xff123b9d,0xff4e9bce,0xff85f4fb}; /**进度条最大值*/ private float maxCount; /**进度条当前值*/ private float currentCount; /**画笔*/ private Paint mPaint = new Paint();
private int mWidth,mHeight;//设置宽度和高度 public ProgressView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } public ProgressView(Context context, AttributeSet attrs) { super(context, attrs); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); mPaint.setAntiAlias(true); int round = mHeight/2; //蓝色边框 //绘制阴影效果 int beginP=dipToPx(0); mPaint = new Paint(Paint.ANTI_ALIAS_FLAG); mPaint.setColor(0xff00a3d5); mPaint.setStyle(Paint.Style.FILL); mPaint.setShadowLayer(100, 0, 0,Color.WHITE); RectF rectBg = new RectF(beginP, beginP, mWidth, mHeight); canvas.drawRoundRect(rectBg, round, round, mPaint); //深蓝色边框 mPaint.setColor(Color.rgb(7, 38, 85)); RectF rectBg1 = new RectF(beginP+2, beginP+2, mWidth-2, mHeight-2); canvas.drawRoundRect(rectBg1, round, round, mPaint); mPaint.setColor(0xff072655); RectF rectBlackBg = new RectF(beginP+4, beginP+4, mWidth-4, mHeight-4); canvas.drawRoundRect(rectBlackBg, round, round, mPaint); float section = currentCount/maxCount; RectF rectProgressBg = new RectF(beginP+3, beginP+3, (mWidth-3)*section, mHeight-3); if(section <= 1.0f/3.0f){ if(section != 0.0f){ mPaint.setColor(SECTION_COLORS[0]); }else{ mPaint.setColor(Color.TRANSPARENT); } }else{ int count = (section <= 1.0f/3.0f*2 ) ? 2 : 3; int[] colors = new int[count]; System.arraycopy(SECTION_COLORS, 0, colors, 0, count); float[] positions = new float[count]; if(count == 2){ positions[0] = 0.0f; positions[1] = 1.0f-positions[0]; }else{ positions[0] = 0.0f; positions[1] = (maxCount/3)/currentCount; positions[2] = 1.0f-positions[0]*2; } positions[positions.length-1] = 1.0f; //线性渲染 LinearGradient shader = new LinearGradient(3, 3, (mWidth-3)*section, mHeight-3, colors,null, Shader.TileMode.MIRROR); mPaint.setShader(shader); } canvas.drawRoundRect(rectProgressBg, round, round, mPaint); } /** * dp转换成像素 * @param dip * @return */ private int dipToPx(int dip) { float scale = getContext().getResources().getDisplayMetrics().density; return (int) (dip * scale + 0.5f * (dip >= 0 ? 1 : -1)); } /*** * 设置最大的进度值 * @param maxCount */ public void setMaxCount(float maxCount) { this.maxCount = maxCount; } /*** * 设置当前的进度值 * @param currentCount */ public void setCurrentCount(float currentCount) { this.currentCount = currentCount > maxCount ? maxCount : currentCount; invalidate(); } /** * UNSPECIFIED 父容器没有对当前View有任何限制,当前View可以任意取尺寸 * EXACTLY 当前的尺寸就是当前View应该取的尺寸 * AT_MOST 当前尺寸是当前View能取的最大尺寸 * @param widthMeasureSpec * @param heightMeasureSpec */ @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { int widthSpecMode = MeasureSpec.getMode(widthMeasureSpec); int widthSpecSize = MeasureSpec.getSize(widthMeasureSpec); int heightSpecMode = MeasureSpec.getMode(heightMeasureSpec); int heightSpecSize = MeasureSpec.getSize(heightMeasureSpec); if (widthSpecMode == MeasureSpec.EXACTLY || widthSpecMode == MeasureSpec.AT_MOST) { mWidth = widthSpecSize; } else { mWidth = 0; } if (heightSpecMode == MeasureSpec.AT_MOST || heightSpecMode == MeasureSpec.UNSPECIFIED) { mHeight = dipToPx(25); } else { mHeight = heightSpecSize; } setMeasuredDimension(mWidth, mHeight); } }
问题:
效果图还有一层阴影,我怎么改都实现不了。若有人知道,劳烦告诉我一声,谢谢。