android自定义进度条百分比跟着走,Android自定义View实现水平带数字百分比进度条...

这个进度条可以反映真实进度,并且完成百分比的文字时随着进度增加而移动的,所在位置也恰好是真实完成的百分比位置,效果如下:

5f41255dad1bd4d8ea89b190eff0bf60.gif

思路如下:第一部分是左侧的蓝色直线,代表已经完成的进度;第二部分是右侧灰色的直线,代表未完成的进度;第三部分是红色的百分比的数字百分比文本,显示当前确切的完成进度。

最关键的部分就是要确定百分比文本的确切位置,这里用了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);

}

布局:

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

android:id="@+id/np_numberProgressBar"

android:layout_width="wrap_content"

android:layout_height="100dp"

android:layout_margin="20dp"

android:background="#33890075"

/>

android:id="@+id/btn_numberProgressBar"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="开始"/>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/559906.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

android动画view上移,在Android开发中使用View制作一个引导动画

在Android开发中使用View制作一个引导动画发布时间&#xff1a;2020-11-20 16:46:16来源&#xff1a;亿速云阅读&#xff1a;98作者&#xff1a;Leah这篇文章将为大家详细讲解有关在Android开发中使用View制作一个引导动画&#xff0c;文章内容质量较高&#xff0c;因此小编分享…

linux 启动 x,(1)linux启动过程

head.S是linux启动后的第一个文件&#xff0c;主要完成以下功能&#xff1a;1、检查处理器信息&#xff0c;并保存&#xff1b;2、检查平台号&#xff0c;并保存&#xff1b;3、创建页表&#xff0c;并开启MMU功能&#xff1b;4、对内核data section、bbs section作调整和初始化…

android 刷新view位置,Android View刷新机制实例分析

本文实例讲述了Android View刷新机制。分享给大家供大家参考&#xff0c;具体如下&#xff1a;一、总体说明在Android的布局体系中&#xff0c;父View负责刷新、布局显示子View&#xff1b;而当子View需要刷新时&#xff0c;则是通知父View来完成。二、代码分析1).ViewGroup的a…

android 滚动到底部,Android 控制ScrollView滚动到底部(示例代码)

在开发中&#xff0c;我们经常需要更新列表&#xff0c;并将列表拉倒最底部&#xff0c;比如发表微博&#xff0c;聊天界面等等,这里有两种办法,第一种&#xff0c;使用scrollTo():public static void scrollToBottom(final View scroll, final View inner) {Handler mHandler …

html整体引入js,html页面用js引入js的方式

最原始的是用script便签&#xff1a;1. 使用js打印这个便签&#xff1a;当然这也可以动态引入css以及其他html元素。2. 使用dom的api添加script元素&#xff1a;jQuery中封装了这种方式&#xff0c;并贴心的加入了回调&#xff1a;$.getScript(url,callback(res, status));简单…

vivo android p 机型,vivo X21成全球首批Android P适配机型!vivo :不小心就秀实力了

原标题&#xff1a;vivo X21成全球首批Android P适配机型&#xff01;vivo :不小心就秀实力了近日&#xff0c;2018谷歌I/O大会正式召开&#xff0c;会上发布了大家期待已久的Android P开发者预览版&#xff0c;给我们展示了众多全新特性&#xff0c;其中AI功能的进化让人十分眼…

android继承父类的界面,Android调用父类方法,进行子界面刷新

偶然遇到一个需求、有几个主界面需要获取消息的未读数量由于不是所有类都调用、调用的次数又比较多&#xff0c;整的不上不下的1、对于方法调用次数比较少的 推荐广播广播的方法很方便、但是一堆的消息接收、发送很模式化2、对于较多的方法调用 个人建议直接写共用类中此方法通…

html中依次展开的搜索框,jQuery+CSS3动画展开收缩搜索框特效

