Android 自定义上下分离的圆环倒计时

干这行这么久了还是第一次写文章,试试水。有什么不足还请多多指教,



效果图

主要代码(绘制两个圆弧,和文字)

/**

*调用onDraw绘制边框

*/

@Override

protected void onDraw(Canvascanvas) {

//TODO Auto-generated method stub

super.onDraw(canvas);

canvas.drawColor(Color.green(R.color.green));//设置背景颜色

//创建一个RectF,用来限定绘制圆弧的范围

RectFrectf= newRectF();

//设置画笔的颜色

mPaint.setColor(Color.WHITE);

//设置进度是实心还是空心

mPaint.setStrokeWidth(2);//设置圆环的宽度

//        //设置画笔的样式,空心

mPaint.setStyle(Paint.Style.STROKE);

//设置抗锯齿

mPaint.setAntiAlias(true);

//设置画得一个半径,然后比较长和宽,以最大的值来确定长方形的长宽,确定半径

intr=getMeasuredWidth()>getMeasuredHeight()?getMeasuredWidth():getMeasuredHeight();

//如果设置的padding不一样绘制出来的是椭圆形。绘制的时候考虑padding

//Log.i("边界", "宽度"+getMeasuredWidth()+"高度"+getMeasuredHeight()+"getPaddingLeft()"+getPaddingLeft()+"getPaddingTop"+getPaddingTop()+"getPaddingRight(): "+getPaddingRight()+"getPaddingBottom()"+getPaddingBottom());

//当padding都为0的时候,绘制出来的就是RectF限定的区域就是一个正方形

intp=dip2px(context,2);

rectf.set(getPaddingLeft()+p,getPaddingTop()+p,r-getPaddingRight()-p,r-getPaddingBottom()-p);

//绘制圆弧

canvas.drawArc(rectf,-25,-130,false,mPaint);

rectf.set(getPaddingLeft()+p,getPaddingTop()+p,r-getPaddingRight()-p,r-getPaddingBottom()-p);

//绘制圆弧

canvas.drawArc(rectf,25,130,false,mPaint);


//绘制文字

mPaint.setColor(Color.WHITE);

mPaint.setStrokeWidth(0);

mPaint.setTextSize(12);

mPaint.setTextAlign(Paint.Align.CENTER);

mPaint.setStyle(Paint.Style.STROKE);//画空心矩形

canvas.drawText(time,r/2,r/2+dip2px(context,3),mPaint);

}


设置倒计时要更新Draw

public voidsetTime(Stringtime){

this.time=time;

invalidate();//更新

}


在线程中设置倒计时

private voidcalculationTime(){

//        time = ((min == 0?"00":min)&&(second == 0?"00" :second));

if(min==0){//读秒

//倒计时结束

if(second==0){

time="00:00";

//倒计时停止

if(timer!= null) {

timer.cancel();

timer= null;

}

if(timerTask!= null) {

timerTask= null;

}

}else{

second--;

if(second>=10) {//10秒以上

time="0"+min+":"+second;

}else{//10秒以内

time="0"+min+":0"+second;

}

}

}else{//读分钟和秒

if(second==0){//分钟数-1,秒递减

second=59;

min--;

if(min>=10) {

time=min+":"+second;

}else{

time="0"+min+":"+second;

}

}else{

second--;

if(second>=10){

if(min>=10) {

time=min+":"+second;

}else{

time="0"+min+":"+second;

}

}else{

if(min>=10) {

time=min+":0"+second;

}else{

time="0"+min+":0"+second;

}

}

}

}

}


在xml中的调用

android:orientation="vertical"android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@color/green">

android:id="@+id/countView"

android:layout_width="25dp"

android:layout_height="25dp"

android:gravity="center"

android:textColor="@android:color/darker_gray"

android:layout_margin="10dp"

android:padding="2dp"

/>


呼。。。完了,其实还有另一种方法,直接画一个环形的圆,然后在覆盖一个矩形,最后在矩形上绘制文字。

有什么问题,给我留言吧。一起学习,一起进步!!!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容