Android Paint应用之自定义View实现进度条控件

于 2017-12-26 09:48:43 发布
阅读量106 收藏
点赞数
文章标签： 移动开发
原文链接：https://juejin.im/post/5a30f79a5188253ee45b7071
版权

在上一篇文章《Android神笔之Paint》学习了Paint的基本用法，但是具体的应用我们还没有实践过。从标题中可知，本文是带领读者使用Paint，自定义一个进度条控件。

上图就是本文要实现的效果图。既然是自定义控件，本文的该控件是直接继承View，然后重写View的onMeasure和onDraw方法来实现。其中onMeasure主要作用是测量控件的宽/高。而onDraw则是将界面绘制到屏幕上。

从效果的效果上看，我们需要自定义一些属性，如：进度度条的颜色、圆边框的颜色、圆边框的宽度和文本的大小等等。

具体的自定义属性请看下面attrs.xml的代码：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="CustomProgressBar">
        <attr name="roundProgressColor" format="color"></attr>
        <attr name="roundColor" format="color"></attr>
        <attr name="roundWidth" format="dimension"></attr>
        <attr name="textSize" format="dimension"></attr>
        <attr name="textColor" format="color"></attr>
        <attr name="max" format="integer"></attr>
        <attr name="textShow" format="boolean"></attr>
        <attr name="style">
            <enum name="STROKE" value="0"></enum>
            <enum name="FILL" value="1"></enum>
        </attr>
    </declare-styleable>
</resources>
复制代码

接下来看本文的最重要部分，也就是自定义View

public class CustomProgressBar extends View {

    private int max = 100;//总进度
    private int roundColor = Color.RED;//进度圆弧的颜色
    private float roundWidth = 10;//圆边框宽度
    private int roundProgressColor = Color.BLUE;//默认的大圆环边框颜色
    private float textSize = 55;//文本大小
    private int textColor = Color.GREEN;//文本默认颜色
    private boolean textShow = true;//是否展示文本
    public static final int STROKE = 0;//描边
    public static final int FILL = 1;//填充
    private int style = STROKE;//默认描边

    private int progress;//进度
    private Paint mPaint;

    private int mWidth = 200;//默认控件宽度，wrap_content时候使用
    private int mHeight = 200;//默认控件高度，wrap_content时候使用


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

    public CustomProgressBar(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs);
    }

    private void init(Context context, AttributeSet attrs) {
        mPaint = new Paint();
        if (attrs != null) {
            TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CustomProgressBar);
            max = typedArray.getInteger(R.styleable.CustomProgressBar_max, 100);
            roundColor = typedArray.getColor(R.styleable.CustomProgressBar_roundColor, Color.BLUE);
            roundProgressColor = typedArray.getColor(R.styleable.CustomProgressBar_roundProgressColor, Color.BLUE);
            textColor = typedArray.getColor(R.styleable.CustomProgressBar_textColor, Color.GREEN);
            textSize = typedArray.getDimension(R.styleable.CustomProgressBar_textSize, 55);
            roundWidth = typedArray.getDimension(R.styleable.CustomProgressBar_roundWidth, 10);
            textShow = typedArray.getBoolean(R.styleable.CustomProgressBar_textShow, true);
            style = typedArray.getInt(R.styleable.CustomProgressBar_style, 0);

            typedArray.recycle();
        }
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int widthSpecSize = MeasureSpec.getSize(widthMeasureSpec);
        int widthSpecMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightSpecSize = MeasureSpec.getSize(heightMeasureSpec);
        int heightSpecMode = MeasureSpec.getMode(heightMeasureSpec);
        if (widthSpecMode == MeasureSpec.AT_MOST && heightSpecMode == MeasureSpec.AT_MOST){
            setMeasuredDimension(mWidth,mHeight);
        }else if (widthSpecMode == MeasureSpec.AT_MOST){
            setMeasuredDimension(mWidth,heightSpecSize);
        }else if (heightSpecMode == MeasureSpec.AT_MOST){
            setMeasuredDimension(widthSpecSize,mHeight);
        }
    }

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

        final int paddingLeft = getPaddingLeft();
        final int paddingRight = getPaddingRight();
        final int paddingTop = getPaddingTop();
        final int paddingBottom = getPaddingBottom();
        int width = getWidth() - paddingLeft - paddingRight;
        int height = getHeight() - paddingBottom - paddingTop;

        //画默认的大圆环
        float radius = (float)Math.min(width,height)/2.0f;//中心坐标点
        mPaint.setColor(roundColor);
        mPaint.setStyle(Paint.Style.STROKE);//描边
        mPaint.setStrokeWidth(roundWidth);//圆环边的宽度
