介绍
今天上班的时候有个哥们问我怎么去实现一个按钮式的进度条,先来看看他需要实现的效果图。
和普通的圆形进度条类似,只是中间的地方有两个状态表示,未开始,暂停状态。而且他说圆形进度的功能已经实现了。那么我们只需要对中间的两个状态做处理就行了。
先来看看实现的效果图:
上面说了我们只需要处理中间状态的变化就可以了,对于进度的处理直接使用了弘洋文章中实现:
http://blog.csdn.net/lmj623565791/article/details/43371299
下面开始具体实现。
具体实现
自定义的实现还是按照官方提供的步骤来,对于自定义View的步骤之前我也写过一篇文章,感兴趣的朋友可以看一下:Android自定义View的官方套路。
为了完整讲解,下面还是会提到圆形进度条的自定义,知道进度的实现可以直接跳过部分步骤。
1、创建View
观察要实现的外圈进度条,有两个进度:一个用来表示默认的圆形,另一个表示进度的颜色。所以这里涉及到两个进度条颜色宽高的定义。要绘制圆肯定需要半径了。
创建view有三小步
(1)、定义属性
(1)、定义属性变量以及构造方法中获取属性
private static final int DEFAULT_TEXT_COLOR = 0XFFFC00D1; private static final int DEFAULT_COLOR_UNREACHED_COLOR = 0xFFd3d6da; private static final int DEFAULT_HEIGHT_REACHED_PROGRESS_BAR = 2; private static final int DEFAULT_HEIGHT_UNREACHED_PROGRESS_BAR = 2; /** * The status of this view currently; */ private Status mStatus = Status.End; /** * painter of all drawing things */ protected Paint mPaint = new Paint(); /** * height of reached progress bar */ protected int mReachedProgressBarHeight = dp2px(DEFAULT_HEIGHT_REACHED_PROGRESS_BAR); /** * color of reached bar */ protected int mReachedBarColor = DEFAULT_TEXT_COLOR; /** * color of unreached bar */ protected int mUnReachedBarColor = DEFAULT_COLOR_UNREACHED_COLOR; /** * height of unreached progress bar */ protected int mUnReachedProgressBarHeight = dp2px(DEFAULT_HEIGHT_UNREACHED_PROGRESS_BAR); /** * the length of triangle */ private int triangleLength; /** * use path to draw triangle */ private Path mPath; /** * mRadius of view */ private int mRadius = dp2px(30); public ButtonCircleProgressBar(Context context) { this(context,null); } public ButtonCircleProgressBar(Context context, AttributeSet attrs) { this(context, attrs,0); } public ButtonCircleProgressBar(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); // init values from custom attributes final TypedArray attributes = getContext().obtainStyledAttributes( attrs, R.styleable.ButtonCircleProgressBar); mReachedBarColor = attributes .getColor( R.styleable.ButtonCircleProgressBar_progress_reached_color, Color.BLUE); mUnReachedBarColor = attributes .getColor( R.styleable.ButtonCircleProgressBar_progress_unreached_color, DEFAULT_COLOR_UNREACHED_COLOR); mReachedProgressBarHeight = (int) attributes .getDimension( R.styleable.ButtonCircleProgressBar_progress_reached_bar_height, mReachedProgressBarHeight); mUnReachedProgressBarHeight = (int) attributes .getDimension( R.styleable.ButtonCircleProgressBar_progress_unreached_bar_height, mUnReachedProgressBarHeight); mRadius = (int) attributes.getDimension( R.styleable.ButtonCircleProgressBar_radius, mRadius); triangleLength = mRadius; attributes.recycle(); mPaint.setStyle(Paint.Style.STROKE); mPaint.setAntiAlias(true); mPaint.setDither(true); mPaint.setStrokeCap(Paint.Cap.ROUND); mPath = new Path();//need path to draw triangle } public Status getStatus() { return mStatus; } public void setStatus(Status status) { mStatus = status; invalidate(); } public enum Status{ End, Starting }
获取基础的一些属性,这里mStatus用来表示当前View的状态:End代码结束,Starting正在进行。我们用这两个状态来判定怎么去draw去合适的效果。提供了setStatus为Staus设置状态。
mPath用来进行绘制未开始时候的三角形。
2、处理View的布局
这一步主要是onMeasure方法中测量出合适的宽高。
@Override protected synchronized void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { int heightMode = MeasureSpec.getMode(heightMeasureSpec); int widthMode = MeasureSpec.getMode(widthMeasureSpec); int paintWidth = Math.max(mReachedProgressBarHeight, mUnReachedProgressBarHeight); if (heightMode != MeasureSpec.EXACTLY) { int exceptHeight = (int) (getPaddingTop() + getPaddingBottom() + mRadius * 2 + paintWidth); heightMeasureSpec = MeasureSpec.makeMeasureSpec(exceptHeight, MeasureSpec.EXACTLY); } if (widthMode != MeasureSpec.EXACTLY) { int exceptWidth = (int) (getPaddingLeft() + getPaddingRight() + mRadius * 2 + paintWidth); widthMeasureSpec = MeasureSpec.makeMeasureSpec(exceptWidth, MeasureSpec.EXACTLY); } super.onMeasure(widthMeasureSpec, heightMeasureSpec); }
只需要处理宽高没有精确指定的情况,通过padding加上整个圆以及Paint的宽度计算出具体的值。
接下来就是第三步,绘制效果。
3、绘制View
为了更加清晰一点,这里先说绘制圆的进度,再说圆中间的状态。
(1)、绘制圆
@Override protected synchronized void onDraw(Canvas canvas) { super.onDraw(canvas); canvas.save(); canvas.translate(getPaddingLeft(), getPaddingTop()); mPaint.setStyle(Paint.Style.STROKE); // draw unreaded bar mPaint.setColor(mUnReachedBarColor); mPaint.setStrokeWidth(mUnReachedProgressBarHeight); canvas.drawCircle(mRadius, mRadius, mRadius, mPaint); // draw reached bar mPaint.setColor(mReachedBarColor); mPaint.setStrokeWidth(mReachedProgressBarHeight); float sweepAngle = getProgress() * 1.0f / getMax() * 360; canvas.drawArc(new RectF(0, 0, mRadius * 2, mRadius * 2), 0, sweepAngle, false, mPaint);
通过 canvas.drawCircle(mRadius, mRadius, mRadius, mPaint);绘制默认状态下的圆。之后改变画笔的颜色,根据进度绘制圆弧。
(2)、绘制中间的状态。
第一种是未开始的情况,中间是一个三角形。我们使用Path来绘制三角形,主要通过 moveTo(float x, float y)来设置第一个点,然后通过lineTo(float x, float y)来连接一个三角形。再设置Paint为填充。
第一个点这里设置为三角形的左上角的顶点。
那么第一个点怎么算?
我们这里绘制一个等边三角形,设置边长等于半径。
第一个点的x坐标就应该是圆的直径减去三角形的高之后除以2,即:
float leftX = (float) ((2*mRadius-Math.sqrt(3.0)/2*triangleLength)/2);
y坐标就为:mRadius-(triangleLength/2)
第二个点这里选三角形的左下角,x坐标不变,y值为半径加上边长的一半:mRadius+(triangleLength/2)
第三个点选右边的点,x点的坐标显然就是第一个点的x坐标加上三角形的高
即:(float) (leftX+Math.sqrt(3.0)/2*triangleLength),y点坐标就是半径mRadius。
最后再回到第一个点就连接成三角形了。
mPath设置的完整代码如下
public class ButtonCircleProgressBar extends ProgressBar { ......... mPath = new Path();//need path to draw triangle triangleLength = mRadius; float leftX = (float) ((2*mRadius-Math.sqrt(3.0)/2*triangleLength)/2); float realX = (float) (leftX+leftX*0.2); mPath.moveTo(realX,mRadius-(triangleLength/2)); mPath.lineTo(realX,mRadius+(triangleLength/2)); mPath.lineTo((float) (realX+Math.sqrt(3.0)/2*triangleLength),mRadius); mPath.lineTo(realX,mRadius-(triangleLength/2)); }
这里用了realX设置成了leftX的两倍,是因为我感觉三角形设置在中间的效果不太好,所以让他在原有基础上增加0.2倍的距离。
有了mPath变量之后就可以在onDraw中绘制未开始状态的三角形了,看代码
@Override protected synchronized void onDraw(Canvas canvas) { super.onDraw(canvas); canvas.save(); canvas.translate(getPaddingLeft(), getPaddingTop()); .... if (mStatus==Status.End){//未开始状态,画笔填充 mPaint.setStyle(Paint.Style.FILL); canvas.drawPath(mPath,mPaint);//直接drawPath }else{ mPaint.setStyle(Paint.Style.STROKE); mPaint.setStrokeWidth(dp2px(5)); canvas.drawLine(mRadius*2/3,mRadius*2/3,mRadius*2/3,2*mRadius*2/3,mPaint); canvas.drawLine(2*mRadius-(mRadius*2/3),mRadius*2/3,2*mRadius-(mRadius*2/3),2*mRadius*2/3,mPaint); } canvas.restore(); }
进行中的状态就是画两条线,第一条线x直接设为半径的2/3倍,起始y点为2/3倍,结束为开始y点的2/3倍
对与另外一条线,x点直径减去mRadius*2/3,y点坐标的变化和上一条线一样。
这样就完成了onDraw方法。
4、处理用户交互
由于对于下载更新进度的情况来说,该控件只做状态显示,所以这一步不需要了,要使用的话自己设置点击事件就可以了。
使用
Activity里设置点击事件修改状态,具体根据自己逻辑处理。
public class MainActivity extends AppCompatActivity { private ButtonCircleProgressBar mProgressBar; private static final int MSG_PROGRESS_UPDATE = 0x110; private int progress; private Handler mHandler = new Handler() { public void handleMessage(android.os.Message msg) { progress = mProgressBar.getProgress(); mProgressBar.setProgress(++progress); if (progress >= 100) { mHandler.removeMessages(MSG_PROGRESS_UPDATE); progress = 0; mProgressBar.setStatus(ButtonCircleProgressBar.Status.End); mProgressBar.setProgress(0); }else{ mHandler.sendEmptyMessageDelayed(MSG_PROGRESS_UPDATE, 100); } }; }; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mProgressBar = (ButtonCircleProgressBar) findViewById(R.id.progressBar); mProgressBar.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { if (mProgressBar.getStatus()== ButtonCircleProgressBar.Status.Starting){ mProgressBar.setStatus(ButtonCircleProgressBar.Status.End); mHandler.removeMessages(MSG_PROGRESS_UPDATE); }else{ mHandler.sendEmptyMessage(MSG_PROGRESS_UPDATE); mProgressBar.setStatus(ButtonCircleProgressBar.Status.Starting); } } }); } }
好了,到这里一个圆形进度条式按钮就实现了.希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!