Android自定义控件

android自定义View控件——圆形进度条

2017-08-11  本文已影响69人  52Alice

项目中用到这种自定义的进度条,把代码提取出来,方便以后查找继续使用,哈哈。
效果图:


底部文字需要绘制圆角背景,需要用到drawRoundRect(),该方法用于在画布上绘制圆角矩形,通过指定RectF对象以及圆角半径来实现。该方法是绘制圆角矩形的主要方法,同时也可以通过设置画笔的空心效果来绘制空心的圆角矩形。
【基本语法】public void drawRoundRect (RectF rect, float rx, float ry, Paint paint)
参数说明
rect:RectF对象。
rx:x方向上的圆角半径。
ry:y方向上的圆角半径。
paint:绘制时所使用的画笔。

自定义view的类CircleProgressView:

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        float centerX = getWidth() / 2;
        float centerY = getHeight() / 2;
        radius = centerX-stokeWidth/2;
        canvas.drawCircle(centerX, centerY, radius, mCirPaint);
        //画圆
        RectF rectF=new RectF(centerX - radius, centerY - radius, centerX + radius, centerY + radius);
        canvas.drawArc(rectF, -90, progress * 360 / 100, false, mArcPaint);
        //设置中心文本
        if (null != centerText) {
            canvas.drawText(centerText, centerX - (mTextCenterPaint.measureText(centerText)) / 2, centerY + mTextCenterSize / 2, mTextCenterPaint);
        }
        //上方文字
        if (null != topText) {
            canvas.drawText(topText, centerX - (mTextTopPaint.measureText(topText)) / 2, centerY - mTextCenterSize, mTextTopPaint);
        }
        //最上方小文字
        if(null !=topFloorText){
            canvas.drawText(topFloorText,getWidth()-mTextCenterPaint.measureText(topFloorText),centerY-mTextCenterSize-mTextTopSize, mTextTopFloorPaint);
        }
        if (null != bottomText) {
            //下方圆角矩形
            Paint paint = new Paint(Paint.FILTER_BITMAP_FLAG);
            paint.setAntiAlias(true);
            paint.setStyle(Paint.Style.STROKE);
            paint.setColor(bottomTextColor);
            RectF rec = new RectF(centerX - (mTextBottomPaint.measureText(bottomText)) / 2-DensityUtil.dip2px(mContext,6),
                    getHeight()-centerY/2-mTextBottomSize,
                    centerX +(mTextBottomPaint.measureText(bottomText)) / 2+DensityUtil.dip2px(mContext,6),
                    getHeight()-(centerY)/2+mTextBottomSize/2);
            canvas.drawRoundRect(rec,10, 10, paint);    //第二个参数是x半径,第三个参数是y半径
            //下方文字
            canvas.drawText(bottomText,centerX - (mTextBottomPaint.measureText(bottomText)) / 2, getHeight()-(centerY)/2, mTextBottomPaint);
        }
    }

布局文件代码:

    <com.mylibrary.CircleProgressView
        android:layout_width="160dp"
        android:layout_height="160dp"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:id="@+id/progress_view"
        app:unReachColor="@color/unReachColor"
        app:reachColor="@color/blue"
        app:topFloorTextColor="@color/colorAccent"
        app:bottomTextColor="@color/blue"
        app:centerTextColor="@color/blue"
        app:stokeWith="20"
        app:topFloorTextSize="10"
        app:topTextSize="14"
        app:centerTextSize="30"
        app:bottomTextSize="14"
        />

activity中设置progress相关属性

     circleProgressView= (CircleProgressView) findViewById(R.id.progress_view);
        circleProgressView.setTopFloorText("小文字");
        circleProgressView.setTopText("上方文字");
        circleProgressView.setCenterText("中间文字");
        circleProgressView.setBottomText("下方文字");
        circleProgressView.setProgress(80);
        circleProgressView.setSpeed(40);

以后会继续添加。源码地址:https://github.com/yinsujun/CircularProgress

上一篇下一篇

猜你喜欢

热点阅读