首页 > 代码库 > 【Android自定义控件】圆圈交替,仿progress效果
【Android自定义控件】圆圈交替,仿progress效果
还是我们自定View的那几个步骤:
1、自定义View的属性
2、在View的构造方法中获得我们自定义的属性
3、重写onMesure (不是必须)
4、重写onDraw
自定义View的属性
<?xml version="1.0" encoding="utf-8"?> <resources> <attr name="firstColor" format="color" /> <attr name="secondColor" format="color" /> <attr name="circleWidth" format="dimension" /> <attr name="speed" format="integer" /> <declare-styleable name="progressStyle"> <attr name="firstColor"/> <attr name="secondColor"/> <attr name="circleWidth"/> <attr name="speed"/> </declare-styleable> </resources>
自定义View,并且使用自定义的View
public class ProgressView extends View { /** * 第一圈的颜色 */ private int mFirstColor; /** * 第二圈的颜色 */ private int mSecondColor; /** * 圈的宽度 */ private int mCircleWidth; /** * 画笔 */ private Paint mPaint; /** * 当前进度 */ private int mProgress; /** * 速度 */ private int mSpeed; /** * 是否应该开始下一个 */ private boolean isNext = false; public ProgressView(Context context) { this(context, null); } public ProgressView(Context context, AttributeSet attrs) { this(context, attrs, 0); } public ProgressView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs, R.styleable.progressStyle,defStyleAttr,0); int n = typedArray.getIndexCount(); for (int i =0 ;i < n ; i ++){ int attr =typedArray.getIndex(i); switch (attr){//这里的0,1,2,3对应attrs中declare-styleable name="progressStyle"数组元素的顺序,我是为了举例方便,实际开发中不要这样写 case 0: mFirstColor = typedArray.getColor(attr, Color.BLACK); break; case 1: mSecondColor = typedArray.getColor(attr, Color.RED); break; case 2: mCircleWidth = typedArray.getDimensionPixelSize(attr,(int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 16,getResources().getDisplayMetrics())); break; case 3: mSpeed = typedArray.getInt(attr,20); break; } } typedArray.recycle(); mPaint = new Paint(); startMyThread(); } @Override protected void onDraw(Canvas canvas) { int center = getWidth() / 2; // 获取圆心的x坐标 int radius = (center - mCircleWidth)/2 ;// 半径 mPaint.setAntiAlias(true); mPaint.setStrokeWidth(mCircleWidth); mPaint.setStyle(Paint.Style.STROKE); RectF rectf = new RectF(center-radius,center-radius,center+radius,center+radius); //颜色的切换 if(!isNext){ canvas.save(); mPaint.setColor(mFirstColor);// 设置圆环的颜色 canvas.drawCircle(center,center,radius,mPaint);//划出圆圈 mPaint.setColor(mSecondColor); canvas.drawArc(rectf,-90,mProgress,false,mPaint);//根据进度画圆弧 canvas.restore(); }else { canvas.save(); mPaint.setColor(mSecondColor);// 设置圆环的颜色 canvas.drawCircle(center,center,radius,mPaint); mPaint.setColor(mFirstColor); canvas.drawArc(rectf,-90,mProgress,false,mPaint); canvas.restore(); } } private void startMyThread() { new Thread(new Runnable() { @Override public void run() { while (true){ mProgress++;//进度 if(mProgress == 360){//当360度时候值变为初始状态 mProgress = 0; if(!isNext){//设置是否切换颜色开关 isNext = true; }else { isNext = false; } } postInvalidate(); try { Thread.sleep(mSpeed); }catch (InterruptedException e){ e.printStackTrace(); } } } }).start();; } <strong> </strong>
以上代码就是自定义View的全部代码,使用的话没什么多说的 直接在Xml中引用这个新建的ProgressView就可以了
重画ondraw 不多解释直接看代码
@Override protected void onDraw(Canvas canvas) { int center = getWidth() / 2; // 获取圆心的x坐标 int radius = (center - mCircleWidth)/2 ;// 半径 mPaint.setAntiAlias(true); mPaint.setStrokeWidth(mCircleWidth); mPaint.setStyle(Paint.Style.STROKE); RectF rectf = new RectF(center-radius,center-radius,center+radius,center+radius); if(!isNext){ canvas.save(); mPaint.setColor(mFirstColor);// 设置圆环的颜色 canvas.drawCircle(center,center,radius,mPaint);//划出圆圈 mPaint.setColor(mSecondColor); canvas.drawArc(rectf,-90,mProgress,false,mPaint);//根据进度画圆弧 canvas.restore(); }else { canvas.save(); mPaint.setColor(mSecondColor);// 设置圆环的颜色 canvas.drawCircle(center,center,radius,mPaint); mPaint.setColor(mFirstColor); canvas.drawArc(rectf,-90,mProgress,false,mPaint); canvas.restore(); } }
效果是不是和progress相似呢 ,自己试试看吧
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。