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

Stella981
• 阅读 459

#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;
    }
}

##大功告成(' _ ')

点赞
收藏
评论区
推荐文章
Easter79 Easter79
3年前
Vue+Flask实现简单的登录验证跳转
文件位置:!输入图片说明(https://static.oschina.net/uploads/img/201711/27171542_g7Yr.png"在这里输入图片标题")login.html<!DOCTYPEhtml<htmllang"en"<head<metacharset
Stella981 Stella981
3年前
Fiddle设置iphone抓包
_注意:保证手机和电脑在一个网络上_一,设置Fiddler!输入图片说明(https://static.oschina.net/uploads/img/201707/27100350_ckfa.png"在这里输入图片标题")!输入图片说明(https://static.oschina.net/uploads/img/201707
Stella981 Stella981
3年前
Intellij idea或者Android Studio实用Live_Templates好用模板整理
Live\_Templates的作用是自动补全代码:自定义补全代码:单例模式:sin!输入图片说明(https://static.oschina.net/uploads/img/201707/17114328_kR84.png"在这里输入图片标题")Templatetext:privatestatic
Stella981 Stella981
3年前
Canvas
Canvas04柱状图!输入图片说明(https://static.oschina.net/uploads/img/201707/04223024_wxwr.png"在这里输入图片标题")代码如下:<!DOCTYPEhtml<htmllang"zhCN"<head<metacharset"UTF8"<met
Stella981 Stella981
3年前
How Linux Works
!(https://static.oschina.net/uploads/img/201705/30192005_FetF.jpg"在这里输入图片标题")(一)HowtheLinuxKernelBoots1.Themachine’sBIOSorbootfirmwa
Stella981 Stella981
3年前
Alamofire4.x开源代码分析(一)使用方法
!输入图片说明(https://static.oschina.net/uploads/img/201706/28090437_aIT1.png"在这里输入图片标题")本着了解框架的实现思路和学习Swift的目的开启本系列的博客.本系列参考Alamofire(https://www.oschina.net/action/GoToLink?urlh
Easter79 Easter79
3年前
SpringMVC vs Struts2
SpringMVCvsStruts2S性能!输入图片说明(https://static.oschina.net/uploads/img/201703/27180357_LUj5.png"在这里输入图片标题")MVC框架性能比较几篇文章:Link(https://www.oschina.net/action/GoT
Wesley13 Wesley13
3年前
PHP 与 GO
PHP!输入图片说明(https://static.oschina.net/uploads/img/201608/22112754_GEtW.png"在这里输入图片标题")输出json!输入图片说明(https://static.oschina.net/uploads/img/201608/22112825_n
Stella981 Stella981
3年前
Delivery Pipeline
deliverypipeline!输入图片说明(https://static.oschina.net/uploads/img/201702/04110334_cl3u.png"在这里输入图片标题")下面这个是netflix的部署流程:!输入图片说明(https://static.oschina.net/uploads/img/2017
Stella981 Stella981
3年前
Android性能优化典范
!android_perf_patterns_season_2(https://static.oschina.net/uploads/img/201703/15164801_qTQQ.png)Google前几天刚发布了Android性能优化典范第2季(https://www.oschina.net/action/GoToLink?urlht