扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 移动开发 >自定义视图view之环形进度条
  • 115

0
分享到

自定义视图view之环形进度条

自定义视图自定义viewview环形进度条 2023-05-14 11:05:08 115人浏览 安东尼
摘要

目录 一、普通效果。二、单环在圈外画弧度三、双环效果四、Xml布局五、MainActivity中代码的引用六、自定义属性  一、普通效果。 本章博客有4种不同的效

 一、普通效果。

本章博客有4种不同的效果，小伙伴可以绘制更多的效果，唯一不同的代码，是自定义view时，怎么绘制弧度。Main类和布局无更改”

这里写图片描述



package tester.ermu.com.pingamedemo;

import Android.content.Context;
import android.content.res.TypedArray;
import android.graphics.canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.Typeface;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;



public class RoundProgressBar extends View {
    
    private Paint paint;

    
    private int roundColor;

    
    private int roundProgressColor;

    
    private int textColor;

    
    private float textSize;

    
    private float roundWidth;

    
    private int max;

    
    private int progress;
    
    private boolean textIsDisplayable;

    
    private int style;

    public static final int STROKE = 0;
    public static final int FILL = 1;

    public RoundProgressBar(Context context) {
        this(context, null);
    }

    public RoundProgressBar(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public RoundProgressBar(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);

        paint = new Paint();


        TypedArray mTypedArray = context.obtainStyledAttributes(attrs,R.styleable.RoundProgressBar);

        //获取自定义属性和默认值
        roundColor = mTypedArray.getColor(R.styleable.RoundProgressBar_roundColor, Color.RED);//圆环的颜色
        roundProgressColor = mTypedArray.getColor(R.styleable.RoundProgressBar_roundProgressColor, Color.GREEN);//圆环进度的颜色
        textColor = mTypedArray.getColor(R.styleable.RoundProgressBar_textColor, Color.GREEN);//字体颜色
        textSize = mTypedArray.getDimension(R.styleable.RoundProgressBar_textSize, 15);//字体大小
        roundWidth = mTypedArray.getDimension(R.styleable.RoundProgressBar_roundWidth, 5);//圆环的宽度
        max = mTypedArray.getInteger(R.styleable.RoundProgressBar_max, 100);//进度条最大值，一般都为1001
        textIsDisplayable = mTypedArray.getBoolean(R.styleable.RoundProgressBar_textIsDisplayable, true);//是否显示中间的进度
        style = mTypedArray.getInt(R.styleable.RoundProgressBar_style, 1);//进度的风格，实心或者空心

        mTypedArray.recycle();
    }

    
    public synchronized void setProgress(int progress) {

        if(progress < 0){
            throw new IllegalArgumentException("progress not less than 0");
        }

        if(progress > max){
            progress = max;
        }

        if(progress <= max){
            this.progress = progress;
            postInvalidate();
        }

    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        
        int centre = getWidth()/2; //获取圆心的x坐标
        Log.i("Text","centre ------1111"+centre);
        int radius = (int) (centre - roundWidth*2); //圆环的半径


        Log.i("Text","radius ------2222"+radius);
        paint.setColor(roundColor); //设置圆环的颜色
        paint.setStyle(Paint.Style.STROKE); //设置空心
        paint.setStrokeWidth(roundWidth); //设置圆环的宽度
        paint.setAntiAlias(true);  //消除锯齿
        canvas.drawCircle(centre, centre, radius, paint); //画出圆环

        Log.e("log", centre + "");

        
        paint.setStrokeWidth(0);
        paint.setColor(textColor);
        paint.setTextSize(textSize);
        paint.setTypeface(Typeface.DEFAULT_BOLD); //设置字体
        int percent = (int)(((float)progress / (float)max) * 100);  //中间的进度百分比，先转换成float在进行除法运算，不然都为0
        float textWidth = paint.measureText(percent + "%");   //测量字体宽度，我们需要根据字体的宽度设置在圆环中间

        if(textIsDisplayable && percent != 0 && style == STROKE){
            canvas.drawText(percent + "%", centre - textWidth / 2, centre + textSize/2, paint); //画出进度百分比
        }

        

        //设置进度是实心还是空心
        paint.setStrokeWidth(roundWidth); //设置圆环的宽度
        paint.setColor(roundProgressColor);  //设置进度的颜色
        RectF oval = new RectF(centre - radius, centre - radius, centre+ radius, centre + radius);//----1号：代码用于定义的圆弧的形状和大小的界限
//      RectF oval = new RectF(centre - radius-40, centre - radius-40, centre+ radius+40, centre + radius+40);  //--2号：用于定义的圆弧的形状和大小的界限
//      RectF ova12 = new RectF(centre - radius-60, centre - radius-60, centre+ radius+60, centre + radius+60);

//      RectF oval = new RectF(centre - radius+40, centre - radius+40, centre+ radius-40, centre + radius-40);  //--2号：用于定义的圆弧的形状和大小的界限
//      RectF ova12 = new RectF(centre - radius+60, centre - radius+60, centre+ radius-60, centre + radius-60);

        switch (style) {

            
            case STROKE:{
                paint.setStyle(Paint.Style.STROKE);
                paint.setStrokeWidth(18);
                paint.setColor(Color.RED);
                canvas.drawArc(oval, 0, 360 * progress / max, false, paint);  //根据进度画圆弧

                
//              paint.setStrokeWidth(9);
//              paint.setColor(Color.YELLOW);
//              canvas.drawArc(ova12, 0, 360 * progress / max, false, paint);  //根据进度画圆弧
                break;
            }
            case FILL:{
                paint.setStyle(Paint.Style.FILL_AND_STROKE);
                paint.setStrokeWidth(18);
                paint.setColor(Color.RED);

                if(progress !=0)
                    
                    canvas.drawArc(oval, 0, 360 * progress / max, true, paint);  //根据进度画圆弧


                
//              paint.setStrokeWidth(9);
//              paint.setColor(Color.YELLOW);
//              canvas.drawArc(ova12, 0, 360 * progress / max, false, paint);  //
                break;
            }
        }

    }




}

