首页 > 学院 > 开发设计 > 正文

圆形进度条

2019-11-09 18:45:53
字体:
来源:转载
供稿:网友

1、新建circlePRogressaBar的类

import android.animation.ValueAnimator;import android.content.Context;import android.content.res.TypedArray;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Matrix;import android.graphics.Paint;import android.graphics.PaintFlagsDrawFilter;import android.graphics.RectF;import android.graphics.SweepGradient;import android.util.AttributeSet;import android.util.DisplayMetrics;import android.view.View;import android.view.WindowManager;public class ColorArcProgressBar extends View{    private int diameter = 500;  //直径    private float centerX;  //圆心X坐标    private float centerY;  //圆心Y坐标    private Paint allArcPaint;    private Paint progressPaint;    private Paint vTextPaint;    private Paint hintPaint;    private Paint degreePaint;    private Paint curSpeedPaint;    private RectF bgRect;    private ValueAnimator progressAnimator;    private PaintFlagsDrawFilter mDrawFilter;    private SweepGradient sweepGradient;    private Matrix rotateMatrix;    private float startAngle = 135;    private float sweepAngle = 270;    private float currentAngle = 0;    private float lastAngle;    private int[] colors = new int[]{Color.GREEN, Color.YELLOW, Color.RED, Color.RED};    private float maxValues = 60;    private float curValues = 0;    private float bgArcWidth = dipToPx(2);    private float progressWidth = dipToPx(10);    private float textSize = dipToPx(60);    private float hintSize = dipToPx(15);    private float curSpeedSize = dipToPx(13);    private int aniSpeed = 1000;    private float longdegree = dipToPx(13);    private float shortdegree = dipToPx(5);    private final int DEGREE_PROGRESS_DISTANCE = dipToPx(8);    private String hintColor = "#676767";    private String longDegreeColor = "#ff0000";    private String shortDegreeColor = "#ffff00";    private String bgArcColor = "#00ff00";    private String titleString;    private String hintString;    private boolean isShowCurrentSpeed = true;    private boolean isNeedTitle;    private boolean isNeedUnit;    private boolean isNeedDial;    private boolean isNeedContent;    private float k;    public ColorArcProgressBar(Context context) {        super(context, null);        initView();    }    public ColorArcProgressBar(Context context, AttributeSet attrs) {        super(context, attrs, 0);        initCofig(context, attrs);        initView();    }    public ColorArcProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        initCofig(context, attrs);        initView();    }    /**     * 初始化布局配置     * @param context     * @param attrs     */    private void initCofig(Context context, AttributeSet attrs) {        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.ColorArcProgressBar);        int color1 = a.getColor(R.styleable.ColorArcProgressBar_front_color1, Color.GREEN);        int color2 = a.getColor(R.styleable.ColorArcProgressBar_front_color2, color1);        int color3 = a.getColor(R.styleable.ColorArcProgressBar_front_color3, color1);        colors = new int[]{color1, color2, color3, color3};        sweepAngle = a.getInteger(R.styleable.ColorArcProgressBar_total_engle, 270);        bgArcWidth = a.getDimension(R.styleable.ColorArcProgressBar_back_width, dipToPx(2));        progressWidth = a.getDimension(R.styleable.ColorArcProgressBar_front_width, dipToPx(10));        isNeedTitle = a.getBoolean(R.styleable.ColorArcProgressBar_is_need_title, false);        isNeedContent = a.getBoolean(R.styleable.ColorArcProgressBar_is_need_content, false);        isNeedUnit = a.getBoolean(R.styleable.ColorArcProgressBar_is_need_unit, false);        isNeedDial = a.getBoolean(R.styleable.ColorArcProgressBar_is_need_dial, false);        hintString = a.getString(R.styleable.ColorArcProgressBar_string_unit);        titleString = a.getString(R.styleable.ColorArcProgressBar_string_title);        curValues = a.getFloat(R.styleable.ColorArcProgressBar_current_value, 0);        maxValues = a.getFloat(R.styleable.ColorArcProgressBar_max_value, 60);        setCurrentValues(curValues);        setMaxValues(maxValues);        a.recycle();    }    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        int width = (int) (2 * longdegree + progressWidth + diameter + 2 * DEGREE_PROGRESS_DISTANCE);        int height= (int) (2 * longdegree + progressWidth + diameter + 2 * DEGREE_PROGRESS_DISTANCE);        setMeasuredDimension(width, height);    }    private void initView() {        diameter = 3 * getScreenWidth() / 5;        //弧形的矩阵区域        bgRect = new RectF();        bgRect.top = longdegree + progressWidth/2 + DEGREE_PROGRESS_DISTANCE;        bgRect.left = longdegree + progressWidth/2 + DEGREE_PROGRESS_DISTANCE;        bgRect.right = diameter + (longdegree + progressWidth/2 + DEGREE_PROGRESS_DISTANCE);        bgRect.bottom = diameter + (longdegree + progressWidth/2 + DEGREE_PROGRESS_DISTANCE);        //圆心        centerX = (2 * longdegree + progressWidth + diameter + 2 * DEGREE_PROGRESS_DISTANCE)/2;        centerY = (2 * longdegree + progressWidth + diameter + 2 * DEGREE_PROGRESS_DISTANCE)/2;        //外部刻度线        degreePaint = new Paint();        degreePaint.setColor(Color.parseColor(longDegreeColor));        //整个弧形        allArcPaint = new Paint();        allArcPaint.setAntiAlias(true);        allArcPaint.setStyle(Paint.Style.STROKE);        allArcPaint.setStrokeWidth(bgArcWidth);        allArcPaint.setColor(Color.parseColor(bgArcColor));        allArcPaint.setStrokeCap(Paint.Cap.ROUND);        //当前进度的弧形        progressPaint = new Paint();        progressPaint.setAntiAlias(true);        progressPaint.setStyle(Paint.Style.STROKE);        progressPaint.setStrokeCap(Paint.Cap.ROUND);        progressPaint.setStrokeWidth(progressWidth);        progressPaint.setColor(Color.GREEN);        //内容显示文字        vTextPaint = new Paint();        vTextPaint.setTextSize(textSize);        vTextPaint.setColor(Color.BLUE);        vTextPaint.setTextAlign(Paint.Align.CENTER);        //显示单位文字        hintPaint = new Paint();        hintPaint.setTextSize(hintSize);        hintPaint.setColor(Color.parseColor(hintColor));        hintPaint.setTextAlign(Paint.Align.CENTER);        //显示标题文字        curSpeedPaint = new Paint();        curSpeedPaint.setTextSize(curSpeedSize);        curSpeedPaint.setColor(Color.parseColor(hintColor));        curSpeedPaint.setTextAlign(Paint.Align.CENTER);        mDrawFilter = new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG);        sweepGradient = new SweepGradient(centerX, centerY, colors, null);        rotateMatrix = new Matrix();    }    @Override    protected void onDraw(Canvas canvas) {        //抗锯齿        canvas.setDrawFilter(mDrawFilter);        if (isNeedDial) {            //画刻度线            for (int i = 0; i < 40; i++) {                if (i > 15 && i < 25) {                    canvas.rotate(9, centerX, centerY);                    continue;                }                if (i % 5 == 0) {                    degreePaint.setStrokeWidth(dipToPx(2));                    degreePaint.setColor(Color.parseColor(longDegreeColor));                    canvas.drawLine(centerX, centerY - diameter / 2 - progressWidth / 2 - DEGREE_PROGRESS_DISTANCE,                            centerX, centerY - diameter / 2 - progressWidth / 2 - DEGREE_PROGRESS_DISTANCE - longdegree, degreePaint);                } else {                    degreePaint.setStrokeWidth(dipToPx(1.4f));                    degreePaint.setColor(Color.parseColor(shortDegreeColor));                    canvas.drawLine(centerX, centerY - diameter / 2 - progressWidth / 2 - DEGREE_PROGRESS_DISTANCE - (longdegree - shortdegree) / 2,                            centerX, centerY - diameter / 2 - progressWidth / 2 - DEGREE_PROGRESS_DISTANCE - (longdegree - shortdegree) / 2 - shortdegree, degreePaint);                }                canvas.rotate(9, centerX, centerY);            }        }        //整个弧        canvas.drawArc(bgRect, startAngle, sweepAngle, false, allArcPaint);        //设置渐变色        rotateMatrix.setRotate(130, centerX, centerY);        sweepGradient.setLocalMatrix(rotateMatrix);        progressPaint.setShader(sweepGradient);        //当前进度        canvas.drawArc(bgRect, startAngle, currentAngle, false, progressPaint);        if (isNeedContent) {            canvas.drawText(String.format("%.0f", curValues), centerX, centerY + textSize / 3, vTextPaint);        }        if (isNeedUnit) {            canvas.drawText(hintString, centerX, centerY + 2 * textSize / 3, hintPaint);        }        if (isNeedTitle) {            canvas.drawText(titleString, centerX, centerY - 2 * textSize / 3, curSpeedPaint);        }        invalidate();    }    /**     * 设置最大值     * @param maxValues     */    public void setMaxValues(float maxValues) {        this.maxValues = maxValues;        k = sweepAngle/maxValues;    }    /**     * 设置当前值     * @param currentValues     */    public void setCurrentValues(float currentValues) {        if (currentValues > maxValues) {            currentValues = maxValues;        }        if (currentValues < 0) {            currentValues = 0;        }        this.curValues = currentValues;        lastAngle = currentAngle;        setAnimation(lastAngle, currentValues * k, aniSpeed);    }    /**     * 设置整个圆弧宽度     * @param bgArcWidth     */    public void setBgArcWidth(int bgArcWidth) {        this.bgArcWidth = bgArcWidth;    }    /**     * 设置进度宽度     * @param progressWidth     */    public void setProgressWidth(int progressWidth) {        this.progressWidth = progressWidth;    }    /**     * 设置速度文字大小     * @param textSize     */    public void setTextSize(int textSize) {        this.textSize = textSize;    }    /**     * 设置单位文字大小     * @param hintSize     */    public void setHintSize(int hintSize) {        this.hintSize = hintSize;    }    /**     * 设置单位文字     * @param hintString     */    public void setUnit(String hintString) {        this.hintString = hintString;        invalidate();    }    /**     * 设置直径大小     * @param diameter     */    public void setDiameter(int diameter) {        this.diameter = dipToPx(diameter);    }    /**     * 设置标题     * @param title     */    private void setTitle(String title){        this.titleString = title;    }    /**     * 设置是否显示标题     * @param isNeedTitle     */    private void setIsNeedTitle(boolean isNeedTitle) {        this.isNeedTitle = isNeedTitle;    }    /**     * 设置是否显示单位文字     * @param isNeedUnit     */    private void setIsNeedUnit(boolean isNeedUnit) {        this.isNeedUnit = isNeedUnit;    }    /**     * 为进度设置动画     * @param last     * @param current     */    private void setAnimation(float last, float current, int length) {        progressAnimator = ValueAnimator.ofFloat(last, current);        progressAnimator.setDuration(length);        progressAnimator.setTarget(currentAngle);        progressAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {            @Override            public void onAnimationUpdate(ValueAnimator animation) {                currentAngle= (float) animation.getAnimatedValue();                curValues = currentAngle/k;            }        });        progressAnimator.start();    }    /**     * dip 转换成px     * @param dip     * @return     */    private int dipToPx(float dip) {        float density = getContext().getResources().getDisplayMetrics().density;        return (int)(dip * density + 0.5f * (dip >= 0 ? 1 : -1));    }    /**     * 得到屏幕宽度     * @return     */    private int getScreenWidth() {        WindowManager windowManager = (WindowManager) getContext().getSystemService(Context.WINDOW_SERVICE);        DisplayMetrics displayMetrics = new DisplayMetrics();        windowManager.getDefaultDisplay().getMetrics(displayMetrics);        return displayMetrics.widthPixels;    }}

2、在MainActivity中当做一个控件直接使用即可

public class MainActivity extends AppCompatActivity {    private ColorArcProgressBar bar2;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        bar2= (ColorArcProgressBar) findViewById(R.id.bar2);        bar2.setCurrentValues(10);    }}

3、MainActivity布局

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:gravity="center"    xmlns:app="http://schemas.android.com/apk/res-auto"    tools:context="com.loupai.circledemo.MainActivity">    <com.loupai.circledemo.ColorArcProgressBar        android:id="@+id/bar2"        android:layout_width="330dp"        android:layout_height="330dp"        android:layout_gravity="center_horizontal"        app:back_color="@android:color/darker_gray"        app:back_width="15dp"        app:front_color1="#42f042"        app:front_color2="#f0ef66"        app:front_color3="#f06666"        app:front_width="15dp"        app:is_need_content="true"        app:is_need_title="true"        app:is_need_unit="true"        app:max_value="10"        app:string_title=""        app:string_unit="水质等级"        app:total_engle="270" /></RelativeLayout>


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表