js代码function searchToggle(obj, evt){var container $(obj).closest(.search-wrapper);if(!container.hasClass(active)){container.addClass(active);evt.preventDefault();}else if(container.hasClass(active) && $(obj).closest(.input-holder).length 0){con…

直接修改html文本页面没变化,VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析...

本文实例讲述了VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法。分享给大家供大家参考&#xff0c;具体如下&#xff1a;业务场景我们在使用vue 编写 代码时&#xff0c;我们有一个 多行文本框控件&#xff0c;希望在页面点击一个按钮 在 文本框焦点位置插入一个…

html.partial传递模型,Html.Partial和Html. RenderPartial用法

Html.Partial("MyView")Renders the "MyView" view to an MvcHtmlString.Html.Partial通常呈现的是静态内容&#xff0c;如果不指定的Partial方法中绑定的参数&#xff0c;默认为宿主页面的Model类型&#xff0c;因此如果Partial页面中的Model和主页面的Mo…

live2d内嵌html,博客(网页)添加 Live2D 看板娘

Live2D demoLive2D 看板娘插件 (https://www.fghrsh.net/post/123.html) 的前端 HTML 源码基于 API 加载模型&#xff0c;支持 定制 提示语增加 参数设置 一键定制看板娘&#xff0c;易用性增加 看板娘样式设置&#xff0c;可直接设置宽高度等支持多种一言接口&#xff0c;基于…

计算机启动进入不了桌面图标,电脑开机后不显示桌面图标如何通过修改注册表解决问题...

‍近来有用户发现电脑开机后不显示桌面图标&#xff0c;一般遇到这样的问题&#xff0c;我们会进入任务管理器结束explorer.exe资源管理器进程&#xff0c;再重新启动来解决这个问题。但是&#xff0c;如果这样还无法解决不显示电脑系统桌面图标的问题&#xff0c;那么可以按下…

药学专业报计算机一级有用吗,全网友泣泪劝阻!高考结束之后,什么专业千万不能报?...

原标题&#xff1a;全网友泣泪劝阻&#xff01;高考结束之后&#xff0c;什么专业千万不能报&#xff1f;本文来源&#xff1a;魔都囡啊呀呀呀&#xff0c;高考终于结束啦&#xff0c;大家可以轻松下啦&#xff1f;不过高考的硝烟还没消散&#xff0c;接下来的一个问题就是非常…

如何去掉html body里的 nbsp,html的空格和nbsp怎么去除?

同楼主&#xff0c;这个问题我也碰到了。用html_parser好像不也行replace也不解决不完全&#xff0c;我希望把所有数据(房间类型&#xff0c;面积&#xff0c;位置&#xff0c;详细位置&#xff0c;发布时间&#xff0c;价格)放一行最后没办法只能这样了import requests ##导入…

计算机网络原理04741教学课件,【精编】04741计算机网络原理自考本科2018年4月课件.ppt...

【精编】04741计算机网络原理自考本科2018年4月课件.ppt二、路由选择 5、常用静态路由选择算法的基本内容 6、常见的动态路由选择算法 距离矢量路由算法、链路状态路由算法 7、常用动态路由选择算法的基本内容 8、移动主机的路由选择 9、广播路由选择 10、多播路由选择 第五章 …

计算机数据库管理基本知识,2015年计算机四级考试《数据库技术》基础知识:概念篇...

2015年计算机四级考试《数据库技术》基础知识&#xff1a;概念篇信息与数据1、 信息、物质、能量是组成客观世界并促进社会发展的三大基本要素;2、 信息(Information)--是客观世界事物的存在方式和运动状态的反映&#xff0c;是对事物之间相互联系、相互作用的描述。信息具有可…

coffeescript html5,HTML5——前端预处理技术(Less、Sass、CoffeeScript)

一、Less1.1、概要Less是一种动态样式语言&#xff0c;Less 是一门 CSS 预处理语言&#xff0c;它扩展了 CSS 语言&#xff0c;增加了变量、Mixin、函数等特性&#xff0c;使 CSS 更易维护和扩展。Less 将 CSS 赋予了动态语言的特性&#xff0c;如 变量&#xff0c; 继承&#…

计算机桌面程序名,深度技术win7旗舰版电脑桌面图标只显示名称了怎么办

就算是咱们没有刻意的在桌面创建程序的快捷打开方式&#xff0c;咱们windows系统预装的时候&#xff0c;也会在桌面自行的安装一些快捷方式&#xff0c;例如咱们比较熟悉的回收站、计算机、网络、IE图标等等&#xff0c;而这些图标的显示方式也是系统默认的&#xff0c;由图标和…

计算机专业英语读书报告,英语读书报告怎么写

《英语读书报告怎么写》由会员分享&#xff0c;可在线阅读&#xff0c;更多相关《英语读书报告怎么写(8页珍藏版)》请在装配图网上搜索。1、英语读书报告怎么写-工作报告一:英文读书报告撰写格式英文读书报告撰写格式1字体均为Times New Roman报告题目为3号黑体居中学生姓名、专…

《计算机基础知识》读后感300字,计算机应用基础读后感

010在线为您甄选多篇描写计算机应用基础读后感,计算机应用基础读后感精选,计算机应用基础读后感大全&#xff0c;有议论&#xff0c;叙事 &#xff0c;想象等形式。文章字数有400字、600字、800字....缓存时间&#xff1a; 2021-06-21计算机应用基础说课稿随着计算机应用的普及…