二、单环在圈外画弧度

这里写图片描述

和普通效果代码不同的地方如下，屏蔽167行，打开168行即可：

这里写图片描述

这里写图片描述


package tester.ermu.com.pingamedemo;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.Typeface;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;



public class RoundProgressBar extends View {
    
    private Paint paint;

    
    private int roundColor;

    
    private int roundProgressColor;

    
    private int textColor;

    
    private float textSize;

    
    private float roundWidth;

    
    private int max;

    
    private int progress;
    
    private boolean textIsDisplayable;

    
    private int style;

    public static final int STROKE = 0;
    public static final int FILL = 1;

    public RoundProgressBar(Context context) {
        this(context, null);
    }

    public RoundProgressBar(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public RoundProgressBar(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);

        paint = new Paint();


        TypedArray mTypedArray = context.obtainStyledAttributes(attrs,R.styleable.RoundProgressBar);

        //获取自定义属性和默认值
        roundColor = mTypedArray.getColor(R.styleable.RoundProgressBar_roundColor, Color.RED);//圆环的颜色
        roundProgressColor = mTypedArray.getColor(R.styleable.RoundProgressBar_roundProgressColor, Color.GREEN);//圆环进度的颜色
        textColor = mTypedArray.getColor(R.styleable.RoundProgressBar_textColor, Color.GREEN);//字体颜色
        textSize = mTypedArray.getDimension(R.styleable.RoundProgressBar_textSize, 15);//字体大小
        roundWidth = mTypedArray.getDimension(R.styleable.RoundProgressBar_roundWidth, 5);//圆环的宽度
        max = mTypedArray.getInteger(R.styleable.RoundProgressBar_max, 100);//进度条最大值，一般都为1001
        textIsDisplayable = mTypedArray.getBoolean(R.styleable.RoundProgressBar_textIsDisplayable, true);//是否显示中间的进度
        style = mTypedArray.getInt(R.styleable.RoundProgressBar_style, 1);//进度的风格，实心或者空心

        mTypedArray.recycle();
    }

    
    public synchronized void setProgress(int progress) {

        if(progress < 0){
            throw new IllegalArgumentException("progress not less than 0");
        }

        if(progress > max){
            progress = max;
        }

        if(progress <= max){
            this.progress = progress;
            postInvalidate();
        }

    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        
        int centre = getWidth()/2; //获取圆心的x坐标
        Log.i("Text","centre ------1111"+centre);
        int radius = (int) (centre - roundWidth*2); //圆环的半径


        Log.i("Text","radius ------2222"+radius);
        paint.setColor(roundColor); //设置圆环的颜色
        paint.setStyle(Paint.Style.STROKE); //设置空心
        paint.setStrokeWidth(roundWidth); //设置圆环的宽度
        paint.setAntiAlias(true);  //消除锯齿
        canvas.drawCircle(centre, centre, radius, paint); //画出圆环

        Log.e("log", centre + "");

        
        paint.setStrokeWidth(0);
        paint.setColor(textColor);
        paint.setTextSize(textSize);
        paint.setTypeface(Typeface.DEFAULT_BOLD); //设置字体
        int percent = (int)(((float)progress / (float)max) * 100);  //中间的进度百分比，先转换成float在进行除法运算，不然都为0
        float textWidth = paint.measureText(percent + "%");   //测量字体宽度，我们需要根据字体的宽度设置在圆环中间

        if(textIsDisplayable && percent != 0 && style == STROKE){
            canvas.drawText(percent + "%", centre - textWidth / 2, centre + textSize/2, paint); //画出进度百分比
        }

        

        //设置进度是实心还是空心
        paint.setStrokeWidth(roundWidth); //设置圆环的宽度
        paint.setColor(roundProgressColor);  //设置进度的颜色
//      RectF oval = new RectF(centre - radius, centre - radius, centre+ radius, centre + radius);//----1号：代码用于定义的圆弧的形状和大小的界限
        RectF oval = new RectF(centre - radius-40, centre - radius-40, centre+ radius+40, centre + radius+40);  //--2号：用于定义的圆弧的形状和大小的界限
//      RectF ova12 = new RectF(centre - radius-60, centre - radius-60, centre+ radius+60, centre + radius+60);

//      RectF oval = new RectF(centre - radius+40, centre - radius+40, centre+ radius-40, centre + radius-40);  //--2号：用于定义的圆弧的形状和大小的界限
//      RectF ova12 = new RectF(centre - radius+60, centre - radius+60, centre+ radius-60, centre + radius-60);

        switch (style) {

            
            case STROKE:{
                paint.setStyle(Paint.Style.STROKE);
                paint.setStrokeWidth(18);
                paint.setColor(Color.RED);
                canvas.drawArc(oval, 0, 360 * progress / max, false, paint);  //根据进度画圆弧

                
//              paint.setStrokeWidth(9);
//              paint.setColor(Color.YELLOW);
//              canvas.drawArc(ova12, 0, 360 * progress / max, false, paint);  //根据进度画圆弧
                break;
            }
            case FILL:{
                paint.setStyle(Paint.Style.FILL_AND_STROKE);
                paint.setStrokeWidth(18);
                paint.setColor(Color.RED);

                if(progress !=0)
                    
                    canvas.drawArc(oval, 0, 360 * progress / max, true, paint);  //根据进度画圆弧


                
//              paint.setStrokeWidth(9);
//              paint.setColor(Color.YELLOW);
//              canvas.drawArc(ova12, 0, 360 * progress / max, false, paint);  //
                break;
            }
        }

    }
}