//        if (style == STROKE){
//            mPaint.setStrokeWidth(roundWidth);//圆环边的宽度
//        }
        mPaint.setAntiAlias(true);
        //(float cx, float cy, float radius, @NonNull Paint paint)
        canvas.drawCircle(paddingLeft+width/2,paddingTop+height/2,radius,mPaint);

        //画进度百分比
        mPaint.setColor(textColor);
        mPaint.setStrokeWidth(0);//圆环的宽度
        mPaint.setTextSize(textSize);
        mPaint.setTypeface(Typeface.DEFAULT_BOLD);

        int percent = (int)(progress/(float)max * 100);
        if(textShow && percent!=0 && style == STROKE){
            //(@NonNull String text, float x, float y, @NonNull Paint paint)
            canvas.drawText(percent+"%", (getWidth()-mPaint.measureText(percent+"%"))/2f,
                    //y公式： float baselineY = centerY + (fontMetrics.bottom-fontMetrics.top)/2 - fontMetrics.bottom
                    getWidth()/2f-(mPaint.descent()+mPaint.ascent())/2f,
                    mPaint);
        }

        //画圆弧
        //矩形区域，定义圆弧的形状大小
        //(float left, float top, float right, float bottom)
        RectF oval = new RectF(paddingLeft, paddingTop, width+paddingLeft, height+paddingTop);
        mPaint.setColor(roundProgressColor);
        mPaint.setStrokeWidth(roundWidth);//圆环边的宽度
        switch (style){
            case STROKE:
                mPaint.setStyle(Paint.Style.STROKE);
                //(@NonNull RectF oval, float startAngle, float sweepAngle, boolean useCenter,@NonNull Paint paint)
                //useCenter:设置圆弧在绘画的时候，是否经过圆形
                canvas.drawArc(oval , 0, 360*progress/max, false, mPaint);
                break;
            case FILL:
                mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
                if(progress!=0)
                    canvas.drawArc(oval , 0, 360*progress/max, true, mPaint);
                break;
            default:
                break;
        }

    }

    public void setProgressWidth(int width) {
        mWidth = width;
    }

    public void setProgressHeight(int height) {
        mHeight = height;
    }

    public synchronized void setMax(int max) {
        if (max < 0) {
            throw new IllegalArgumentException("max不能小于0");
        }
        this.max = max;
    }

    public void setRoundColor(int roundColor) {
        this.roundColor = roundColor;
    }

    public void setRoundWidth(float roundWidth) {
        this.roundWidth = roundWidth;
    }

    public void setRoundProgressColor(int roundProgressColor) {
        this.roundProgressColor = roundProgressColor;
    }

    public void setTextSize(float textSize) {
        this.textSize = textSize;
    }

    public void setTextColor(int textColor) {
        this.textColor = textColor;
    }

    public void setTextShow(boolean textShow) {
        this.textShow = textShow;
    }

    public synchronized void setProgress(int progress) {
        if (progress < 0) {
            throw new IllegalArgumentException("progress不能小于0");
        }
        if (progress > max) {
            progress = max;
        }
        if (progress <= max) {
            this.progress = progress;
            postInvalidate();
        }
    }

    public synchronized int getMax() {
        return max;
    }

    public int getRoundColor() {
        return roundColor;
    }

    public float getRoundWidth() {
        return roundWidth;
    }

    public int getRoundProgressColor() {
        return roundProgressColor;
    }

    public int getTextColor() {
        return textColor;
    }

    public boolean isTextShow() {
        return textShow;
    }

    public synchronized int getProgress() {
        return progress;
    }
}
复制代码

流程：初始化的时候会拿到自定义属性，然后onMeasure方法中测量控件的宽和高，该方法主要处理了LayoutParams的wrap_content，当wrap_content时，默认设置默认宽/高，而不是让控件占据整个屏幕，需要调用setMeasuredDimension方法测量。最后测量得到了控件的宽/高，调用onDraw方法将界面绘制到屏幕上，在onDraw方法绘制的时需要考虑padding的情况，如果不做padding处理，则padding将不起作用。

onDraw绘制流程：先绘制一个默认的大圆环，然后在圆中心绘制百分比的文本，最后再绘制一个进度圆环，进度圆环会覆盖底部的默认大圆环，这样就达到显示进度的情况。

设置好画笔之后，使用canvas.drawCircle绘制默认的大圆环，再次设置画笔，使用canvas.drawText方法绘制文本；画圆弧时需要定义一个矩形区域RectF，通过canvas.drawArc方法绘制。

绘制好之后，如何让用户看到进度条在变化呢？其实就是通过setProgress方法里面的postInvalidate()方法，该方法会刷新界面，刷新界面时会调用onDraw，这样就可以将进度画到屏幕上，进度条不停的在变化。

使用

