android自定义一个带进度条的button

android自定义一个带进度条的button

android自带的progressbar有时候显得不够灵活，不能满足项目的需求，所以研究了下带进度条的button如何来实现。
其实实现这个功能可以有两个方法，一个是通过布局，一个是通过写一个类来继承view自己通过画布来绘制。
第一个和第二个是通过画布来实现的，第三个是通过布局实现的。
先来说说第一种
其实就是两个矩形，一个是背景的矩形，一个是前面的进度条，也是一个矩形，再就是中间的文字。
核心代码：

   @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        //开始画背景图片        RectF oval = new RectF(0, 0, getWidth(), getHeight());        mPaint.setColor(mBackgroundColor);        canvas.drawRoundRect(oval, mCorner, mCorner, mPaint);        //开始画里面的进度条   坐标是  左上角  右下角        mPaint.setColor(mForcegroundColor);        if (mProgress < mCorner) {            oval = new RectF(0, mCorner - mProgress, (getWidth() * mProgress) / mMax, getHeight());            canvas.drawRoundRect(oval, mProgress, mProgress, mPaint);        } else {            oval = new RectF(0, 0, (getWidth() * mProgress) / mMax, getHeight());            canvas.drawRoundRect(oval, mCorner, mCorner, mPaint);        }        //开始画图片中间的文字        if (mText == null) {            return;        }        mPaint.setColor(mTextColor);        mPaint.setTextSize(mTextSize);        if (mProgress == 100) {            mText = "完成";        }        float[] widths = new float[mText.length() - 1];        mPaint.getTextWidths(mText, 0, mText.length() - 1, widths);        float textWidth = 0;        for (int i=0;i<widths.length;i++){            textWidth+=widths[i];        }        float textHeightinVer = getHeight()/2-mPaint.descent()+(mPaint.descent()-mPaint.ascent())/2;        canvas.drawText(mText, getWidth()/2-textWidth/widths.length,textHeightinVer,mPaint);    }    /**    *设置进度条的值    */     public void setProgress(int progress) {        if (progress > mMax) {            mProgress = mMax;        }        this.mProgress = progress;        //强制刷新界面，绘制新的进度，此时会调用onDraw方法        postInvalidate();    }

中间的圆的进度条实现方式也一样，
核心代码：

 @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        mWidth = getWidth();        mHeight = getHeight();        mRadius = mWidth > mHeight ? mHeight / 2 : mWidth / 2;        float minRadius = mRadius * 3 / 4;        //画同心圆        //画一个外圆        mPaint.setColor(mBackgroundColor);        canvas.drawCircle(mWidth / 2, mHeight / 2, mRadius, mPaint);        //画进度条   从内圆的边缘到外圆的边缘        mPaint.setColor(mForcegroundColor);        // double degree = mProgress * mPerProgressDegree*Math.PI/Math.toDegrees(180);        float degree = mProgress * mPerProgressDegree;        // Log.i("ProgressRoundBar",mWidth / 2+"-->"+degree+"---->>"+minRadius+"--->>"+mRadius+"-->>"+minRadius * Math.cos(degree)+"-->"+fromX+"--"+fromY+":::"+toX+"--"+toY);        RectF oval = new RectF(0, 0, mRadius * 2, mRadius * 2);        canvas.drawArc(oval, 0, mProgress * 3.6f, true, mPaint);        //画一个内圆        mPaint.setColor(Color.argb(255, 255, 255, 255));        canvas.drawCircle(mWidth / 2, mHeight / 2, minRadius, mPaint);        //在yuan内圆的中间写上进度        mPaint.setColor(mForcegroundColor);        String progressText = null;        if (mProgress < 100) {            progressText = mProgress + "%";        } else {            progressText = "完成";        }        mPaint.setTextSize(mTextSize);        float[] widths = new float[progressText.length() - 1];        mPaint.getTextWidths(progressText, 0, progressText.length() - 1, widths);        float textWidth = 0;        for (int i=0;i<widths.length;i++){            textWidth+=widths[i];        }        float textHeightinVer = mHeight/2-mPaint.descent()+(mPaint.descent()-mPaint.ascent())/2;        canvas.drawText(progressText,mRadius-textWidth/widths.length,textHeightinVer,mPaint);    }   

要注意的是，画圆的顺序不能乱了，必须是最低下的先画，再是画上面的进度条，这是一个扇形，再画里面的内圆，最后画中间的文字。

最后一个是通过布局来实现的，一个相对布局，里面放的是一个button和一个进度条，重叠在一起，通过更新progressbar的进度来实现，这个可以保留button的特点。实现也挺简单的。
核心代码：
布局文件

 <RelativeLayout        android:layout_width="match_parent"        android:layout_height="50dp"        android:layout_marginTop="16dp">        <ProgressBar            android:id="@+id/pb_movie_progress_id"            style="?android:attr/progressBarStyleHorizontal"            android:layout_width="match_parent"            android:layout_height="match_parent"            android:layout_centerHorizontal="true"            android:max="100"            android:progress="0"            android:background="#999191"            android:progressDrawable="@drawable/progress_selector"            android:secondaryProgress="0"            />       <Button           android:id="@+id/bt_registe"            android:layout_width="match_parent"            android:layout_height="match_parent"           android:textColor="@color/base_white"            android:text="注册"           android:background="@drawable/btn_selector"            android:textSize="@dimen/text_commen_size" />    </RelativeLayout>

里面的进度条的图可以自己定义

<?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android" >    <item android:id="@android:id/progress">        <clip            android:clipOrientation="horizontal"            android:drawable="@drawable/progress_drawable"            android:gravity="left" />    </item></layer-list>

搞定！