Android自定义View实现水平带数字百分比进度条
作者:热木星 发布时间:2022-03-17 02:47:06
标签:Android,进度条
这个进度条可以反映真实进度,并且完成百分比的文字时随着进度增加而移动的,所在位置也恰好是真实完成的百分比位置,效果如下:
思路如下:第一部分是左侧的蓝色直线,代表已经完成的进度;第二部分是右侧灰色的直线,代表未完成的进度;第三部分是红色的百分比的数字百分比文本,显示当前确切的完成进度。
最关键的部分就是要确定百分比文本的确切位置,这里用了paint的getTextBounds方法,得到文本的宽高,然后再精确确定它的位置。
view代码如下:
public class NumberProgressView extends View {
/**
* 进度条画笔的宽度(dp)
*/
private int paintProgressWidth = 3;
/**
* 文字百分比的字体大小(sp)
*/
private int paintTextSize = 20;
/**
* 左侧已完成进度条的颜色
*/
private int paintLeftColor = 0xff67aae4;
/**
* 右侧未完成进度条的颜色
*/
private int paintRightColor = 0xffaaaaaa;
/**
* 百分比文字的颜色
*/
private int paintTextColor = 0xffff0077;
/**
* Contxt
*/
private Context context;
/**
* 主线程传过来进程 0 - 100
*/
private int progress;
/**
* 得到自定义视图的宽度
*/
private int viewWidth;
/**
* 得到自定义视图的Y轴中心点
*/
private int viewCenterY;
/**
* 画左边已完成进度条的画笔
*/
private Paint paintleft = new Paint();
/**
* 画右边未完成进度条的画笔
*/
private Paint paintRight = new Paint();
/**
* 画中间的百分比文字的画笔
*/
private Paint paintText = new Paint();
/**
* 要画的文字的宽度
*/
private int textWidth;
/**
* 画文字时底部的坐标
*/
private float textBottomY;
/**
* 包裹文字的矩形
*/
private Rect rect = new Rect();
/**
* 文字总共移动的长度(即从0%到100%文字左侧移动的长度)
*/
private int totalMovedLength;
public NumberProgressView(Context context, AttributeSet attrs) {
super(context, attrs);
this.context = context;
// 构造器中初始化数据
initData();
}
/**
* 初始化数据
*/
private void initData() {
//设置进度条画笔的宽度
int paintProgressWidthPx = Utils.dip2px(context, paintProgressWidth);
//设置百分比文字的尺寸
int paintTextSizePx = Utils.sp2px(context, paintTextSize);
// 已完成进度条画笔的属性
paintleft.setColor(paintLeftColor);
paintleft.setStrokeWidth(paintProgressWidthPx);
paintleft.setAntiAlias(true);
paintleft.setStyle(Style.FILL);
// 未完成进度条画笔的属性
paintRight.setColor(paintRightColor);
paintRight.setStrokeWidth(paintProgressWidthPx);
paintRight.setAntiAlias(true);
paintRight.setStyle(Style.FILL);
// 百分比文字画笔的属性
paintText.setColor(paintTextColor);
paintText.setTextSize(paintTextSizePx);
paintText.setAntiAlias(true);
paintText.setTypeface(Typeface.DEFAULT_BOLD);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
getWidthAndHeight();
}
/**
* 得到视图等的高度宽度尺寸数据
*/
private void getWidthAndHeight() {
//得到包围文字的矩形的宽高
paintText.getTextBounds("000%", 0, "000%".length(), rect);
textWidth = rect.width();
textBottomY = viewCenterY + rect.height() / 2;
//得到自定义视图的高度
int viewHeight = getMeasuredHeight();
viewWidth = getMeasuredWidth();
viewCenterY = viewHeight / 2;
totalMovedLength = viewWidth - textWidth;
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//得到float型进度
float progressFloat = progress / 100.0f;
//当前文字移动的长度
float currentMovedLentgh = totalMovedLength * progressFloat;
//画左侧已经完成的进度条,长度为从Veiw左端到文字的左侧
canvas.drawLine(0, viewCenterY, currentMovedLentgh, viewCenterY, paintleft);
//画右侧未完成的进度条,这个进度条的长度不是严格按照百分比来缩放的,因为文字的长度会变化,所以它的长度缩放比例也会变化
if (progress < 10) {
canvas.drawLine(currentMovedLentgh + textWidth * 0.5f, viewCenterY, viewWidth, viewCenterY, paintRight);
} else if (progress < 100) {
canvas.drawLine(currentMovedLentgh + textWidth * 0.75f, viewCenterY, viewWidth, viewCenterY, paintRight);
} else {
canvas.drawLine(currentMovedLentgh + textWidth, viewCenterY, viewWidth, viewCenterY, paintRight);
}
//画文字(注意:文字要最后画,因为文字和进度条可能会有重合部分,所以要最后画文字,用文字盖住重合的部分)
canvas.drawText(progress + "%", currentMovedLentgh, textBottomY, paintText);
}
/**
* @param progress 外部传进来的当前进度
*/
public void setProgress(int progress) {
this.progress = progress;
invalidate();
}
}
调用者activity的代码,设置进度条的进度:
public class NumberProgressBarActivity extends Activity {
protected static final int WHAT_INCREASE = 1;
private NumberProgressView np_numberProgressBar;
private int progress;
private Handler handler = new Handler() {
public void handleMessage(android.os.Message msg) {
progress++;
np_numberProgressBar.setProgress(progress);
handler.sendEmptyMessageDelayed(WHAT_INCREASE, getRadomNumber(50, 200));
if (progress >= 100) {
handler.removeMessages(WHAT_INCREASE);
}
}
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_number_progress_bar);
np_numberProgressBar = (NumberProgressView) findViewById(R.id.np_numberProgressBar);
Button btn_numberProgressBar = (Button) findViewById(R.id.btn_numberProgressBar);
btn_numberProgressBar.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
increase();
}
});
}
private void increase() {
progress = 0;
np_numberProgressBar.setProgress(0);
handler.removeMessages(WHAT_INCREASE);
handler.sendEmptyMessage(WHAT_INCREASE);
}
/**
* 得到两个整数之间的一个随机数
*
* @param start 较小的数
* @param end 较大的数
* @return
*/
public int getRadomNumber(int start, int end) {
return (int) (start + Math.random() * (end - start));
}
}
工具方法:
/**
* 将dip或dp值转换为px值,保证尺寸大小不变
*/
public static int dip2px(Context context, float dipValue) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (dipValue * scale + 0.5f);
}
/**
* 将sp值转换为px值,保证文字大小不变
*/
public static int sp2px(Context context, float spValue) {
final float fontScale = context.getResources().getDisplayMetrics().scaledDensity;
return (int) (spValue * fontScale + 0.5f);
}
布局:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.example.viewdemo.view.NumberProgressView
android:id="@+id/np_numberProgressBar"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:layout_margin="20dp"
android:background="#33890075"
/>
<Button
android:id="@+id/btn_numberProgressBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="开始"/>
</LinearLayout>
来源:https://blog.csdn.net/qq_27102463/article/details/51612999
0
投稿
猜你喜欢
- 需要读取excel数据转换成json数据,写了个测试功能,转换正常:JSON转换:org.json.jar 测试类:
- 逆转交替合并两个链表,即从一个链表的尾指针指向另一个链表的尾指针,依次逆转交替进行合并。下面就通过实例来详细的介绍该逆转交替合并两个链表的思
- 一、算术运算符运算符:常见的±*/等表达式:运算符连接起来符合java语法的式子,比如a+b算术运算符:+ - * / %注:要想得到小数,
- 本人一般也很少上传照片之类的女生喜欢玩的东西,但是偶尔还是要传一传的,为什么?因为现在与各种以前的朋友同学都很少联系,但是只要一发有个人照片
- 过滤器实现过滤器需要实现 javax.servlet.Filter 接口。重写三个方法。其中 init() 方法在服务启动时执行,destr
- 启动协程的基本方式1.GlobalScope.launch代码示例:fun testGlobalScope() {  
- JAVA可以通过反射获取成员变量和静态变量的名称,局部变量就不太可能拿到了。public class Test {public static
- 今天给大家介绍一下如何用Java swing实现五子棋的开发即用Java开发图形界面程序五子棋,代码由于太多,只贴部分,最下面会附上下载地址
- 本文实例讲述了Android基于TextView属性android:ellipsize实现跑马灯效果的方法。分享给大家供大家参考,具体如下:
- 前言Android Studio是Google开发的一款面向Android开发者的IDE,支持Windows、Mac、Linux等操作系统,
- 状态分类在Hibernate框架中,为了管理持久化类,Hibernate将其分为了三个状态:瞬时态(Transient Object)持久态
- Shiro介绍Shiro是一款安全框架,主要的三个类Subject、SecurityManager、RealmSubject:表示当前用户S
- 本文实例讲述了获取Android系统唯一识别码的方法。分享给大家供大家参考。具体如下:在计算机上,我们习惯用MAC地址来标志一台计算机。在A
- 前面已经把java io的主要操作讲完了 这一节我们来说说关于java io的其他内容 Serializable序列化 实例1:对象的序列化
- 一些Java编程老手在做CodeReview时,都会告诉其他人,使用HashMap时建议指定容量大小,原因是指定容量后,代码性能会更好一些。
- 前言在上一篇中,我们初步了解了Sentinel的基本概念,以及其有关限流方面的基础理论,本篇将通过简单的与框架进行整合,看看Sentinel
- cpu是时分(time division)的,操作系统里有很多线程,每个线程的运行时间由cpu决定,cpu会分给每个线程一个时间片,时间片是
- 〇、正则表达式的基本语法符号若只简单匹配固定字符串,则无需任何修饰符,例如:需要匹配字符串 77,则可直接写:new Regex(
- 某少年宫引进了一批机器人小车。可以接受预先输入的指令,按指令行动。小车的基本动作很简单,只有3种:左转(记为L),右转(记为R),向前走若干
- 前提在日常使用SpringMVC进行开发的时候,有可能遇到前端各种类型的请求参数,这里做一次相对全面的总结。SpringMVC中处理控制器参