三、双环效果

这里写图片描述

代码不同的地方

这里写图片描述

这里写图片描述


package tester.ermu.com.pingamedemo;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.Typeface;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;



public class RoundProgressBar extends View {
    
    private Paint paint;

    
    private int roundColor;

    
    private int roundProgressColor;

    
    private int textColor;

    
    private float textSize;

    
    private float roundWidth;

    
    private int max;

    
    private int progress;
    
    private boolean textIsDisplayable;

    
    private int style;

    public static final int STROKE = 0;
    public static final int FILL = 1;

    public RoundProgressBar(Context context) {
        this(context, null);
    }

    public RoundProgressBar(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public RoundProgressBar(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);

        paint = new Paint();


        TypedArray mTypedArray = context.obtainStyledAttributes(attrs,R.styleable.RoundProgressBar);

        //获取自定义属性和默认值
        roundColor = mTypedArray.getColor(R.styleable.RoundProgressBar_roundColor, Color.RED);//圆环的颜色
        roundProgressColor = mTypedArray.getColor(R.styleable.RoundProgressBar_roundProgressColor, Color.GREEN);//圆环进度的颜色
        textColor = mTypedArray.getColor(R.styleable.RoundProgressBar_textColor, Color.GREEN);//字体颜色
        textSize = mTypedArray.getDimension(R.styleable.RoundProgressBar_textSize, 15);//字体大小
        roundWidth = mTypedArray.getDimension(R.styleable.RoundProgressBar_roundWidth, 5);//圆环的宽度
        max = mTypedArray.getInteger(R.styleable.RoundProgressBar_max, 100);//进度条最大值，一般都为1001
        textIsDisplayable = mTypedArray.getBoolean(R.styleable.RoundProgressBar_textIsDisplayable, true);//是否显示中间的进度
        style = mTypedArray.getInt(R.styleable.RoundProgressBar_style, 1);//进度的风格，实心或者空心

        mTypedArray.recycle();
    }

    
    public synchronized void setProgress(int progress) {

        if(progress < 0){
            throw new IllegalArgumentException("progress not less than 0");
        }

        if(progress > max){
            progress = max;
        }

        if(progress <= max){
            this.progress = progress;
            postInvalidate();
        }

    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        
        int centre = getWidth()/2; //获取圆心的x坐标
        Log.i("Text","centre ------1111"+centre);
        int radius = (int) (centre - roundWidth*2); //圆环的半径


        Log.i("Text","radius ------2222"+radius);
        paint.setColor(roundColor); //设置圆环的颜色
        paint.setStyle(Paint.Style.STROKE); //设置空心
        paint.setStrokeWidth(roundWidth); //设置圆环的宽度
        paint.setAntiAlias(true);  //消除锯齿
        canvas.drawCircle(centre, centre, radius, paint); //画出圆环

        Log.e("log", centre + "");

        
        paint.setStrokeWidth(0);
        paint.setColor(textColor);
        paint.setTextSize(textSize);
        paint.setTypeface(Typeface.DEFAULT_BOLD); //设置字体
        int percent = (int)(((float)progress / (float)max) * 100);  //中间的进度百分比，先转换成float在进行除法运算，不然都为0
        float textWidth = paint.measureText(percent + "%");   //测量字体宽度，我们需要根据字体的宽度设置在圆环中间

        if(textIsDisplayable && percent != 0 && style == STROKE){
            canvas.drawText(percent + "%", centre - textWidth / 2, centre + textSize/2, paint); //画出进度百分比
        }

        

        //设置进度是实心还是空心
        paint.setStrokeWidth(roundWidth); //设置圆环的宽度
        paint.setColor(roundProgressColor);  //设置进度的颜色
//      RectF oval = new RectF(centre - radius, centre - radius, centre+ radius, centre + radius);//----1号：代码用于定义的圆弧的形状和大小的界限
        RectF oval = new RectF(centre - radius-40, centre - radius-40, centre+ radius+40, centre + radius+40);  //--2号：用于定义的圆弧的形状和大小的界限
        RectF ova12 = new RectF(centre - radius-60, centre - radius-60, centre+ radius+60, centre + radius+60);

//      RectF oval = new RectF(centre - radius+40, centre - radius+40, centre+ radius-40, centre + radius-40);  //--2号：用于定义的圆弧的形状和大小的界限
//      RectF ova12 = new RectF(centre - radius+60, centre - radius+60, centre+ radius-60, centre + radius-60);

        switch (style) {

            
            case STROKE:{
                paint.setStyle(Paint.Style.STROKE);
                paint.setStrokeWidth(18);
                paint.setColor(Color.RED);
                canvas.drawArc(oval, 0, 360 * progress / max, false, paint);  //根据进度画圆弧

                
                paint.setStrokeWidth(9);
                paint.setColor(Color.YELLOW);
                canvas.drawArc(ova12, 0, 360 * progress / max, false, paint);  //根据进度画圆弧
                break;
            }
            case FILL:{
                paint.setStyle(Paint.Style.FILL_AND_STROKE);
                paint.setStrokeWidth(18);
                paint.setColor(Color.RED);

                if(progress !=0)
                    
                    canvas.drawArc(oval, 0, 360 * progress / max, true, paint);  //根据进度画圆弧


                
                paint.setStrokeWidth(9);
                paint.setColor(Color.YELLOW);
                canvas.drawArc(ova12, 0, 360 * progress / max, false, paint);  //
                break;
            }
        }

    }




}

