Android自定义控件之圆形进度条Android自定义控件之-圆形进度条

Android自定义控件之-圆形进度条

先上图:

填充的

环形的

贴代码不废话:

** CircleProgressBar.java **

package com.xiaolei.xiaoui;

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.util.AttributeSet;
import android.view.View;

/**
 * Created by xiaolei on 2017/3/23.
 */

public class CircleProgressBar extends View
{
    private int height;
    private int width;
    private Paint mPaint;
    private int strokeWidth = 5;//线条宽度
    private RectF rectF;
    private int normalColor = Color.parseColor("#A5A5A5");//普通的颜色
    private int progressColor = Color.parseColor("#FA9025");//已经走了的进度条颜色
    private int textColor = normalColor;//文字颜色
    private float textSize = 20;//文字大小
    private int progress = 0;//进度条
    private String centerText = "100%";//中心填充文字
    private Paint fontPaint = null;
    private Paint.Style progress_style = Paint.Style.STROKE;//填充式还是环形式
    
    public CircleProgressBar(Context context)
    {
        this(context, null);
    }

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

    public CircleProgressBar(Context context, AttributeSet attrs, int defStyleAttr)
    {
        super(context, attrs, defStyleAttr);
        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.CircleProgressBar);
        textSize = array.getDimension(R.styleable.CircleProgressBar_text_size,textSize);
        textColor = array.getColor(R.styleable.CircleProgressBar_text_color,textColor);
        centerText = array.getString(R.styleable.CircleProgressBar_text)==null?centerText:array.getString(R.styleable.CircleProgressBar_text);
        strokeWidth = array.getInteger(R.styleable.CircleProgressBar_stroke_width,strokeWidth);
        normalColor = array.getColor(R.styleable.CircleProgressBar_normal_color,normalColor);
        progressColor = array.getColor(R.styleable.CircleProgressBar_progress_color,progressColor);
        progress = array.getInt(R.styleable.CircleProgressBar_progress,progress);
        progress_style = array.getInt(R.styleable.CircleProgressBar_progress_style,0)==0?Paint.Style.STROKE:Paint.Style.FILL;
        
        array.recycle();
        initPaint();
    }

    // 2.初始化画笔
    private void initPaint()
    {
        mPaint = new Paint();
        mPaint.setColor(normalColor);       //设置画笔颜色
        mPaint.setAntiAlias(true);
        mPaint.setStyle(progress_style);  //设置画笔模式为描边
        mPaint.setStrokeWidth(strokeWidth);         //设置画笔宽度为10px
        
        fontPaint = new Paint();
        fontPaint.setTextSize(textSize);
        fontPaint.setAntiAlias(true);
        fontPaint.setColor(textColor);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
    {
        height = MeasureSpec.getSize(heightMeasureSpec);
        width = MeasureSpec.getSize(widthMeasureSpec);

        if (height > width)//高大于宽的情况
        {
            rectF = new RectF(strokeWidth, (height / 2 - width / 2) + strokeWidth, width - strokeWidth, (height / 2 + width / 2) - strokeWidth);
        } else if (width > height)//宽大于高的情况
        {
            rectF = new RectF((width / 2 - height / 2) + strokeWidth, strokeWidth, (width / 2 + height / 2) - strokeWidth, height - strokeWidth);
        } else//宽等于高的情况
        {
            rectF = new RectF(strokeWidth, strokeWidth, width - strokeWidth, height - strokeWidth);
        }
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    Paint.FontMetrics fontMetrics = null;

    @Override
    protected void onDraw(Canvas canvas)
    {
        super.onDraw(canvas);
        mPaint.setColor(normalColor);
        if(progress < 360)
        {
            canvas.drawArc(rectF, 270+progress, 360 - progress, progress_style== Paint.Style.FILL, mPaint);
        }
        
        mPaint.setColor(progressColor);
        canvas.drawArc(rectF, 270, progress, progress_style== Paint.Style.FILL, mPaint);
        
        fontMetrics = fontPaint.getFontMetrics();
        float textWidth = fontPaint.measureText(centerText);
        float textHeight = fontPaint.ascent() + fontPaint.descent();
        canvas.drawText(centerText, width / 2 - textWidth / 2, height / 2 - textHeight / 2, fontPaint);
    }
    
    
    /**
     * 更新界面
     * @param progress
     * @param text
     */
    public void update(int progress,String text)
    {
        this.progress = progress;
        this.centerText = text;
        postInvalidate();
    }
    
}

** declare-styleable **

    <declare-styleable name="CircleProgressBar">
        <!--文字大小-->
        <attr name="text_size" format="dimension"/>
        <!--文字颜色-->
        <attr name="text_color" format="color"/>
        <!--文本-->
        <attr name="text" format="string"/>
        <!--变宽宽度-->
        <attr name="stroke_width" format="integer"/>
        <!--未走的进度的颜色-->
        <attr name="normal_color" format="color"/>
        <!--已走的进度的颜色-->
        <attr name="progress_color" format="color"/>
        <!--已走的进度 0-360 -->
        <attr name="progress" format="integer"/>
        <!--类型 填充型,还是环形-->
        <attr name="progress_style" format="enum">
            <enum name="STROKE" value="0"/>
            <enum name="FILL" value="1"/>
        </attr>
    </declare-styleable>

使用方式:

<com.xiaolei.xiaoui.CircleProgressBar
        android:id="@+id/circleProgressBar"
        android:layout_width="300dp"
        android:layout_height="300dp"
        app:stroke_width="20"
        app:text_color="#ff0000"
        app:text_size="30sp"
        app:progress_style="STROKE"
        app:normal_color="#A5A5A5"
        app:progress_color="#FA9025"
        app:progress="60"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"/>

** MainActivity.java **

CircleProgressBar progressBar = (CircleProgressBar) findViewById(R.id.circleProgressBar);
........
while (true)
{
    Thread.sleep(30);
    progress ++;
    progressBar.update(progress,progress*100/360+"%");
    if(progress == 360)
    {
        progress = 0;
    }
}

大功告成(' _ ')

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏项勇

笔记51 | Android自定义View(二)

1356
来自专栏Python疯子

UILabel在开发中的常用功能总结

在项目开发中,我们经常会遇到在这样情形: 1、在一个UILabel 使用不同的颜色或不同的字体来体现字符串 在iOS 6 以后我们可以很轻松的实现这一点,官...

842
来自专栏林冠宏的技术文章

android view 中各函数的执行顺数

这个就好像是 activity 的生命周期一样,如果我们要使用自定义的 view,那么就很有必要了解一下 view 的那些能够被重写的函数的执行顺序。废话不多讲...

1868
来自专栏吴小龙同學

Android 画布Canvas

写完 Android 画笔Paint,自然少不了Canvas画布,本文延续上篇风格,一一来过Canvas API。 绘制方法 以drawXXX为主的绘制方...

41410
来自专栏Android Note

Android – 环形进度条

1035
来自专栏androidBlog

常用的自定义View例子一(流布式布局)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gdutxiaoxu/article/details/...

491
来自专栏Android Note

Android – Path画搜索动画

1453
来自专栏Android先生

android自定义view(自定义数字键盘)

至此,我们写的差不多了,然后就是要提供一个接口,对外开放,方便用的时候调用,获取到数字或者其他信息:

952
来自专栏Android开发指南

15.瀑布流、测量

2857
来自专栏指尖下的Android

安卓运动圆环自定义View

记得这个东西原来有个同事问过我,当时正在自学自定义View和属性动画这一块,对这个功能也没有写过,所以就google了一下,发了几个类似效果的github项目给...

992

扫码关注云+社区