Circle ProgressBar

Question

有没有人有想法如何在对方内创建3个圆圈progressbar？我想要像下面的图像。我尝试了一些，但是当增加形状thickness成为调节！ 有什么建议吗？

<rotate xmlns:android="http://schemas.android.com/apk/res/android" 
android:fromDegrees="270" 
android:toDegrees="270"> 
<shape 
    android:innerRadiusRatio="2.5" 
    android:shape="ring" 
    android:thicknessRatio="11" 
    android:useLevel="true"> 

    <gradient 
     android:angle="0" 
     android:endColor="#007DD6" 
     android:startColor="#007DD6" 
     android:type="sweep" 
     android:useLevel="false" /> 
</shape> 

但是这是我的结果：

正如你所看到的progressbar厚度减小。 另一种是如何设置灰色thickness的progressbar与彩色的一样！

Answer 1

用java绘制一个这样的圆。创建Java类CircleImageView写这段代码

public class CircleImageView extends AppCompatImageView { 

private static final ScaleType SCALE_TYPE = ScaleType.CENTER_CROP; 

private static final Bitmap.Config BITMAP_CONFIG = Bitmap.Config.ARGB_8888; 
private static final int COLORDRAWABLE_DIMENSION = 2; 

private static final int DEFAULT_BORDER_WIDTH = 0; 
private static final int DEFAULT_BORDER_COLOR = Color.BLACK; 
private static final int DEFAULT_FILL_COLOR = Color.TRANSPARENT; 
private static final boolean DEFAULT_BORDER_OVERLAY = false; 

private final RectF mDrawableRect = new RectF(); 
private final RectF mBorderRect = new RectF(); 

private final Matrix mShaderMatrix = new Matrix(); 
private final Paint mBitmapPaint = new Paint(); 
private final Paint mBorderPaint = new Paint(); 
private final Paint mFillPaint = new Paint(); 

private int mBorderColor = DEFAULT_BORDER_COLOR; 
private int mBorderWidth = DEFAULT_BORDER_WIDTH; 
private int mFillColor = DEFAULT_FILL_COLOR; 

private Bitmap mBitmap; 
private BitmapShader mBitmapShader; 
private int mBitmapWidth; 
private int mBitmapHeight; 

private float mDrawableRadius; 
private float mBorderRadius; 

private ColorFilter mColorFilter; 

private boolean mReady; 
private boolean mSetupPending; 
private boolean mBorderOverlay; 

public CircleImageView(Context context) { 
    super(context); 

    init(); 
} 

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

public CircleImageView(Context context, AttributeSet attrs, int defStyle) { 
    super(context, attrs, defStyle); 

    TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CircleImageView, defStyle, 0); 

    mBorderWidth = a.getDimensionPixelSize(R.styleable.CircleImageView_civ_border_width, DEFAULT_BORDER_WIDTH); 
    mBorderColor = a.getColor(R.styleable.CircleImageView_civ_border_color, DEFAULT_BORDER_COLOR); 
    mBorderOverlay = a.getBoolean(R.styleable.CircleImageView_civ_border_overlay, DEFAULT_BORDER_OVERLAY); 
    mFillColor = a.getColor(R.styleable.CircleImageView_civ_fill_color, DEFAULT_FILL_COLOR); 

    a.recycle(); 

    init(); 
} 

private void init() { 
    super.setScaleType(SCALE_TYPE); 
    mReady = true; 

    if (mSetupPending) { 
     setup(); 
     mSetupPending = false; 
    } 
} 

@Override 
public ScaleType getScaleType() { 
    return SCALE_TYPE; 
} 

@Override 
public void setScaleType(ScaleType scaleType) { 
    if (scaleType != SCALE_TYPE) { 
     throw new IllegalArgumentException(String.format("ScaleType %s not supported.", scaleType)); 
    } 
} 

@Override 
public void setAdjustViewBounds(boolean adjustViewBounds) { 
    if (adjustViewBounds) { 
     throw new IllegalArgumentException("adjustViewBounds not supported."); 
    } 
} 

@Override 
protected void onDraw(Canvas canvas) { 
    if (mBitmap == null) { 
     return; 
    } 

    if (mFillColor != Color.TRANSPARENT) { 
     canvas.drawCircle(getWidth()/2.0f, getHeight()/2.0f, mDrawableRadius, mFillPaint); 
    } 
    canvas.drawCircle(getWidth()/2.0f, getHeight()/2.0f, mDrawableRadius, mBitmapPaint); 
    if (mBorderWidth != 0) { 
     canvas.drawCircle(getWidth()/2.0f, getHeight()/2.0f, mBorderRadius, mBorderPaint); 
    } 
} 

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

public int getBorderColor() { 
    return mBorderColor; 
} 

public void setBorderColor(@ColorInt int borderColor) { 
    if (borderColor == mBorderColor) { 
     return; 
    } 

    mBorderColor = borderColor; 
    mBorderPaint.setColor(mBorderColor); 
    invalidate(); 
} 

public void setBorderColorResource(@ColorRes int borderColorRes) { 
    setBorderColor(getContext().getResources().getColor(borderColorRes)); 
} 

public int getFillColor() { 
    return mFillColor; 
} 

public void setFillColor(@ColorInt int fillColor) { 
    if (fillColor == mFillColor) { 
     return; 
    } 

    mFillColor = fillColor; 
    mFillPaint.setColor(fillColor); 
    invalidate(); 
} 