实心效果环形进度条

这里写图片描述

这里需要添加或修改的代码如下：

这里写图片描述


package tester.ermu.com.pingamedemo;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.Typeface;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;



public class RoundProgressBar extends View {
    
    private Paint paint;

    
    private int roundColor;

    
    private int roundProgressColor;

    
    private int textColor;

    
    private float textSize;

    
    private float roundWidth;

    
    private int max;

    
    private int progress;
    
    private boolean textIsDisplayable;

    
    private int style;

    public static final int STROKE = 0;
    public static final int FILL = 1;

    public RoundProgressBar(Context context) {
        this(context, null);
    }

    public RoundProgressBar(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public RoundProgressBar(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);

        paint = new Paint();


        TypedArray mTypedArray = context.obtainStyledAttributes(attrs,R.styleable.RoundProgressBar);

        //获取自定义属性和默认值
        roundColor = mTypedArray.getColor(R.styleable.RoundProgressBar_roundColor, Color.RED);//圆环的颜色
        roundProgressColor = mTypedArray.getColor(R.styleable.RoundProgressBar_roundProgressColor, Color.GREEN);//圆环进度的颜色
        textColor = mTypedArray.getColor(R.styleable.RoundProgressBar_textColor, Color.GREEN);//字体颜色
        textSize = mTypedArray.getDimension(R.styleable.RoundProgressBar_textSize, 15);//字体大小
        roundWidth = mTypedArray.getDimension(R.styleable.RoundProgressBar_roundWidth, 5);//圆环的宽度
        max = mTypedArray.getInteger(R.styleable.RoundProgressBar_max, 100);//进度条最大值，一般都为1001
        textIsDisplayable = mTypedArray.getBoolean(R.styleable.RoundProgressBar_textIsDisplayable, true);//是否显示中间的进度
        style = mTypedArray.getInt(R.styleable.RoundProgressBar_style, 1);//进度的风格，实心或者空心

        mTypedArray.recycle();
    }

    
    public synchronized void setProgress(int progress) {

        if(progress < 0){
            throw new IllegalArgumentException("progress not less than 0");
        }

        if(progress > max){
            progress = max;
        }

        if(progress <= max){
            this.progress = progress;
            postInvalidate();
        }

    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        
        int centre = getWidth()/2; //获取圆心的x坐标
        Log.i("Text","centre ------1111"+centre);
        int radius = (int) (centre - roundWidth*2); //圆环的半径


        Log.i("Text","radius ------2222"+radius);
        paint.setColor(roundColor); //设置圆环的颜色
        paint.setStyle(Paint.Style.STROKE); //设置空心
        paint.setStrokeWidth(roundWidth); //设置圆环的宽度
        paint.setAntiAlias(true);  //消除锯齿
        canvas.drawCircle(centre, centre, radius, paint); //画出圆环

        Log.e("log", centre + "");

        
        paint.setStrokeWidth(0);
        paint.setColor(textColor);
        paint.setTextSize(textSize);
        paint.setTypeface(Typeface.DEFAULT_BOLD); //设置字体
        int percent = (int)(((float)progress / (float)max) * 100);  //中间的进度百分比，先转换成float在进行除法运算，不然都为0
        float textWidth = paint.measureText(percent + "%");   //测量字体宽度，我们需要根据字体的宽度设置在圆环中间

        if(textIsDisplayable && percent != 0 && style == STROKE){
            canvas.drawText(percent + "%", centre - textWidth / 2, centre + textSize/2, paint); //画出进度百分比
        }

        

        //设置进度是实心还是空心
        paint.setStrokeWidth(roundWidth); //设置圆环的宽度
        paint.setColor(roundProgressColor);  //设置进度的颜色
//      RectF oval = new RectF(centre - radius, centre - radius, centre+ radius, centre + radius);//----1号：代码用于定义的圆弧的形状和大小的界限
//      RectF oval = new RectF(centre - radius-40, centre - radius-40, centre+ radius+40, centre + radius+40);  //--2号：用于定义的圆弧的形状和大小的界限
//      RectF ova12 = new RectF(centre - radius-60, centre - radius-60, centre+ radius+60, centre + radius+60);

        RectF oval = new RectF(centre - radius+40, centre - radius+40, centre+ radius-40, centre + radius-40);  //--2号：用于定义的圆弧的形状和大小的界限
        RectF ova12 = new RectF(centre - radius+60, centre - radius+60, centre+ radius-60, centre + radius-60);

        switch (style) {

            
            case STROKE:{
                paint.setStyle(Paint.Style.STROKE);
                paint.setStrokeWidth(18);
                paint.setColor(Color.RED);
                canvas.drawArc(oval, 0, 360 * progress / max, false, paint);  //根据进度画圆弧

                
                paint.setStrokeWidth(9);
                paint.setColor(Color.YELLOW);
                canvas.drawArc(ova12, 0, 360 * progress / max, false, paint);  //根据进度画圆弧
                break;
            }
            case FILL:{
                paint.setStyle(Paint.Style.FILL_AND_STROKE);
                paint.setStrokeWidth(18);
                paint.setColor(Color.RED);

                if(progress !=0)
                    
                    canvas.drawArc(oval, 0, 360 * progress / max, true, paint);  //根据进度画圆弧


                
                paint.setStrokeWidth(9);
                paint.setColor(Color.YELLOW);
                canvas.drawArc(ova12, 0, 360 * progress / max, false, paint);  //
                break;
            }
        }

    }




}

