진행 표시 줄에 두 가지 색상의 둥근 사각형을 만드는 방법은 무엇입니까?

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>