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 条评论
登录 后参与评论

相关文章

来自专栏Android干货

自定义控件:数独游戏(一)

3308
来自专栏项勇

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

1516
来自专栏向治洪

AnimatedPathView实现自定义图片标签

老早用过小红书app,对于他们客户端笔记这块的设计非常喜欢,恰好去年在小红书的竞争对手公司,公司基于产品的考虑和产品的发展,也需要将app社交化,于是在社区分享...

20610
来自专栏Android相关

LinearLayout.onMeasure-声明变量

mTotalLength:表示所有子View所需要的高度 maxWidth:表示这个LinearLayout的宽度,最后设置宽度的时候用到的 childSt...

1042
来自专栏向治洪

自定义圆角和园边的实现

本来想在网上找个圆角的例子看一看,不尽人意啊,基本都是官方的Demo的那张原理图,稍后会贴出。于是自己自定义了个View,实现图片的圆角以及圆形效果。效果图: ...

1977
来自专栏Hellovass 的博客

手动测量 View 的宽高

手动调用 View 的 measure(int widthMeasureSpec,int heightMeasureSpec) 方法来得到 View 的宽高。

1676
来自专栏肖蕾的博客

Android自定义控件之九宫格

1725
来自专栏移动开发

ZoomLoadView 自定义view 可以做app的启动首页效果

虽然这个控件类似的功能github上也有,但还是自己实现了下. 这个控件可以保持图片的比例去填充view,如果按图片比例计算出的大小超出view的大小,会展...

811
来自专栏Android知识点总结

Android自定义控件之局部图片放大镜--BiggerView

1582
来自专栏Android开发指南

15.瀑布流、测量

2967

扫码关注云+社区