自定义View2(创建好看的进度条)

最新推荐文章于 2024-06-20 14:37:14 发布

liunianzml

最新推荐文章于 2024-06-20 14:37:14 发布

阅读量206

点赞数

分类专栏： android基础

本文链接：https://blog.csdn.net/liunianzml/article/details/51004247

版权

android基础专栏收录该内容

13 篇文章 0 订阅

订阅专栏

相信看过上一篇View绘制后，接下来看自定义进度条的绘制，将不会有什么难度。

首先我们看一下效果

不知道怎么传动态图，我设置的是没0.1秒进度加一

第一步:创建CircleProgress extens View

public class CircleProgress extends View{
    private int with;
    private  int heigt;
    private Context context;
    private Paint circlepaint;
    private float mCircleXY;
    private float mRadius;

    private Paint arcpaint;
    private RectF mArcRectF;
    private float mSweepAngle;
    private float mSweepValue = 66;
    TypedArray mTypedArray;

    private Paint mTextPaint;
    private String progress;
    private float textsize;

    private int roundColor;
    private int centercolor;


 public CircleProgress(Context context) {

        super(context);
    }

    public CircleProgress(Context context, AttributeSet attrs) {
        super(context, attrs);
        mTypedArray = context.obtainStyledAttributes(attrs,
                R.styleable.CircleProgress);//获取属性
        roundColor=mTypedArray.getColor(R.styleable.CircleProgress_roundColor, Color.RED);
        centercolor=mTypedArray.getColor(R.styleable.CircleProgress_centercolor, Color.RED);

    }

    public CircleProgress(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mTypedArray = context.obtainStyledAttributes(attrs,//获取属性
                R.styleable.CircleProgress);
        roundColor=mTypedArray.getColor(R.styleable.CircleProgress_roundColor, Color.RED);
        centercolor=mTypedArray.getColor(R.styleable.CircleProgress_centercolor, Color.RED);
        mTypedArray.recycle();

    }
    @Override       //测量宽高
    protected void onMeasure(int widthMeasureSpec,
                             int heightMeasureSpec) {
        with = MeasureSpec.getSize(widthMeasureSpec);
        heigt = MeasureSpec.getSize(heightMeasureSpec);
        setMeasuredDimension(with, heigt);

    }

    @Override  //这里是关键
    protected void onDraw(Canvas canvas) {

        super.onDraw(canvas);   float length = 0;
        if (heigt >= with) {
            length = with;
        } else {
            length = heigt;
        }
        mCircleXY = length / 2;
        mRadius = (float) (length * 0.5 / 2);
        circlepaint=new Paint();//创建画笔
        circlepaint.setAntiAlias(true);
        circlepaint.setColor(centercolor);//画笔颜色 centercolor 可以在xml文件中设置

        mArcRectF = new RectF(
                (float) (length * 0.1),
                (float) (length * 0.1),
                (float) (length * 0.9),
                (float) (length * 0.9));
        mSweepAngle = (mSweepValue / 100.f) * 360f;
        arcpaint=new Paint();
        arcpaint.setAntiAlias(true);
        arcpaint.setColor(roundColor);
        arcpaint.setStrokeWidth((float) (length * 0.1));
        arcpaint.setStyle(Paint.Style.STROKE);

        progress = getShowText();
        textsize = getShowTextSize();
        mTextPaint = new Paint();
        mTextPaint.setTextSize(textsize);
        mTextPaint.setTextAlign(Paint.Align.CENTER);

        // 绘制圆
        canvas.drawCircle(mCircleXY, mCircleXY, mRadius, circlepaint);//前两个参数 圆心位置  第三个 半径
        // 绘制弧线
        canvas.drawArc(mArcRectF, 270, mSweepAngle, false, arcpaint);
        canvas.drawText(progress, 0, progress.length(),
                mCircleXY, mCircleXY + (textsize / 4), mTextPaint);
    }

    public float getShowTextSize() {
        this.invalidate();
        return 50;
    }
    public void setShowTextSize(int x) {
        this.invalidate();
        textsize=x;

    }

    public String getShowText() {
        this.invalidate();
        return progress;
    }
    public void setShowText(int x) {
        this.invalidate();
        progress=x+"";

    }
//对外提供的方法来设置当前进度条的长度
    public void setSweepValue(float sweepValue) {
        if (sweepValue != 0) {
            mSweepValue = sweepValue;
        } else {
            mSweepValue = 25;
        }

        this.invalidate();

    }


}

第二步：在attrs.xml中

<declare-styleable name="CircleProgress">
        <attr name="roundColor" format="color"/>
        <attr name="centercolor" format="color"/>



    </declare-styleable>

第三步 circle_progress.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:android_custom="http://schemas.android.com/apk/com.viewtest.CircleProgress"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

<com.viewtest.CircleProgress
android:id="@+id/circle"
android:layout_width="match_parent"
android:layout_height="match_parent"
android_custom:roundColor="@color/colorAccent"
android_custom:centercolor="@color/colorAccent"
    />
    </LinearLayout>

最后就是使用它了

  CircleProgress circle;

 circle = (CircleProgress) findViewById(R.id.circle);

                 circle.setSweepValue(1);
                new ProgressAnimation().execute();

class ProgressAnimation extends AsyncTask<Void, Integer, Void> {
        @Override
        protected Void doInBackground(Void... params) {

            for (int i = 1; i <100; i++) {
                try {
                    publishProgress(i);
                    Thread.sleep(100);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
            }
            return null;
        }

        @Override
        protected void onProgressUpdate(Integer... values) {

            circle.setSweepValue(values[0]);
            circle.setShowText(values[0]);
            System.out.println(values[0] + "-------------------");
            super.onProgressUpdate(values);
        }
    }

源代码我的Github 点击打开链接