如何在进度条中使用两种颜色制作圆角矩形？

Question

我想要使用圆角矩形进度执行多个颜色进度条。如图像下面

但是我得到的结果如下面的进度条图像。  

这里我要放入customDrawable的代码

public class FractionDrawable extends Drawable {


private Paint mPaint;
private int mTotalPercent;
private int mProgress1Percent;
private int mProgress1Color;
private int mProgress2Percent;
private int mProgress2Color;
private Context context;


public FractionDrawable(Context context,int totalPercent, int progress1Percent, int progress1Color, int progress2Percent, int progress2Color) {
    mPaint = new Paint();
    this.mTotalPercent = totalPercent;
    this.mProgress1Percent = progress1Percent;
    this.mProgress1Color = progress1Color;
    this.mProgress2Percent = progress2Percent;
    this.mProgress2Color = progress2Color;
    this.context =context;
}

@Override
public void draw(Canvas canvas) {

    Rect b = getBounds();
    float totalProgWidth = b.width() * (mTotalPercent/100f);
    float frac1Width = totalProgWidth *  (mProgress1Percent/100f);
    RectF rect = new RectF(0, 0, totalProgWidth, b.height());
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setStrokeWidth(5);
    mPaint.setColor(Color.BLACK);
    canvas.drawRoundRect(rect, 18, 18, mPaint);
    mPaint.setStyle(Paint.Style.FILL);
    mPaint.setColor(mProgress1Color);
    mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
    canvas.drawRect(0, 0, frac1Width, b.height(), mPaint);
    mPaint.setColor(mProgress2Color);
    mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
    canvas.drawRect(frac1Width, 0, totalProgWidth, b.height(), mPaint);

    }


 @Override
 public void setAlpha(int alpha) {
 }

 @Override
 public void setColorFilter(ColorFilter cf) {
 }

 @Override
 public int getOpacity() {
    return PixelFormat.TRANSLUCENT;
 }
 }

Answer 1

尝试以下代码，我在我的项目中实现。它就像一个魅力。

<?xml version="1.0" encoding="utf-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <shape>
      <gradient
          android:startColor="#6dc518"
          android:endColor="#10ffffff"
          android:angle="180" />
      <stroke
          android:width="1dp"
          android:color="#212122" />
      <corners
          android:radius="6dp" />
      <padding
          android:left="10dp"
          android:top="10dp"
          android:right="10dp"
          android:bottom="10dp" />
    </shape>
  </item>
</selector>

Answer 2

public class FractionDrawable extends Drawable {
private Paint mPaint;
private int mTotalPercent;
private int mProgress1Percent;
private int mProgress1Color;
private int mProgress2Percent;
private int mProgress2Color;
private Context context;
private Bitmap mSrcBCurve, mSrcDisplayRect;
private float radiusX = 15, radiusY = 15;

public FractionDrawable(Context context, int totalPercent, int progress1Percent, int progress1Color, int progress2Percent, int progress2Color) {
    mPaint = new Paint();
    this.mTotalPercent = totalPercent;
    this.mProgress1Percent = progress1Percent;
    this.mProgress1Color = progress1Color;
    this.mProgress2Percent = progress2Percent;
    this.mProgress2Color = progress2Color;
    this.context = context;

}

@Override
public void draw(Canvas canvas) {
    canvas.drawColor(Color.TRANSPARENT);
    Rect b = getBounds();

    // determine the total progress width
    float totalProgWidth = b.width() * (mTotalPercent / 100f);

    // determine first progress width
    float frac1Width = totalProgWidth * (mProgress1Percent / 100f);

    mSrcBCurve = makeSrcRoundRectangle(0, 0, (int) totalProgWidth, b.height(), 
   (int) totalProgWidth, b.height(), radiusX, radiusY, mProgress1Color);
    mSrcDisplayRect = makeSrcDisplayRectangle(context, 0, 0, (int) frac1Width,  
    b.height(), (int) frac1Width, b.height(), (int) totalProgWidth, mProgress1Color,  
    mProgress2Color, radiusX, radiusY);
    int count = canvas.saveLayer(0, 0, (int) totalProgWidth, b.height(), null,
            Canvas.MATRIX_SAVE_FLAG |
                    Canvas.CLIP_SAVE_FLAG |
                    Canvas.HAS_ALPHA_LAYER_SAVE_FLAG |
                    Canvas.FULL_COLOR_LAYER_SAVE_FLAG |
                    Canvas.CLIP_TO_LAYER_SAVE_FLAG
    );
    mPaint.setStyle(Paint.Style.FILL);
    mPaint.setFilterBitmap(false);
    canvas.drawBitmap(mSrcBCurve, 0, 0, mPaint);
    mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
    canvas.drawBitmap(mSrcDisplayRect, 0, 0, mPaint);
    mPaint.setXfermode(null);
    canvas.restoreToCount(count);
}

@Override
public void setAlpha(int alpha) {
}

@Override
public void setColorFilter(ColorFilter cf) {
}

@Override
public int getOpacity() {
    return PixelFormat.TRANSLUCENT;
}


private static Bitmap makeSrcDisplayRectangle(Context context, int left, int top, int right, int bottom, int width, int height, int secondWidth, int firstColor, int SecondColor, float radiusX, float radiusY) {
    Bitmap bm = Bitmap.createBitmap(secondWidth, height, Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(bm);
    Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    mPaint.setColor(firstColor);
    canvas.drawRect(left, top, right, bottom, mPaint);
    mPaint.setColor(SecondColor);
    canvas.drawRect(right, top, secondWidth, bottom, mPaint);
    mPaint.setColor(Color.argb(40, 0, 0, 0));
    canvas.drawRect(0, bottom - context.getResources().getInteger(R.integer.partiton3ddimen), secondWidth, bottom, mPaint);
    mPaint.setStrokeWidth(5);
    mPaint.setStyle(Paint.Style.STROKE);
    RectF rect = new RectF(left, top, secondWidth, bottom);
    canvas.drawRoundRect(rect, radiusX, radiusY, mPaint);
    return bm;
}


private static Bitmap makeSrcRoundRectangle(float left, float top, float right, float 
     bottom, int width, int height, float radiusX, float radiusY, int color) {
    Bitmap bm = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(bm);
    Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    mPaint.setStrokeWidth(5);
    mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
    mPaint.setColor(color);
    RectF rect = new RectF(left, top, right, bottom);
    canvas.drawRoundRect(rect, radiusX, radiusY, mPaint);
    return bm;
}
}