public void setFillColorResource(@ColorRes int fillColorRes) { 
    setFillColor(getContext().getResources().getColor(fillColorRes)); 
} 

public int getBorderWidth() { 
    return mBorderWidth; 
} 

public void setBorderWidth(int borderWidth) { 
    if (borderWidth == mBorderWidth) { 
     return; 
    } 

    mBorderWidth = borderWidth; 
    setup(); 
} 

public boolean isBorderOverlay() { 
    return mBorderOverlay; 
} 

public void setBorderOverlay(boolean borderOverlay) { 
    if (borderOverlay == mBorderOverlay) { 
     return; 
    } 

    mBorderOverlay = borderOverlay; 
    setup(); 
} 

@Override 
public void setImageBitmap(Bitmap bm) { 
    super.setImageBitmap(bm); 
    mBitmap = bm; 
    setup(); 
} 

@Override 
public void setImageDrawable(Drawable drawable) { 
    super.setImageDrawable(drawable); 
    mBitmap = getBitmapFromDrawable(drawable); 
    setup(); 
} 

@Override 
public void setImageResource(@DrawableRes int resId) { 
    super.setImageResource(resId); 
    mBitmap = getBitmapFromDrawable(getDrawable()); 
    setup(); 
} 

@Override 
public void setImageURI(Uri uri) { 
    super.setImageURI(uri); 
    mBitmap = uri != null ? getBitmapFromDrawable(getDrawable()) : null; 
    setup(); 
} 

@Override 
public void setColorFilter(ColorFilter cf) { 
    if (cf == mColorFilter) { 
     return; 
    } 

    mColorFilter = cf; 
    mBitmapPaint.setColorFilter(mColorFilter); 
    invalidate(); 
} 

private Bitmap getBitmapFromDrawable(Drawable drawable) { 
    if (drawable == null) { 
     return null; 
    } 

    if (drawable instanceof BitmapDrawable) { 
     return ((BitmapDrawable) drawable).getBitmap(); 
    } 

    try { 
     Bitmap bitmap; 

     if (drawable instanceof ColorDrawable) { 
      bitmap = Bitmap.createBitmap(COLORDRAWABLE_DIMENSION, COLORDRAWABLE_DIMENSION, BITMAP_CONFIG); 
     } else { 
      bitmap = Bitmap.createBitmap(drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight(), BITMAP_CONFIG); 
     } 

     Canvas canvas = new Canvas(bitmap); 
     drawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight()); 
     drawable.draw(canvas); 
     return bitmap; 
    } catch (Exception e) { 
     e.printStackTrace(); 
     return null; 
    } 
} 

private void setup() { 
    if (!mReady) { 
     mSetupPending = true; 
     return; 
    } 

    if (getWidth() == 0 && getHeight() == 0) { 
     return; 
    } 

    if (mBitmap == null) { 
     invalidate(); 
     return; 
    } 

    mBitmapShader = new BitmapShader(mBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP); 

    mBitmapPaint.setAntiAlias(true); 
    mBitmapPaint.setShader(mBitmapShader); 

    mBorderPaint.setStyle(Paint.Style.STROKE); 
    mBorderPaint.setAntiAlias(true); 
    mBorderPaint.setColor(mBorderColor); 
    mBorderPaint.setStrokeWidth(mBorderWidth); 

    mFillPaint.setStyle(Paint.Style.FILL); 
    mFillPaint.setAntiAlias(true); 
    mFillPaint.setColor(mFillColor); 

    mBitmapHeight = mBitmap.getHeight(); 
    mBitmapWidth = mBitmap.getWidth(); 

    mBorderRect.set(0, 0, getWidth(), getHeight()); 
    mBorderRadius = Math.min((mBorderRect.height() - mBorderWidth)/2.0f, (mBorderRect.width() - mBorderWidth)/2.0f); 

    mDrawableRect.set(mBorderRect); 
    if (!mBorderOverlay) { 
     mDrawableRect.inset(mBorderWidth, mBorderWidth); 
    } 
    mDrawableRadius = Math.min(mDrawableRect.height()/2.0f, mDrawableRect.width()/2.0f); 

    updateShaderMatrix(); 
    invalidate(); 
} 

private void updateShaderMatrix() { 
    float scale; 
    float dx = 0; 
    float dy = 0; 

    mShaderMatrix.set(null); 

    if (mBitmapWidth * mDrawableRect.height() > mDrawableRect.width() * mBitmapHeight) { 
     scale = mDrawableRect.height()/(float) mBitmapHeight; 
     dx = (mDrawableRect.width() - mBitmapWidth * scale) * 0.5f; 
    } else { 
     scale = mDrawableRect.width()/(float) mBitmapWidth; 
     dy = (mDrawableRect.height() - mBitmapHeight * scale) * 0.5f; 
    } 

    mShaderMatrix.setScale(scale, scale); 
    mShaderMatrix.postTranslate((int) (dx + 0.5f) + mDrawableRect.left, (int) (dy + 0.5f) + mDrawableRect.top); 

    mBitmapShader.setLocalMatrix(mShaderMatrix); 
} 

} 

，并使用这个在您的XML像

<com.yourpackagename.CircleImageView 
       android:id="@+id/profileImg" 
       android:layout_width="100dp" 
       android:layout_height="100dp" 
       android:layout_gravity="center|top" 
       android:src="@drawable/profile" /> 

要不然去通过这个环节，这是你在找什么circular progress bar