四、Xml布局

<LinearLayout xmlns:android="Http://schemas.android.com/apk/res/android"
    xmlns:android_custom="http://schemas.android.com/apk/res/tester.ermu.com.pingamedemo"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#000000"
    tools:ignore="ResAuto">

    <tester.ermu.com.pingamedemo.RoundProgressBar
        android:id="@+id/roundBar"
        android:layout_width="200dip"
        android:layout_height="200dip"
        android:layout_gravity="center"
        android:layout_marginTop="30dp"
        android:layout_marginBottom="79dp"

        android_custom:roundColor="#ffffff"
        android_custom:roundProgressColor="@android:color/black"
        android_custom:textColor="#9A32CD"
        android_custom:roundWidth="15dip"
        android_custom:textSize="18sp" />

    <Button
        android:id="@+id/button1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:background="#ffffff"
        android:layout_margin="5dp"
        android:text="开始" />


</LinearLayout>

这里写图片描述

五、MainActivity中代码的引用

package tester.ermu.com.pingamedemo;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;


public class MainActivity extends Activity implements OnClickListener{
    private RoundProgressBar  roundBar ;
    private int progress = 0;
    private Button button1,button2;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_cricle_progress);
        init();

    }

    private void init() {
        roundBar = (RoundProgressBar) findViewById(R.id.roundBar);

        button1 = (Button)findViewById(R.id.button1);
        button1.setOnClickListener(this);

    }


    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case    R.id.button1:
                new Thread(new Runnable() {
                    @Override
                    public void run() {
                        while(progress <= 100){
                            progress += 3;
                            System.out.println(progress);
                            roundBar.setProgress(progress);
                            try {
                                Thread.sleep(100);
                            } catch (InterruptedException e) {
                                e.printStackTrace();
                            }
                        }
                    }
                }).start();
                break;


        }
    }
}

