自定义圆角进度条，不是很难，却有一些需要注意的地方

来源：互联网发布：局域网内文件传输软件编辑：程序博客网时间：2024/05/22 13:01

之所以想试试这个，是因为看到了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>

最后上两张效果图，没有弄得很细。

0 0