简单实现ProgressBar三色图（带有百分比）

实现带有进度百分比的三色图

实现思路：

利用progressBar第二进度，设置不同的进度背景，计算进度比例通过drawText将比例画在各个进度上

上代码：

View：

public class TextProgressBar extends ProgressBar {private Paint mPaint;private String text_first;private String text_sencond;private String text_third;private float firstScale;private float sencondScale;private int firstProgress;private int sencondProgress;public TextProgressBar(Context context) {super(context);}public TextProgressBar(Context context, AttributeSet attrs) {super(context, attrs);initPaint();}public TextProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);}public void initPaint() {mPaint = new Paint();mPaint.setAntiAlias(true);mPaint.setColor(Color.WHITE);mPaint.setTextSize(sp2px(16));}@Overrideprotected synchronized void onDraw(Canvas canvas) {super.onDraw(canvas);if (getMax() == 0) {setVisibility(GONE);}Rect rect = new Rect();mPaint.getTextBounds(text_first, 0, text_first.length(), rect);int y = (getHeight() / 2) - rect.centerY();float AllWithOutFirst = getWidth() - (getWidth() * firstScale);if (firstProgress != 0) {int x1 = (int) (getWidth() * firstScale - rect.width()) / 2;canvas.drawText(text_first, x1, y, mPaint);}if (firstProgress == getMax()) {return;}if (sencondProgress == getMax()) {mPaint.getTextBounds(text_sencond, 0, text_sencond.length(), rect);int x2 = (int) (AllWithOutFirst - rect.width()) / 2 + (int) ((getWidth() * firstScale));canvas.drawText(text_sencond, x2, y, mPaint);return;}if (firstProgress <= sencondProgress) {float secondWithOutFirst = (getWidth() * sencondScale) - (getWidth() * firstScale);if (sencondProgress != 0) {mPaint.getTextBounds(text_sencond, 0, text_sencond.length(), rect);int x2 = (int) (secondWithOutFirst - rect.width()) / 2 + (int) ((getWidth() * firstScale));canvas.drawText(text_sencond, x2, y, mPaint);}mPaint.getTextBounds(text_third, 0, text_third.length(), rect);int x3 = (int) (AllWithOutFirst - (secondWithOutFirst) - rect.width()) / 2 + (int) (getWidth() * firstScale) + (int) (secondWithOutFirst);canvas.drawText(text_third, x3, y, mPaint);} else {mPaint.getTextBounds(text_third, 0, text_third.length(), rect);int x3 = (int) (AllWithOutFirst - rect.width()) / 2 + (int) ((getWidth() * firstScale));canvas.drawText(text_third, x3, y, mPaint);}}@Overrideprotected void onSizeChanged(int w, int h, int oldw, int oldh) {super.onSizeChanged(w, h, oldw, oldh);firstProgress = firstProgress > getMax() ? getMax() : (firstProgress < 0 ? 0 : firstProgress);sencondProgress = sencondProgress > getMax() ? getMax() : (sencondProgress < 0 ? 0 : sencondProgress);super.setProgress(firstProgress);super.setSecondaryProgress(sencondProgress);firstScale = firstProgress / (float) getMax();text_first = Math.round((firstScale * 100)) + "%";sencondScale = sencondProgress / (float) getMax();text_sencond = Math.round(((sencondProgress - firstProgress) / (float) getMax() * 100)) + "%";if (firstProgress <= sencondProgress) {text_third = Math.round(((getMax() - (sencondProgress)) / (float) getMax() * 100)) + "%";} else {text_third = Math.round(((getMax() - (firstProgress)) / (float) getMax() * 100)) + "%";}}public void setSecondaryProgress(int secondaryProgress) {sencondProgress = secondaryProgress;}public void setProgress(int progress) {firstProgress = progress;}public int sp2px(float spValue) {DisplayMetrics dm = getContext().getApplicationContext().getResources().getDisplayMetrics();float scaledDensity = dm.scaledDensity;return (int) (spValue * scaledDensity + 0.5f);}
}

XML：

<com.example.***.myapplication.view.TextProgressBarandroid:id="@+id/progress"style="?android:attr/progressBarStyleHorizontal"android:layout_width="match_parent"android:layout_height="30dp"android:layout_margin="10dp"android:progressDrawable="@drawable/progressbar" />

