android - 如何在进度条中制作两种颜色的圆角矩形？

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>