Android怎么自定義View實現圓弧進度效果

Android怎么自定義View實現圓弧進度效果

在Android開發中，自定義View是一個非常強大的工具，可以幫助我們實現各種復雜的UI效果。本文將介紹如何使用自定義View來實現一個圓弧進度效果，類似于常見的進度條或加載動畫。

1. 創建自定義View類

首先，我們需要創建一個自定義View類，繼承自View。在這個類中，我們將繪制圓弧并實現進度效果。

public class ArcProgressView extends View {
    private Paint mPaint;
    private RectF mRectF;
    private int mProgress = 0;
    private int mMaxProgress = 100;
    private int mStrokeWidth = 20;
    private int mBackgroundColor = Color.LTGRAY;
    private int mProgressColor = Color.BLUE;

    public ArcProgressView(Context context) {
        super(context);
        init();
    }

    public ArcProgressView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

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

    private void init() {
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(mStrokeWidth);
        mRectF = new RectF();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        // 繪制背景圓弧
        mPaint.setColor(mBackgroundColor);
        canvas.drawArc(mRectF, 0, 360, false, mPaint);

        // 繪制進度圓弧
        mPaint.setColor(mProgressColor);
        float sweepAngle = 360 * mProgress / mMaxProgress;
        canvas.drawArc(mRectF, -90, sweepAngle, false, mPaint);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);

        // 計算圓弧的矩形區域
        int padding = mStrokeWidth / 2;
        mRectF.set(padding, padding, w - padding, h - padding);
    }

    public void setProgress(int progress) {
        if (progress < 0) {
            progress = 0;
        } else if (progress > mMaxProgress) {
            progress = mMaxProgress;
        }
        this.mProgress = progress;
        invalidate();
    }

    public void setMaxProgress(int maxProgress) {
        this.mMaxProgress = maxProgress;
        invalidate();
    }

    public void setStrokeWidth(int strokeWidth) {
        this.mStrokeWidth = strokeWidth;
        mPaint.setStrokeWidth(strokeWidth);
        invalidate();
    }

    public void setBackgroundColor(int backgroundColor) {
        this.mBackgroundColor = backgroundColor;
        invalidate();
    }

    public void setProgressColor(int progressColor) {
        this.mProgressColor = progressColor;
        invalidate();
    }
}

2. 使用自定義View

在布局文件中使用自定義View：

<com.example.ArcProgressView
    android:id="@+id/arcProgressView"
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:layout_centerInParent="true"/>

在Activity中設置進度：

ArcProgressView arcProgressView = findViewById(R.id.arcProgressView);
arcProgressView.setProgress(50); // 設置進度為50%

3. 自定義屬性

為了讓自定義View更加靈活，我們可以通過自定義屬性來設置進度、顏色等參數。首先在res/values/attrs.xml中定義屬性：

<declare-styleable name="ArcProgressView">
    <attr name="progress" format="integer"/>
    <attr name="maxProgress" format="integer"/>
    <attr name="strokeWidth" format="dimension"/>
    <attr name="backgroundColor" format="color"/>
    <attr name="progressColor" format="color"/>
</declare-styleable>

然后在自定義View的構造方法中解析這些屬性：

public ArcProgressView(Context context, AttributeSet attrs) {
    super(context, attrs);
    TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.ArcProgressView);
    mProgress = a.getInt(R.styleable.ArcProgressView_progress, 0);
    mMaxProgress = a.getInt(R.styleable.ArcProgressView_maxProgress, 100);
    mStrokeWidth = a.getDimensionPixelSize(R.styleable.ArcProgressView_strokeWidth, 20);
    mBackgroundColor = a.getColor(R.styleable.ArcProgressView_backgroundColor, Color.LTGRAY);
    mProgressColor = a.getColor(R.styleable.ArcProgressView_progressColor, Color.BLUE);
    a.recycle();
    init();
}

4. 總結

通過自定義View，我們可以輕松實現各種復雜的UI效果。本文介紹了如何使用自定義View來實現一個圓弧進度效果，并通過自定義屬性使其更加靈活。希望這篇文章對你有所幫助！