XML中使用

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.main.paint.PaintActivity">

    <com.main.paint.CustomProgressBar
        android:id="@+id/progressbar"
        android:layout_width="200dp"
        android:layout_height="200dp"
        app:roundProgressColor="#FF0000"
        app:roundWidth="2dp"
        app:textColor="#FF0000"
        app:style="STROKE"
        android:padding="30dp"
        app:textSize="20dp"/>

    <com.main.paint.CustomProgressBar
        android:id="@+id/progressbar01"
        android:layout_width="200dp"
        android:layout_height="200dp"
        app:roundProgressColor="#FF0000"
        app:roundWidth="2dp"
        app:textColor="#FF0000"
        app:style="FILL"
        android:padding="30dp"
        app:textSize="20dp"/>

</LinearLayout>
复制代码

Activity代码如下：

public class PaintActivity extends AppCompatActivity {

    private CustomProgressBar mCustomProgressBar;
    private CustomProgressBar mCustomProgressBar01;
    private int progress;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_paint);
        mCustomProgressBar = (CustomProgressBar)this.findViewById(R.id.progressbar);
        mCustomProgressBar.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                new Thread(new Runnable() {


                    @Override
                    public void run() {
                        progress = 0;
                        while (progress <= 100) {
                            progress += 2;
                            mCustomProgressBar.setProgress(progress);
                            try {
                                Thread.sleep(100);
                            } catch (InterruptedException e) {
                                e.printStackTrace();
                            }
                        }
                    }
                }).start();
            }
        });


        mCustomProgressBar01 = (CustomProgressBar)this.findViewById(R.id.progressbar01);
        mCustomProgressBar01.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                new Thread(new Runnable() {


                    @Override
                    public void run() {
                        progress = 0;
                        while (progress <= 100) {
                            progress += 2;
                            mCustomProgressBar01.setProgress(progress);
                            try {
                                Thread.sleep(100);
                            } catch (InterruptedException e) {
                                e.printStackTrace();
                            }
                        }
                    }
                }).start();
            }
        });
    }
}
复制代码

这样就完成了一个自定义的进度条控件，并且在onDraw方法中使用Paint将界面绘制出来。读者可以自行实践一把，加深对Paint的理解。

