自定義圓形進度條

1.自己創一個類繼承View
public class CircleProgress extends View {
private final static String TAG=“Circleprogress”;
private int mHeight;
private int mWidth;
private int mOrbitWidth;
private int mTextSize;
private boolean mEnableText;
private int mColorProgress;
private int mColorOrbit;
private int mColorText;
private int mMaxProgress;
private int mProgress;
private Paint mPaint;
private int mRadius;
private int max = 100;
public static String getTAG() {
return TAG;
}

public int getmHeight() {
    return mHeight;
}

public void setmHeight(int mHeight) {
    this.mHeight = mHeight;
}

public int getmWidth() {
    return mWidth;
}

public void setmWidth(int mWidth) {
    this.mWidth = mWidth;
}

public int getmOrbitWidth() {
    return mOrbitWidth;
}

public void setmOrbitWidth(int mOrbitWidth) {
    this.mOrbitWidth = mOrbitWidth;
}

public int getmTextSize() {
    return mTextSize;
}

public void setmTextSize(int mTextSize) {
    this.mTextSize = mTextSize;
}

public boolean ismEnableText() {
    return mEnableText;
}

public void setmEnableText(boolean mEnableText) {
    this.mEnableText = mEnableText;
}

public int getmColorProgress() {
    return mColorProgress;
}

public void setmColorProgress(int mColorProgress) {
    this.mColorProgress = mColorProgress;
}

public int getmColorOrbit() {
    return mColorOrbit;
}

public void setmColorOrbit(int mColorOrbit) {
    this.mColorOrbit = mColorOrbit;
}

public int getmColorText() {
    return mColorText;
}

public void setmColorText(int mColorText) {
    this.mColorText = mColorText;
}

public int getmMaxProgress() {
    return mMaxProgress;
}

public void setmMaxProgress(int mMaxProgress) {
    this.mMaxProgress = mMaxProgress;
}

public int getmProgress() {
    return mProgress;
}

public void setmProgress(int mProgress) {
    this.mProgress = mProgress;
}

public Paint getmPaint() {
    return mPaint;
}

public void setmPaint(Paint mPaint) {
    this.mPaint = mPaint;
}

public int getmRadius() {
    return mRadius;
}

public void setmRadius(int mRadius) {
    this.mRadius = mRadius;
}

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

public CircleProgress(Context context,  AttributeSet attrs) {
    this(context, attrs,-1);
}

public CircleProgress(Context context,  AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CircleProgress, defStyleAttr, 0);
    mOrbitWidth = typedArray.getDimensionPixelSize(R.styleable.CircleProgress_orbitWidth,20);
    mTextSize = typedArray.getDimensionPixelSize(R.styleable.CircleProgress_textSize,20);
    mEnableText = typedArray.getBoolean(R.styleable.CircleProgress_enableText, true);
    int colorAccent = ContextCompat.getColor(context, R.color.colorAccent);
     int defaultOrbitColor = ContextCompat.getColor(context,R.color.colorPrimary);
    mColorProgress = typedArray.getColor(R.styleable.CircleProgress_progressColor, colorAccent);
    mColorOrbit = typedArray.getColor(R.styleable.CircleProgress_orbitColor, defaultOrbitColor);
    mColorText = typedArray.getColor(R.styleable.CircleProgress_textColor, colorAccent);
    mMaxProgress = typedArray.getInt(R.styleable.CircleProgress_maxProgress, 100);
    mProgress = typedArray.getInt(R.styleable.CircleProgress_progress, 0);
    typedArray.recycle();

    mPaint = new Paint();

}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    if (mWidth>mHeight){
        mRadius = mHeight/2-mOrbitWidth;
    }else {
        mRadius = mWidth/2-mOrbitWidth;
    }
    int cx = getWidth()/2;
    int cy = getHeight()/2;

    //畫進度條軌道
    mPaint.setColor(mColorOrbit); //設置圓的顏色
    mPaint.setStyle(Paint.Style.STROKE); //設置空心
    mPaint.setStrokeWidth(mOrbitWidth); //設置圓的寬度
    mPaint.setAntiAlias(true);  //消除鋸齒
    canvas.drawCircle(cx, cy, mRadius, mPaint); //畫出圓

    //畫進度(圓弧)
    mPaint.setColor(mColorProgress);  //設置進度的顏色
    RectF oval = new RectF(cx-mRadius,cy-mRadius,cx+mRadius,cy+mRadius);
    canvas.drawArc(oval, -90, 360 * (mProgress*1f / mMaxProgress), false, mPaint);  //根據進度畫圓弧

    //畫圓環內百分比文字
    if (mEnableText) {
        Rect rect = new Rect();
        mPaint.setColor(mColorText);
        mPaint.setTextSize(mTextSize);
        mPaint.setStrokeWidth(0);
        String progressText = getProgressText();
        mPaint.getTextBounds(progressText, 0, progressText.length(), rect);
        Paint.FontMetricsInt fontMetrics = mPaint.getFontMetricsInt();
        int baseline = (mHeight - fontMetrics.bottom + fontMetrics.top) / 2 - fontMetrics.top;
        canvas.drawText(progressText, mHeight / 2 - rect.width() / 2, baseline, mPaint);
    }
}

public void setProgress(int progress){

        mProgress = progress;
    invalidate();
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    mHeight = getMeasuredHeight();
    mWidth = getMeasuredWidth();

}

public String getProgressText() {
    return (int)(100*(mProgress * 1f / mMaxProgress) )+ "%";
}

}
2.新建attrs.xml

















3.使用
<bw.com.d20.CircleProgress
android:id="@+id/pro"
app:orbitColor="#898b8b"
app:textColor="#222"
app:textSize=“13sp”
android:layout_gravity=“center_horizontal”
android:layout_width=“200dp”
android:layout_height=“200dp”
/>
4.Activity
public class MainActivity extends AppCompatActivity {
int progress=0;
private CircleProgress circleProgress;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    circleProgress = findViewById(R.id.pro);

            handler.sendEmptyMessageDelayed(1, 2000);

}
Handler handler = new Handler() {
    @Override
    public void handleMessage(Message msg) {
        if (msg.what == 1) {
            if (progress <= 99) {
                ++progress;
                circleProgress.setProgress(progress);  //更新進度條
                this.sendEmptyMessageDelayed(1,1);
            }else {
                startActivity(new Intent(MainActivity.this,Main2Activity.class));
            }
        }
    }
};

}

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章