技术共享之圆形进度条

来源：互联网发布：手机探鱼器软件好用吗编辑：程序博客网时间：2024/05/29 15:03

圆形进度条需要自定义控件来实现，简单来说，只需要继承View 重写 onMeasure() 和 onLayout() 方法重新绘制即可，其中也用到了自定义属性，效果图如下：

这里写图片描述

第一步： activity_main

<?xml version="1.0" encoding="utf-8"?><LinearLayout    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:gravity="center"   >    <com.liang.boke.CircleRingProgress.RoundProgress        android:layout_width="80dp"        android:layout_height="80dp"        app:maxProgress="100"        app:currentProgress="80"        app:roundColor="@color/colorPrimary"        app:progressColor="@color/colorAccent"        app:textColor="@color/colorPrimary"        app:textSize="20dp"        app:roundLength="10dp"          /></LinearLayout>

其中这些属性是要在 attrs.xml中声明的

        app:maxProgress="100"        app:currentProgress="80"        app:roundColor="@color/colorPrimary"        app:progressColor="@color/colorAccent"        app:textColor="@color/colorPrimary"        app:textSize="20dp"        app:roundLength="10dp"

第二步，在value 节点下新建 attrs.xml

<?xml version="1.0" encoding="utf-8"?><resources>    <declare-styleable name="RoundProgress">        <attr name="roundColor" format="color" />   <!-- 圆环颜色-->        <attr name="progressColor" format="color"/>  <!--进度颜色-->        <attr name="textColor" format="color" />     <!--字体颜色-->        <attr name="textSize" format="dimension" />   <!--字体大小-->        <attr name="roundLength" format="dimension"/>   <!--圆环的大小-->        <attr name="maxProgress" format="integer" />    <!-- 最大进度-->        <attr name="currentProgress" format="integer" />   <!-- 当前进度-->    </declare-styleable></resources>

注意： name=”RoundProgress” 必须是自己新建自定义控件的类，那么接下来就新建一个 RoundProgress 类

package com.liang.boke.CircleRingProgress;import android.content.Context;import android.content.res.TypedArray;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.Rect;import android.graphics.RectF;import android.support.annotation.Nullable;import android.util.AttributeSet;import android.view.View;/** * Created by 梁 on 2017/12/11. */public class RoundProgress extends View {    private int width; //正方形的宽   /* private  int roundLength = UIUtils.dp2px(10); //圆环的宽度    private int roundColor = Color.GRAY ; // 圆环的颜色    private  int progressColor = Color.RED ; // 进度的颜色    private int textColor = Color.BLUE ;   //字体的颜色    private  int textSize = UIUtils.dp2px(20) ; //字体的大小    private  float maxProgress = 100 ; //设置最大进度    private  float currentProgress = 50 ; //模拟当前进度*/    private  Paint paint ; //画笔    private int roundColor;    private int progressColor;    private int textColor;    private float textSize;    private float roundLength;    private int maxProgress;    public int getMaxProgress() {        return maxProgress;    }    public void setMaxProgress(int maxProgress) {        this.maxProgress = maxProgress;    }    public int getCurrentProgress() {        return currentProgress;    }    public void setCurrentProgress(int currentProgress) {        this.currentProgress = currentProgress;    }    private int currentProgress;    public RoundProgress(Context context) {        this(context,null);    }    public RoundProgress(Context context, AttributeSet attrs) {        this(context, attrs,0);    }    public RoundProgress(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        paint = new Paint();        paint.setAntiAlias(true); //去除描边        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.RoundProgress);        roundColor = typedArray.getColor(R.styleable.RoundProgress_roundColor, Color.GRAY);        progressColor = typedArray.getColor(R.styleable.RoundProgress_progressColor, Color.RED);        textColor = typedArray.getColor(R.styleable.RoundProgress_textColor, Color.BLUE);        textSize = typedArray.getDimension(R.styleable.RoundProgress_textSize,40);        roundLength = typedArray.getDimension(R.styleable.RoundProgress_roundLength, 20);        maxProgress = typedArray.getInteger(R.styleable.RoundProgress_maxProgress,100);        currentProgress = typedArray.getInteger(R.styleable.RoundProgress_currentProgress, 50);    }    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        super.onMeasure(widthMeasureSpec, heightMeasureSpec);        // 要绘制的宽        width = this.getMeasuredWidth();    }    @Override    protected void onDraw(Canvas canvas) {        //1.绘制圆环        int roundWidth = width / 2;  //圆环 的圆心 的横坐标        int roundHeight = width / 2 ; //圆环的圆心的纵坐标        int  radius = (int) (width / 2 - roundLength / 2);  //绘制圆的半径  =  矩形的长度 / 2  -  圆环的宽度 / 2 ；        paint.setColor(Color.GRAY);        paint.setStyle(Paint.Style.STROKE);          //设置样式        paint.setStrokeWidth(roundLength);           //填充的宽度        canvas.drawCircle(roundWidth,roundHeight,radius,paint);     //画圆 需要 圆心 ，半径        //2.绘制进度        RectF rectF = new RectF(roundLength / 2, roundLength / 2, width - roundLength / 2, width - roundLength / 2 );  // 外切 矩形 左  上 右 下 的 顺序        paint.setColor(Color.RED);        canvas.drawArc(rectF,0,currentProgress * 360 / maxProgress ,false,paint);   // 绘制 1.rectf 矩形 2.从0 到 多少 进度 3.是否以圆心 为中心点false 4.画笔        //3.绘制文本        String text = currentProgress * 100 /maxProgress + "%";       //文本内容        paint.setTextSize(40);                            //画笔字体大小        paint.setColor(Color.BLUE);                                     //画笔颜色        paint.setStyle(Paint.Style.FILL);                                //画笔样式        Rect rect = new Rect();                         //矩形工具        paint.getTextBounds(text,0,text.length(),rect);      // 1.文本  2.从0开始  3.到文本的长度 4. 矩形工具 rect        int textWidth = rect.width();        int textHeight = rect.height();        int x = width / 2 - textWidth / 2 ;        int y = width / 2 + textHeight / 2 ;        canvas.drawText(text,x,y,paint);             // 左上      右下    }}

源码已上传到http://download.csdn.net/download/baidu_38477614/10153698
如有疑问请留言或者 + Q 1915528523

如需转载请标明出处谢谢。。。

阅读全文

1 0