六、自定义属性

<?xml version="1.0" encoding="UTF-8"?>
<resources>
    <declare-styleable name="RoundProgressBar">  
        <attr name="roundColor" fORMat="color"/>
        <attr name="roundProgressColor" format="color"/>
        <attr name="roundWidth" format="dimension"></attr>
        <attr name="textColor" format="color" />  
        <attr name="textSize" format="dimension" /> 
        <attr name="max" format="integer"></attr> 
        <attr name="textIsDisplayable" format="boolean"></attr>
        <attr name="style">
            <enum name="STROKE" value="0"></enum>
            <enum name="FILL" value="1"></enum>
        </attr>
    </declare-styleable> 
</resources>

这里写图片描述

到此这篇关于自定义视图view之环形进度条的文章就介绍到这了,更多相关自定义view环形进度条内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

--结束END--

本文标题: 自定义视图view之环形进度条

本文链接: https://lsjlt.com/news/203097.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 自定义视图view之环形进度条
    目录 一、普通效果。二、单环在圈外画弧度三、双环效果四、Xml布局五、MainActivity中代码的引用六、自定义属性  一、普通效果。 本章博客有4种不同的效...
    99+
    2023-05-14
    自定义视图 自定义view view环形进度条
  • 自定义视图view怎么实现环形进度条
    这篇文章主要介绍“自定义视图view怎么实现环形进度条”，在日常操作中，相信很多人在自定义视图view怎么实现环形进度条问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”自定义视图view怎么实现环形进度条”的疑...
    99+
    2023-07-05
  • Android自定义View之圆形进度条式按钮
    介绍 今天上班的时候有个哥们问我怎么去实现一个按钮式的进度条，先来看看他需要实现的效果图。 和普通的圆形进度条类似，只是中间的地方有两个状态表示，未开始，暂停状态。而且他说圆...
    99+
    2022-06-06
    view 进度条 按钮 Android
  • Android自定义View实现圆形进度条
    本文实例为大家分享了Android自定义View实现圆形进度条的具体代码，供大家参考，具体内容如下 原理非常简单，在自定义View的基础上使用Canvas的drawCircle画两个...
    99+
    2024-04-02
  • 自定义view视图之Canvas+Paint图形绘制
    目录一、绘图都需要那些相关知识二、我们先来了解下Canvas三、那我们如何来使用这些方法进行绘制呢？1、我们需要创建一个类继承view（1）首先定义一个画笔对象和一个画布的颜色（2）...
    99+
    2023-05-14
    自定义view 自定义view视图 Canvas+Paint 自定义view图形绘制
  • Android自定义View圆形进度条控件（三）
    继续练习自定义View，这次带来的圆形进度条控件与之前的圆形百分比控件大同小异，这次涉及到了渐变渲染以及画布旋转等知识点，效果如下： 虽然步骤类似，但是我还是要写，毕竟基础的...
    99+
    2022-06-06
    view 进度条 Android
  • android自定义view制作圆形进度条效果
    还是我们自定View的那几个步骤： 1、自定义View的属性 2、在View的构造方法中获得我们自定义的属性 [ 3、重写onMesure ] 4、重写onDraw 1、自定...
    99+
    2022-06-06
    view 进度条 Android
  • Android自定义view实现圆形进度条效果
    Android中实现进度条有很多种方式，自定义进度条一般是继承progressBar或继承view来实现，本篇中讲解的是第二种方式。 先上效果图： 实现圆形进度条总体来说并不难，还...
    99+
    2024-04-02
  • Android怎么自定义View实现圆形进度条
    本文小编为大家详细介绍“Android怎么自定义View实现圆形进度条”，内容详细，步骤清晰，细节处理妥当，希望这篇“Android怎么自定义View实现圆形进度条”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。原...
    99+
    2023-07-02
  • Android自定义View实现圆形加载进度条
    本文实例为大家分享了Android自定义View实现圆形加载进度条的具体代码，供大家参考，具体内容如下 效果图 话不多说,咱们直接看代码 首先第一种: 1、创建自定义View类 p...
    99+
    2024-04-02
  • Android自定义View实现环形进度条的思路与实例
    前言 前段时间看到了豆瓣FM的音乐播放界面，有一个环形的进度条，非常的好看，于是想了想，为什么不自己做一个呢，于是就开始了自定义的过程 豆瓣FM的播放界面如下图： 功能分...
    99+
    2022-06-06
    view 进度条 Android
  • Android自定义View圆形进度条控件的方法
    这篇文章主要讲解了Android自定义View圆形进度条控件的方法，内容清晰明了，对此有兴趣的小伙伴可以学习一下，相信大家阅读完之后会有帮助。继续练习自定义View，这次带来的圆形进度条控件与之前的圆形百分比控件大同小异，这次涉及到了渐变渲...
    99+
    2023-05-31
    android roi %d
  • Android自定义view实现圆环进度条效果
    本文实例为大家分享了Android自定义view实现圆环进度条效果的具体代码，供大家参考，具体内容如下 一、实现效果图 二、核心代码 自定义view的属性 <xml vers...
    99+
    2024-04-02
  • Android自定义View基础开发之图片加载进度条
    学会了Paint，Canvas的基本用法之后，我们就可以动手开始实践了，先写个简单的图片加载进度条看看。 按照惯例，先看效果图，再决定要不要往下看： 既然看到这里了，应该是...
    99+
    2022-06-06
    view 进度条 图片 Android
  • 详解Android如何自定义view实现圆形进度条
    Android中实现进度条有很多种方式，自定义进度条一般是继承progressBar或继承view来实现，本篇中讲解的是第二种方式。 先上效果图： 实现圆形进度条总体来说并不难，还...
    99+
    2024-04-02
  • Android view自定义实现动态进度条
    Android  自定义view实现动态进度条 效果图： 这个是看了梁肖的demo，根据他的思路自己写了一个，但是我写的这个貌似计算还是有些问题，从上面的图就可以...
    99+
    2022-06-06
    view 进度条 动态 Android
  • android自定义进度条渐变圆形
    在安全卫生上，经常看到有圆形的进度条在转动，效果非常好看，于是就尝试去实现一下，具体实现过程不多说了，直接上效果图，先炫耀下。 效果图： 分析：比较常见于扫描结果、进度条等场...
    99+
    2022-06-06
    进度条 Android
  • Android动态自定义圆形进度条
    效果图： A.绘制圆环，圆弧，文本 //1.画圆环 //原点坐标 float circleX = width / 2; float circleY = width / 2...
    99+
    2022-06-06
    自定义 进度条 Android
  • Android实现自定义圆形进度条
    今天无意中发现一个圆形进度，想想自己实现一个，如下图： 基本思路是这样的： 1.首先绘制一个实心圆 2.绘制一个白色实心的正方形，遮住实心圆 3.在圆的中心动态绘制当前进度的...
    99+
    2022-06-06
    自定义 进度条 Android
  • Android自定义圆形进度条效果
    本文实例为大家分享了Android自定义圆形进度条效果的具体代码，供大家参考，具体内容如下 1 控件 RoundProgress package listview.tianhet...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作