android自定义view制作圆形进度条效果
作者:rorntuck7
这篇文章主要为大家详细介绍了android自定义view制作圆形进度条效果的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
还是我们自定View的那几个步骤:
1、自定义View的属性
2、在View的构造方法中获得我们自定义的属性
[ 3、重写onMesure ]
4、重写onDraw
1、自定义属性:
<?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="CustomTitleView"> <attr name="mSpeed" format="integer" /> <attr name="mFirstColor" format="color" /> <attr name="mSecondColor" format="color" /> <attr name="mCircleWidth" format="dimension"/> <attr name="textSize" format="dimension"/> </declare-styleable> </resources>
2、在View的构造方法中获得我们自定义的属性
/** * 当前进度 */ private int mProgress; /** * 第一圈的颜色 */ private int mFirstColor; /** * 第二圈的颜色 */ private int mSecondColor; /** * 圈的宽度 */ private int mCircleWidth; /** * 速度 */ private int mSpeed; /** * 中间进度百分比的字符串的字体 */ private float textSize; private boolean isNext = false; private Paint mPaint; public CustomTitleView(Context context, AttributeSet attrs) { super(context, attrs); TypedArray typearray = context.obtainStyledAttributes(attrs, R.styleable.CustomTitleView); int count= typearray.getIndexCount(); for(int i=0;i<count;i++){ int attr =typearray.getIndex(i); switch(attr){ case R.styleable.CustomTitleView_mFirstColor: mFirstColor=typearray.getColor(attr,Color.BLACK); break; case R.styleable.CustomTitleView_mSecondColor: mSecondColor=typearray.getColor(attr,Color.RED); break; case R.styleable.CustomTitleView_mCircleWidth: mCircleWidth = typearray.getDimensionPixelSize(attr,(int)TypedValue.applyDimension( TypedValue.COMPLEX_UNIT_PX,20,getResources().getDisplayMetrics())); break; case R.styleable.CustomTitleView_textSize: textSize = typearray.getDimensionPixelSize(attr,(int)TypedValue.applyDimension( TypedValue.COMPLEX_UNIT_PX,30,getResources().getDisplayMetrics())); break; case R.styleable.CustomTitleView_mSpeed: mSpeed = typearray.getInt(attr,100);// 默认100 break; } } Log.v("----",mSpeed+""); typearray.recycle(); mPaint = new Paint(); new Thread() { public void run() { while (true) { mProgress++; if (mProgress == 360) { mProgress = 0; if (!isNext) isNext = true; else isNext = false; } postInvalidate(); try { Thread.sleep(mSpeed); } catch (InterruptedException e) { e.printStackTrace(); } } }; }.start(); }
3、直接重写onDraw,这不需要重写onMeasure
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec){ super.onMeasure(widthMeasureSpec, heightMeasureSpec); } protected void onDraw(Canvas canvas) { /** * 画进度百分比 */ mPaint.setStrokeWidth(0); mPaint.setColor(Color.BLACK); mPaint.setTextSize(textSize); mPaint.setTypeface(Typeface.DEFAULT_BOLD); //设置字体 int percent = (int)(((float)mProgress / (float)360) * 100); int centre = getWidth() / 2; // 获取圆心的x坐标 int radius = centre - mCircleWidth / 2;// 半径 float textWidth = mPaint.measureText(percent + "%"); //测量字体宽度,我们需要根据字体的宽度设置在圆环中间 canvas.drawText(percent + "%",centre-textWidth/ 2,centre+textSize/2, mPaint); //画出进度百分比 mPaint.setStrokeWidth(mCircleWidth); // 设置圆环的宽度 mPaint.setAntiAlias(true); // 消除锯齿 mPaint.setStyle(Paint.Style.STROKE); // 设置空心 RectF oval = new RectF(centre - radius, centre - radius, centre + radius, centre + radius); // 用于定义的圆弧的形状和大小的界限 if(isNext){ mPaint.setColor(mSecondColor); // 设置圆环的颜色 canvas.drawCircle(centre, centre, radius, mPaint); // 画出圆环 mPaint.setColor(mFirstColor); // 设置圆环的颜色 canvas.drawArc(oval, -90, mProgress, false, mPaint); // 根据进度画圆弧 }else{ mPaint.setColor(mFirstColor); // 设置圆环的颜色 canvas.drawCircle(centre, centre, radius, mPaint); // 画出圆环 mPaint.setColor(mSecondColor); // 设置圆环的颜色 canvas.drawArc(oval, -90, mProgress, false, mPaint); // 根据进度画圆弧 } }
activity_main.xml
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:custom="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:padding="20dp" > <view.CustomTitleView android:layout_width="200dp" android:layout_height="400dp" custom:mSpeed="50" custom:mFirstColor="#7300e6" custom:mSecondColor="#39ac39" custom:mCircleWidth="10px" custom:textSize="20px" android:id="@+id/one" /> <view.CustomTitleView android:layout_toEndOf="@id/one" android:layout_width="200dp" android:layout_height="400dp" custom:mSpeed="100" custom:mFirstColor="#0040ff" custom:mSecondColor="#40ff00" custom:mCircleWidth="20px" custom:textSize="30px" /> </RelativeLayout>
效果预览
源码下载:http://xiazai.jb51.net/201701/yuanma/AndroidProgressbar(jb51.net).rar
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。