如何在進度條中使用兩種顏色製作圓角矩形？

Question

我想做多個圓角矩形進度條progress.like下面的圖片

但是我得到了像下面的進度條圖像的結果。

在這裏，我把我的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

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; 
} 
} 

Answer 2

試試下面的代碼，我在我的項目實施。它像一個魅力。

<?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>