@drawable/progressbar：↓↓↓

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"><item android:id="@android:id/background" >   //定义背景色<shape><corners android:radius="20dip" /><gradient android:angle="270" android:centerColor="#c7c7c7"android:centerY="0.75" android:endColor="#c7c7c7"android:startColor="#c7c7c7" /></shape></item><item android:id="@android:id/secondaryProgress">   //定义第二进度<clip><shape><corners android:radius="20dip" /><gradient android:angle="270" android:centerColor="#99CC99"android:centerY="0.75" android:endColor="#99CC99"android:startColor="#99CC99" /></shape></clip></item><item android:id="@android:id/progress">  //定义第一进度<clip><shape><corners android:radius="20dip" /><gradient android:angle="270" android:centerColor="#4abbfd"android:centerY="0.75" android:endColor="#4abbfd"android:startColor="#4abbfd" /></shape></clip></item>
</layer-list>

使用：

TextProgressBar progressBar = (TextProgressBar) findViewById(R.id.progress);
progressBar.setSecondaryProgress(100);
progressBar.setProgress(50);
progressBar.setMax(200);

效果：

简单实现ProgressBar三色图（带有百分比）相关推荐

Flash Builder4.7极其简单破解方法-三步搞定（亲测）
资讯类型: 转载来源页面: http://weibo.com/2101024913/yvmR0D9Df 资讯原标题: 资讯原作者: 丿卓越丶星辰翻译词数: 词我的评论: 对这篇文你有啥看法,跟贴 ...
分布式锁简单入门以及三种实现方式介绍(滴滴)
很多小伙伴在学习Java的时候,总是感觉Java多线程在实际的业务中很少使用,以至于不会花太多的时间去学习,技术债不断累积!等到了一定程度的时候对于与Java多线程相关的东西就很难理解,今天需要探讨的 ...
Group Box组合框的简单使用 [大三TJB_708]
http://blog.csdn.net/misskissc/article/details/9317783 Group Box组合框的简单使用 [大三TJB_708] 转载于:https://www ...
【OGG】OGG简单配置双向复制(三)
[OGG]OGG简单配置双向复制(三) 一.1 BLOG文档结构图一.2 前言部分一.2.1 导读各位技术爱好者,看完本文后,你可以掌握如下的技能,也可以学到一些其它你所不知道的知识,~O(∩_ ...
上升了百分之几怎么算_如何简单计算同期上升下降的百分比？
如何简单计算同期上升下降的百分比? 234游戏网友提出于 2019-07-24 01:19:36 我的数学一直以来不太好,所以都有些不好意思提这个问了,但现在工作中有些要用到才行,所以,我想知道如何 ...
Flash Builder4.7极其简单破解方法-三步搞定
Flash Builder4.7极其简单破解方法-三步搞定(亲测) 原方法适用于4.6版本,同样方法4.7完美破解,不敢独享具体步骤如下: 1.到Adobe官网下载FlashBuilder 4.6, ...
建网站的最简单方法（三分钟带后台）
建网站的最简单方法(三分钟带后台) 准备材料服务器或者本地环境安装过程准备材料织梦二次开发模板或者Ecshop二次开发模板等(我以织梦为例讲解) 如果是本地需要下载ComsenzEXP或者Wa ...
NSString简单细说（三）—— NSString初始化
版本记录版本号时间 V1.0 2017.04.19 前言前面我写了简单细说(一)和简单细说(二),一中主要是介绍了NSString的主要API架构,二中主要是对21种初始化方法进行了介绍了,都是 ...
分布式锁简单入门以及三种实现方式介绍
分布式锁简单入门以及三种实现方式介绍 2018年01月11日 21:16:28 徐刘根阅读数:37912 标签: 分布式分布式锁高并发更多个人分类: 集群分布式版权声明:本文为博主原创文章 ...

简单实现ProgressBar三色图（带有百分比）

实现带有进度百分比的三色图

实现思路：

上代码：

View：

XML：

使用：

效果：

简单实现ProgressBar三色图（带有百分比）相关推荐

最新文章

热门文章