Android自定义View实现圆弧进度的效果

下面将详细讲解"Android自定义View实现圆弧进度的效果"的完整攻略。

1.自定义View的基本使用

在介绍如何实现圆弧进度效果之前，先简要介绍下自定义View的基本使用。自定义View有两种实现方式：继承已有的View或ViewGroup，在自定义View中绘制样式或添加其他控件。下面以第一种方式为例：

1.1 文本绘制

下面是一个简单的示例代码，实现了在屏幕中央居中绘制一个文本：

public class CustomTextView extends View {

    Paint paint;//画笔
    String text;//绘制的文本

    public CustomTextView(Context context) {
        this(context,null);
    }

    public CustomTextView(Context context, AttributeSet attrs) {
        this(context, attrs,0);
    }

    public CustomTextView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        paint = new Paint();
        paint.setTextAlign(Paint.Align.CENTER);
        paint.setTextSize(50);
        text = "自定义View";
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawText(text,getWidth()/2,getHeight()/2,paint);
    }
}

这段代码主要实现了CustomTextView类，继承了View类，并覆写了onDraw()方法，使用paint绘制文本，绘制的文本为text。

1.2 View的自定义属性

自定义View还可以使用自己的属性，以使用者更方便的使用和设置。下面以圆弧进度为例，介绍如何使用在View中使用自定义属性：

//在values/attrs.xml文件中定义自定义属性
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="ArcProgress">
        <attr name="arc_width" format="dimension"/>
        <attr name="arc_color" format="color"/>
        <attr name="arc_progress_color" format="color"/>
        <attr name="arc_progress_bg_color" format="color"/>
        <attr name="arc_progress" format="integer"/>
        <attr name="arc_max" format="integer"/>
        <attr name="arc_text_color" format="color"/>
        <attr name="arc_text_size" format="dimension"/>
        <attr name="arc_use_anim" format="boolean"/>
    </declare-styleable>
</resources>

在圆弧进度的Layout中使用自定义属性:

<?xml version="1.0" encoding="utf-8"?>
<layoutapp.com.progress.ArcProgress
    android:id="@+id/arcProgress"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:arc_color="@color/colorPrimary"
    app:arc_max="100"
    app:arc_progress="60"
    app:arc_text_color="@color/colorPrimary"
    app:arc_text_size="20dp"
    app:arc_use_anim="true"/>

在ArcProgress类中获取自定义属性：

public class ArcProgress extends View {

    //画笔，圆的半径等
    //省略其他代码...

    TypedArray mTypedArray;//自定义属性

    //在构造方法中获取自定义属性
    public ArcProgress(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        mTypedArray = context.obtainStyledAttributes(attrs,R.styleable.ArcProgress);

        int arcWidth = mTypedArray.getDimensionPixelSize(R.styleable.ArcProgress_arc_width,
                (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 10, getResources().getDisplayMetrics()));
        mArcPaint.setStrokeWidth(arcWidth);

        mArcColor = mTypedArray.getColor(R.styleable.ArcProgress_arc_color,Color.parseColor("#333333"));
        mArcPaint.setColor(mArcColor);

        //根据自定义属性设置其他属性值...

        mTypedArray.recycle();
    }

    //在这里绘制圆

}

至此，介绍了自定义View的基本使用以及自定义属性的使用，下面进入重头戏——圆弧进度。

2. 圆弧进度的实现

2.1 动态绘制圆弧

下面是继承View实现圆弧的示例代码：

public class CustomView extends View {

    private Paint mPaintArc;

    public CustomView(Context context) {
        this(context, null);
    }

    public CustomView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CustomView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        mPaintArc = new Paint();
        mPaintArc.setAntiAlias(true);
        mPaintArc.setColor(Color.GRAY);
        mPaintArc.setStrokeWidth(10f);
        mPaintArc.setStyle(Paint.Style.STROKE);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        RectF oval = new RectF(100, 100, getWidth() - 100, getHeight() - 100);
        canvas.drawArc(oval, -90, 180, false, mPaintArc);
    }
}

在init()方法中初始化圆弧的画笔，并在onDraw()方法中绘制圆弧。使用RectF类定义圆弧所在矩形区域，在画布上根据矩形和角度绘制圆弧。

2.2 圆弧进度的动画实现

使用ObjectAnimator实现圆弧进度的动画效果，下面是实例代码：

public class CustomView extends View {

    private Paint mPaintArc;
    private RectF mRectf;
    private float mStartAngle;
    private float mCurrentAngle;

    private ValueAnimator mAnimator;

    public CustomView(Context context) {
        this(context, null);
    }

    public CustomView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CustomView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        mPaintArc = new Paint();
        mPaintArc.setAntiAlias(true);
        mPaintArc.setColor(Color.GRAY);
        mPaintArc.setStrokeWidth(10f);
        mPaintArc.setStyle(Paint.Style.STROKE);

        mRectf = new RectF(100, 100, getWidth() - 100, getHeight() - 100);

        mStartAngle = -90;
        mCurrentAngle = mStartAngle;

        mAnimator = ValueAnimator.ofFloat(mStartAngle, 90);
        mAnimator.setDuration(2000);
        mAnimator.setInterpolator(new LinearInterpolator());
        mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                mCurrentAngle = (float) animation.getAnimatedValue();
                invalidate();
            }
        });
    }

    public void start() {
        mAnimator.start();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawArc(mRectf, mStartAngle, mCurrentAngle, false, mPaintArc);
    }
}

在init()方法中初始化圆弧的画笔，并使用RectF类定义圆弧所在矩形区域，以及圆弧的起始角度。使用ValueAnimator创建一个范围在起始角度和终止角度之间的动画，设置动画时长、插值器等，并添加动画的监听，每次更新动画时，根据当前值重新绘制圆弧。

以上代码提供了两个示例，一个用于动态绘制圆弧，另一个用于绘制圆弧进度的动画效果。这些核心技术可以在您的应用程序中用来创建令人印象深刻的视觉效果，并让您的应用程序具有更高的用户体验。