安卓自定义进度条样式

作者: badc59a1a8c4 | 来源:发表于2017-08-09 00:15 被阅读92次

    好,话不多说,先上效果图(gif图的效果不是很清晰,可以下载demo看比较清晰):

    这个是本进度条样式的演示图这个是本进度条样式的演示图

    使用方法很简单:
    1.在xml中放入进度条控件

       <cn.com.cxsz.wocarnetwork.view.MyProgress
                            android:id="@+id/ui_main_mb_progress"
                            android:layout_width="@dimen/d300"
                            android:layout_height="@dimen/d300"
                            android:layout_centerVertical="true"
                            android:layout_gravity="center_horizontal"
                            />
    

    2.初始化进度条
    myprogress.setMaxProgress(2000); myprogress.setLoadingText("查询中"); myprogress.setmTxtHint1("总进度" + myprogress.getMaxProgress()); myprogress.setmTxtHint2("当前进度");
    3.设置进度

    myprogress.setLoopThread(1500);```
    就这样就可以了。
    
    下面是自定义ProgressBar的代码:
    
    

    public class MyProgress extends View {
    private int mMaxProgress = 100;
    private int mProgress = 0;

    int unit = mMaxProgress / 25;
    int time = 0;
    
    //area we're going to draw this view
    private final RectF mRectF;
    private final Paint mPaint;
    
    private String mTxtHint1;
    private String mTxtHint2;
    private String middletext = "";
    private int startProgess = 0;
    
    private Handler handler = new Handler();
    
    public MyProgress(Context context, AttributeSet attrs) {
        super(context, attrs);
        mRectF = new RectF();
        mPaint = new Paint();
    }
    
    
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //TODO 设置进度条高度宽度为控件高度,宽度
        int width = this.getWidth();
        int height = this.getHeight();
        //make sure it's a square.
        int min = Math.min(width, height);
        int widthDif = width - min;
        int heightDif = height - min;
        //设置抗锯齿(画笔样式)
        mPaint.setAntiAlias(true);
        mPaint.setColor(Color.rgb(0xe9, 0xe9, 0xe9));
        canvas.drawColor(Color.TRANSPARENT);
        int mCircleLineStrokeWidth = 8;
        mPaint.setStrokeWidth(mCircleLineStrokeWidth);
        mPaint.setStyle(Paint.Style.STROKE);
    
        //先画一个矩形,规范四维
        mRectF.left = (widthDif > 0 ? (widthDif / 2) : 0) + mCircleLineStrokeWidth / 2; // left x
        mRectF.top = (heightDif > 0 ? (heightDif / 2) : 0) + mCircleLineStrokeWidth / 2; // left y
        mRectF.right = width - mCircleLineStrokeWidth / 2 - (widthDif > 0 ? (widthDif / 2) : 0); // right x
        mRectF.bottom = height - mCircleLineStrokeWidth / 2 - (heightDif > 0 ? (heightDif / 2) : 0); // right y
    
        canvas.drawArc(mRectF, -90, 360, false, mPaint);//画背景
        mPaint.setColor(getResources().getColor(R.color.yongliang));
        canvas.drawArc(mRectF, (((float) startProgess / mMaxProgress) * 360) - 90,
                ((float) mProgress / mMaxProgress) * 360, false, mPaint);//画进度条
    
    
        //画中间的进度数字
        int mTxtStrokeWidth = 2;
        mPaint.setStrokeWidth(mTxtStrokeWidth);
        int textHeight = height / 6;
        mPaint.setTextSize(textHeight);
        mPaint.setColor(getResources().getColor(R.color.white));
        int textWidth = (int) mPaint.measureText(middletext, 0, middletext.length());
        mPaint.setStyle(Paint.Style.FILL);
        canvas.drawText(middletext, width / 2 - textWidth / 2, height / 2 + textHeight / 2, mPaint);
    
        //绘制进度数字上的文字
        if (!TextUtils.isEmpty(mTxtHint1)) {
            mPaint.setStrokeWidth(mTxtStrokeWidth);
            textHeight = height / 10;
            mPaint.setTextSize(textHeight);
            mPaint.setColor(getResources().getColor(R.color.gray));
            textWidth = (int) mPaint.measureText(mTxtHint1, 0, mTxtHint1.length());
            mPaint.setStyle(Paint.Style.FILL);
            canvas.drawText(mTxtHint1, width / 2 - textWidth / 2, height / 4 + textHeight / 2, mPaint);
        }
        //绘制进度数字下的文字
        if (!TextUtils.isEmpty(mTxtHint2)) {
            mPaint.setStrokeWidth(mTxtStrokeWidth);
            textHeight = height / 12;
            mPaint.setTextSize(textHeight);
            mPaint.setColor(getResources().getColor(R.color.gray));
            textWidth = (int) mPaint.measureText(mTxtHint2, 0, mTxtHint2.length());
            mPaint.setStyle(Paint.Style.FILL);
            canvas.drawText(mTxtHint2, width / 2 - textWidth / 2, 3 * height / 4 + textHeight / 2, mPaint);
        }
    }
    
    //获取最大进度数
    public int getMaxProgress() {
        return mMaxProgress;
    }
    
    //设置最大进度数
    public void setMaxProgress(int maxProgress) {
        this.mMaxProgress = maxProgress;
        unit = mMaxProgress / 25;
    }
    
    //设置进度
    public void setProgress(int progress) {
        startProgess = 0;
        middletext = "";
        this.mProgress = progress;
        middletext = mProgress + "";
        this.postInvalidate();
    }
    
    //获取进度值时的一个加载动画
    public void setLoopProgress(int startProgess, int mProgress) {
        this.startProgess = startProgess;
        this.mProgress = mProgress;
        this.postInvalidate();
    }
    
    //设置中间的文字
    public void setLoadingText(String text) {
        this.middletext = text == null ? "" : text;
    }
    
    public int getProgress() {
        return mProgress;
    }
    
    public String getmTxtHint1() {
        return mTxtHint1;
    }
    
    //设置上边文字
    public void setmTxtHint1(String mTxtHint1) {
        this.mTxtHint1 = mTxtHint1;
    }
    
    public String getmTxtHint2() {
        return mTxtHint2;
    }
    
    //设置下边文字
    public void setmTxtHint2(String mTxtHint2) {
        this.mTxtHint2 = mTxtHint2;
    }
    
    //调用加载动画线程
    public void setLoopThread(int pro) {
        handler.post(new LoopRunable(pro));
    }
    
    //动画线程
    public class LoopRunable implements Runnable {
        private int pro;
    
        public LoopRunable(int pro) {
            this.pro = pro;
        }
    
        @Override
        public void run() {
            if (mProgress < mMaxProgress) {
                mProgress = mProgress + unit;
            } else {
                mProgress = 0;
            }
            setLoopProgress(mProgress - 20, mProgress);
            time = time + 20;
            if (time > 2000 && mProgress == 0) {
                setLoopProgress(0, 0);
                time = 0;
                setRunProgess(pro);
            } else {
                handler.postDelayed(this, 20);
            }
        }
    }
    
    private void setRunProgess(int pro) {
        handler.post(new GoalRunnable(pro));
    }
    
    public class GoalRunnable implements Runnable {
        private int unit = 0;
        private int progess;
    
        public GoalRunnable(int progess) {
            this.progess = progess;
        }
    
        @Override
        public void run() {
            if (unit < progess) {
                if (progess > 20) {
                    unit = unit + progess / 20;
                } else {
                    unit++;
                }
                setProgress(unit);
                handler.postDelayed(this, 10);
            }
        }
    }
    

    }

    基本逻辑就是画两个颜色不同的圆弧,一个画满作为背景,一个用参数设置角度,然后用handler线程设置刷新数据。
    
    备注:` //画中间的进度数字
            int mTxtStrokeWidth = 2;
            mPaint.setStrokeWidth(mTxtStrokeWidth);
            int textHeight = height / 6;
            mPaint.setTextSize(textHeight);
            mPaint.setColor(getResources().getColor(R.color.white));
            int textWidth = (int) mPaint.measureText(middletext, 0, middletext.length());
            mPaint.setStyle(Paint.Style.FILL);
            canvas.drawText(middletext, width / 2 - textWidth / 2, height / 2 + textHeight / 2, mPaint);`
            这个是绘制:中间文字的代码,但是发现绘制文字的时候,中文文字明显要比数字和字母大一些,不知道什么原因,各位看官,如果有解决办法可以告知一下。多谢啦
    
    附录demo源代码下载地址:http://download.csdn.net/download/as4399/9774079
    

    相关文章

      网友评论

        本文标题:安卓自定义进度条样式

        本文链接:https://www.haomeiwen.com/subject/gfzxrxtx.html