自定義圓角進度條，不是很難，卻有一些需要注意的地方

之所以想試試這個，是因爲看到了MIUI商店中的安裝按鈕

就像自己做一個吧，因爲自己也是菜鳥，遇到了一些問題，其中最主要的是，xfermode中，要saveLayer到一個新的透明圖層進行繪製，完了再顯示到Canvas中，不然的話，會吧原來的背景色都會當做DST處理。沒有效果，寫的時候，一度懷疑人生。

還有一個就是，text要居中，DrawText其實不是從左上角0,0開始繪製，是按照Text的基準線來的，baseLine。

其他沒什麼，代碼比較爛。直接貼代碼吧。

View

public class MyRectPrograss extends View {
    RectF Rbounds;
    Paint mPaint, mPrograssPaint, mTextPaint;
    int radiousX, radiousY;
    int prograss;
    int measureHeight, measureWidth;

    public MyRectPrograss(Context context) {
        super(context);
    }

    public MyRectPrograss(Context context,
                          @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
       /* mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setColor(Color.GREEN);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));*/
        mPrograssPaint = new Paint();
        mPrograssPaint.setAntiAlias(true);
        mPrograssPaint.setColor(Color.GREEN);
        mPrograssPaint.setStyle(Paint.Style.FILL);

        mTextPaint = new Paint();
        mTextPaint.setAntiAlias(true);
        mTextPaint.setTextSize(28);
        mTextPaint.setColor(Color.BLACK);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        Rbounds = new RectF(0, 0, w, h);
        measureHeight = getMeasuredHeight();
        measureWidth = getMeasuredWidth();
        Log.e("xxx","w : "+w+" h :"+h+" measureHeight: "+measureHeight+"measureWidth: "+measureWidth);

    }

    int id;

    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        id =canvas.saveLayer(Rbounds,null,Canvas.ALL_SAVE_FLAG);//保存到layer！！！這裏必須這麼做！！不然沒效果，我也不知道爲什麼
        Paint paint=new Paint();
        paint.setStyle(Paint.Style.FILL);   //這裏下面五句相當於畫一個綠色的邊框
        paint.setColor(Color.GREEN);
        canvas.drawRoundRect(Rbounds,20,20,paint);
        paint.setColor(Color.WHITE);
        canvas.drawRoundRect(new RectF(Rbounds.left+1,Rbounds.top+1,Rbounds.right-1,Rbounds.bottom-1),20,20,paint);

        paint.setColor(Color.BLUE);//進度條填充，藍色
//設置mode
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        //畫進度條
        int prograssss= (int) (1.0f*measureWidth/100*this.prograss);

        canvas.drawRect(new Rect(0,0,prograssss,measureHeight),paint);
        //restore
        canvas.restoreToCount(id);
        //這裏文字居中，也需要注意BaseLine！！！！！！
        drawText(canvas);



    }

    private void drawPrograss(Canvas canvas) {
        int prograssDraw = measureWidth / 100 * prograss;
        Rect rect = new Rect(0, 0, prograssDraw, measureHeight);
        canvas.drawRect(rect, mPaint);
    }

    private void drawText(Canvas canvas) {
        String prograssS = prograss + "%";
        Rect bounds = new Rect();
        mTextPaint.getTextBounds(prograssS,0,prograssS.length(),bounds);
        Paint.FontMetrics fontMetrics=mTextPaint.getFontMetrics();
        //繪製文字，不是從左上角的0,0開始的，分文四條基準線。
        int baseline= (int) (measureHeight/2+(fontMetrics.bottom-fontMetrics.top)/2-fontMetrics.bottom);
        Log.e("xxx",baseline+"");
        canvas.drawText(prograssS,(measureWidth-bounds.width())/2,baseline,mTextPaint);
    }
//對外暴露接口
    public void setPrograss(int prograss) {
        this.prograss = prograss;
        invalidate();
    }

}

Activity

public class MainActivity extends AppCompatActivity {
    MyRectPrograss myRectPrograss;
    int prograss;
    Handler handler=new Handler(){
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);

            myRectPrograss.setPrograss(msg.arg1);

        }
    };
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        myRectPrograss= (MyRectPrograss) findViewById(R.id.iiii);

        new Thread(new Runnable() {
            @Override
            public void run() {
                for (int i=1;i<=100;i++){
                    Message message=handler.obtainMessage();
                    message.arg1=i;
                    handler.sendMessage(message);
                    try {
                        Thread.sleep(100);
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                }

            }
        }).start();
    }
}

layout.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="10dp"
    tools:context="com.example.administrator.myrectprograss.MainActivity">

    <com.example.administrator.myrectprograss.MyRectPrograss
        android:id="@+id/iiii"
        android:layout_width="500dp"
        android:layout_height="200dp"
        android:layout_centerInParent="true" />
</RelativeLayout>

最後上兩張效果圖，沒有弄得很細。