android - 带有圆形边缘的不确定 ProgressBar

Question

我只是想自定义默认的不确定进度条。请问我该怎么做

 <ProgressBar
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:indeterminate="true"
    android:indeterminateTintMode="src_atop"
    android:indeterminateTint="#FFFFFF"/> 

asper： 对此（很容易）：

更新：似乎这个问题不是很直接，所以我在下面添加了 .gifs 来进一步解释，我想要这个（带有锋利的边缘）：简单地变成这个（带有圆形边缘）：

对不起颜色变化，这是最好的谷歌出现

标签： androidprogress-bar

Answer 1

您可以使用https://github.com/korre/android-circular-progress-bar

那里你有一个方法 useRoundedCorners 你需要传递 false 使它不圆默认它在边缘是圆的

您实际上可以从该库中获取一个自定义类（绰绰有余），

public class CircularProgressBar extends View {
private int mViewWidth;
private int mViewHeight;

private final float mStartAngle = -90;      // Always start from top (default is: "3 o'clock on a watch.")
private float mSweepAngle = 0;              // How long to sweep from mStartAngle
private float mMaxSweepAngle = 360;         // Max degrees to sweep = full circle
private int mStrokeWidth = 20;              // Width of outline
private int mAnimationDuration = 400;       // Animation duration for progress change
private int mMaxProgress = 100;             // Max progress to use
private boolean mDrawText = true;           // Set to true if progress text should be drawn
private boolean mRoundedCorners = true;     // Set to true if rounded corners should be applied to outline ends
private int mProgressColor = Color.BLACK;   // Outline color
private int mTextColor = Color.BLACK;       // Progress text color

private final Paint mPaint;                 // Allocate paint outside onDraw to avoid unnecessary object creation

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

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

public CircularProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
}

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

    if (mDrawText) {
        drawText(canvas);
    }
}

private void initMeasurments() {
    mViewWidth = getWidth();
    mViewHeight = getHeight();
}

private void drawOutlineArc(Canvas canvas) {

    final int diameter = Math.min(mViewWidth, mViewHeight) - (mStrokeWidth * 2);

    final RectF outerOval = new RectF(mStrokeWidth, mStrokeWidth, diameter, diameter);

    mPaint.setColor(mProgressColor);
    mPaint.setStrokeWidth(mStrokeWidth);
    mPaint.setAntiAlias(true);
    mPaint.setStrokeCap(mRoundedCorners ? Paint.Cap.ROUND : Paint.Cap.BUTT);
    mPaint.setStyle(Paint.Style.STROKE);
    canvas.drawArc(outerOval, mStartAngle, mSweepAngle, false, mPaint);
}

private void drawText(Canvas canvas) {
    mPaint.setTextSize(Math.min(mViewWidth, mViewHeight) / 5f);
    mPaint.setTextAlign(Paint.Align.CENTER);
    mPaint.setStrokeWidth(0);
    mPaint.setColor(mTextColor);

    // Center text
    int xPos = (canvas.getWidth() / 2);
    int yPos = (int) ((canvas.getHeight() / 2) - ((mPaint.descent() + mPaint.ascent()) / 2)) ;

    canvas.drawText(calcProgressFromSweepAngle(mSweepAngle) + "%", xPos, yPos, mPaint);
}

private float calcSweepAngleFromProgress(int progress) {
    return (mMaxSweepAngle / mMaxProgress) * progress;
}

private int calcProgressFromSweepAngle(float sweepAngle) {
    return (int) ((sweepAngle * mMaxProgress) / mMaxSweepAngle);
}

/**
 * Set progress of the circular progress bar.
 * @param progress progress between 0 and 100.
 */
public void setProgress(int progress) {
    ValueAnimator animator = ValueAnimator.ofFloat(mSweepAngle, calcSweepAngleFromProgress(progress));
    animator.setInterpolator(new DecelerateInterpolator());
    animator.setDuration(mAnimationDuration);
    animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator valueAnimator) {
            mSweepAngle = (float) valueAnimator.getAnimatedValue();
            invalidate();
        }
    });
    animator.start();
}

public void setProgressColor(int color) {
    mProgressColor = color;
    invalidate();
}

public void setProgressWidth(int width) {
    mStrokeWidth = width;
    invalidate();
}

public void setTextColor(int color) {
    mTextColor = color;
    invalidate();
}

public void showProgressText(boolean show) {
    mDrawText = show;
    invalidate();
}

/**
 * Toggle this if you don't want rounded corners on progress bar.
 * Default is true.
 * @param roundedCorners true if you want rounded corners of false otherwise.
 */
public void useRoundedCorners(boolean roundedCorners) {
    mRoundedCorners = roundedCorners;
    invalidate();
}}

然后你可以在你的xml中设置视图，比如

<yourPackageName.CircularProgressBar
    android:id="@+id/circularProgress"
    android:layout_width="180dp"
    android:layout_height="180dp"/>

在你的课堂上你可以这样称呼它，

CircularProgressBar circularProgressBar = (CircularProgressBar)
findViewById(R.id.circularProgress);
circularProgressBar.setProgress(50);
circularProgressBar.setProgressColor(Color.BLUE);