weixin_34032792
关注
Android自定义控件（一）自绘控件
lanyeming2012的专栏
07-11 1013
由于公司项目的需求，需要绘制一条竖直的间断线作为分割线。这个可坑了爹了，以前只搞过水平的间断线，只要通过shape也可以简单的画出来，但是千万记得把hardwareAccelerated给关了，不然水平的虚线还是会是实线，这个以前也是我趟过的一个坑。那咋办呢，找不到原生的解决方案，不就是一条简单的间断线嘛，还能难住我等程序猿？这个时候，首先联想到的就是自绘控件了。 自绘控件，顾名思义就是
Android开发之绘制自定义进度条 | 渐变进度条 | 斜角进度条的方法
最新发布
xiayiye5的博客
09-14 1964
Android开发之绘制自定义进度条 | 渐变进度条 | 斜角进度条的方法
Android利用Paint自定义View实现进度条控件方法示例
01-05
前言 View的三大流程：测量，布局，绘制，自定义View学的是啥？无非就两种：绘制文字和绘制图像。 我们在上一篇文章《Android绘图之Paint的使用》中学习了Paint的基本用法，但是具体的应用我们还没有实践过。从标题中可知，本文是带领读者使用Paint，自定义一个进度条控件。 效果图 上图就是本文要实现的效果图。 实现过程 既然是自定义控件，本文的该控件是直接继承View，然后重写View的onMeasure和onDraw方法来实现。其中onMeasure主要作用是测量控件的宽/高。而onDraw则是将界面绘制到屏幕上。 从效果的效果上看，我们需要自定义一些属性，如：进度度条的颜
Android自定义控件:圆形进度条
未命名
04-26 1696
在学习了android入门知识后，第一次尝试制作android自定义控件。如图，这是一个圆形进度条。       制作思路如下： 1.利用framelayout形成组合控件，底层ImageView显示背景，中间层ImageView显示进度，最上层TextView显示百分比； 2.其中中间层的ImageView需要做到：随进度改变而截取相对应的区域显示。于是自定义View继承ImageV
Android 自定义View---进度条
weixin_34128237的博客
03-17 129
简介 Android系统内置的控件有时候无法满足我们的效果，这时候可以自定义View。自定义View可以通过几种方式实现： 继承View重写OnDraw方法 继承ViewGroup实现特殊的Layout 继承特定的View(比如TextView) 继承特定的ViewGroup(比如LinearLayout) 本文实现一个通过继承Vie...
Android笔记--简单的自定义View之自绘控件
NO0111的博客
07-15 617
第一步：新建atts.xml文件，自定义属性，不引用系统的属性，在构造器中使用安卓系统自带的API的TypedArray类取出atts.xml中的自定义属性使用（通过映射）。 第二步：新建一个类，继承View类,重写onMeasure（）方法（计算自定义View所需宽高）。 第三步：,重写onDraw（）方法（绘制自定义View）。 这样就可以在UI界面上显示一个自定义的View。 如
Android自定义水平渐变进度条
08-29
只有通过合理的设计和实现，我们才能获得一个美观、实用的进度条控件。 Android自定义水平渐变进度条的优点包括： * 可以自定义进度条的背景颜色和边框颜色 * 可以实现渐变色效果 * 可以根据需要展示进度条当前的...
Android自定义双向进度条的实现代码
08-29
在实现Android自定义双向进度条的实现代码时，需要使用Java语言和Android SDK相关的类库，例如View、Canvas、Paint等。下面是完整的实现代码： 首先，需要创建一个自定义的View类，例如SeekRangeBar，继承自View类...
Android自定义View实现环形进度条的思路与实例
01-20
在Android开发中，自定义View是一项重要的技能，它允许开发者根据特定需求创建独特且具有特色的UI元素。本文将深入探讨如何实现一个环形进度条，该进度条具有可设置宽度的外圆圈、可定制宽度和颜色的圆形进度条及...
Paint画笔的基本使用及自定义进度条
08-29
Paint画笔的基本使用及自定义进度条 资源播客：http://blog.csdn.net/wangwo1991/article/details/77689003
Android自定义进度条（用画笔手动画出来）
景兄弟的博客
10-15 770
package com.example.myprogressbar; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.LinearGradient; import android.graphi
Android 自定义水平渐变进度条的几种实现
hust_twj的专栏
09-22 1万+
先看进度条的效果：具体实现：新建类，继承自View，在onDraw中进行绘制：import android.content.Context; import android.graphics.Canvas; import android.graphics.LinearGradient; import android.graphics.Paint; import android.graphics.Rec
Android自定义View：水平带数字百分比的进度条
飞天神猪
06-08 7733
这个进度条可以反映真实进度，并且完成百分比的文字时随着进度增加而移动的，所在位置也恰好是真实完成的百分比位置，效果如下： 思路如下：第一部分是左侧的蓝色直线，代表已经完成的进度；第二部分是右侧灰色的直线，代表未完成的进度；第三部分是红色的百分比的数字百分比文本，显示当前确切的完成进度。 最关键的部分就是要确定百分比文本的确切位置，这里用了paint的getTextBounds方法，
android 自定义水平进度条
huidawoxiaozi的博客
02-26 2541
随着水平进度长度的变化，百分比文字也跟着进度条的长度在屏幕移动。progressbar的第一层背景要设置成透明的，第二层背景设置一种颜色；这是progressbar的样式代码：     android:id="@+id/probardown" >                                                        
Android自定义进度条——圆角横向进度条
It一zhai男
09-19 8214
Android自定义进度条——圆角横向进度条1.本文将向你介绍自定义进度条的写法，比较简单，但还是有些知识点是需要注意的： invalidate()方法 RectF方法的应用 onMeasure方法的应用 2.原理 画3层圆角矩形，底层为黑色，第二层为灰色，最上一层为进度条颜色，示例图如下： 3.效果图 实现圆角进度条还有很多其他方法，比如在Progress控件里填充圆角图片，通过拉伸图片
android之自定义带文本的圆角进度条
小钟的专栏
05-26 2166
自定义圆角进度条以及颜色渐变的进度条 先上图，给个直观印象 一、先来看看渐变的圆角 private void init(AttributeSet attrs) { mRadius = (int) ((getScreenSize(context).x * 0.6f) / 2);//屏幕的1/4 initPaint(); }
自定义水平进度条
u012968084的博客
09-07 613
这篇文章主要为大家详细介绍了Android自定义水平进度条的圆角进度，具有一定的参考价值，感兴趣的小伙伴们可以参考一下 平时项目中经常用到自定义进度条样式，我们一般实现的也是下面的第一种，至于第二种的圆角进度，网上介绍的资料也不是很多，这里一起展示一下这两种的实现。 下面开始看代码，先从主界面布局开始看起: ? 1 2
Android自定义View之进度条（带进度提示框）
热门推荐
白哥哥的博客
10-21 1万+
Android自定义水平进度条，带当前进度值的提示框
Android自定义View：使用Paint实现进度条控件
"Android利用Paint自定义View实现进度条控件的方法" 在Android开发中，自定义View是一项重要的技能，它可以让我们根据需求定制独特的用户界面组件。本教程将讲解如何使用Paint类来创建一个自定义的进度条控件。首先...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值