自定义View圆环进度条
相信大家都对自定义view有所了解,今天给大家展示一下我自己写的小Demo,一个自定义环形进度条,进度在不断加载的过程中颜色呈现渐变效果,并且中间的Textview展示进度值,有两个button控制暂停和自动循环播放,话不多说,直接上效果
先写自定义view类
package test.bwie.com.liugang20170612;import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.LinearGradient; import android.graphics.Paint; import android.graphics.RectF; import android.graphics.Shader; import android.util.AttributeSet; import android.util.TypedValue; import android.view.MotionEvent; import android.view.View;/** * @ Description: * @ Date:2017/6/12 * @ Author:刘刚 */ public class GradientProgressBar extends View {/*圆弧线宽*/ private float circleBorderWidth = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 20, getResources().getDisplayMetrics());/*内边距*/ private float circlePadding = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 20, getResources().getDisplayMetrics());/*字体大小*/ private float textSize = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 50, getResources().getDisplayMetrics());/*绘制圆周的画笔*/ private Paint backCirclePaint;/*绘制圆周白色分割线的画笔*/ private Paint linePaint;/*绘制文字的画笔*/ private Paint textPaint;/*百分比*/ private int percent = 0;/*渐变圆周颜色数组*/ private int[] gradientColorArray = new int[]{Color.GREEN, Color.parseColor("#fe751a"), Color.parseColor("#13be23"), Color.GREEN};private Paint gradientCirclePaint;public GradientProgressBar(Context context) {super(context);init();}public GradientProgressBar(Context context, AttributeSet attrs) {super(context, attrs);init();}public GradientProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);init();}private void init() {backCirclePaint = new Paint();backCirclePaint.setStyle(Paint.Style.STROKE);backCirclePaint.setAntiAlias(true);backCirclePaint.setColor(Color.LTGRAY);backCirclePaint.setStrokeWidth(circleBorderWidth); // backCirclePaint.setMaskFilter(new BlurMaskFilter(20, BlurMaskFilter.Blur.OUTER)); gradientCirclePaint = new Paint();gradientCirclePaint.setStyle(Paint.Style.STROKE);gradientCirclePaint.setAntiAlias(true);gradientCirclePaint.setColor(Color.LTGRAY);gradientCirclePaint.setStrokeWidth(circleBorderWidth);linePaint = new Paint();linePaint.setColor(Color.WHITE);linePaint.setStrokeWidth(5);textPaint = new Paint();textPaint.setAntiAlias(true);textPaint.setTextSize(textSize);textPaint.setColor(Color.BLACK);}@Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {int measureWidth = MeasureSpec.getSize(widthMeasureSpec);int measureHeight = MeasureSpec.getSize(heightMeasureSpec);setMeasuredDimension(Math.min(measureWidth, measureHeight), Math.min(measureWidth, measureHeight));}@Override protected void onDraw(Canvas canvas) {super.onDraw(canvas);//1.绘制灰色背景圆环 canvas.drawArc(new RectF(circlePadding * 2, circlePadding * 2,getMeasuredWidth() - circlePadding * 2, getMeasuredHeight() - circlePadding * 2), -90, 360, false, backCirclePaint);//2.绘制颜色渐变圆环 LinearGradient linearGradient = new LinearGradient(circlePadding, circlePadding,getMeasuredWidth() - circlePadding,getMeasuredHeight() - circlePadding,gradientColorArray, null, Shader.TileMode.MIRROR);gradientCirclePaint.setShader(linearGradient);gradientCirclePaint.setShadowLayer(10, 10, 10, Color.RED);canvas.drawArc(new RectF(circlePadding * 2, circlePadding * 2,getMeasuredWidth() - circlePadding * 2, getMeasuredHeight() - circlePadding * 2), -90, (float) (percent / 100.0) * 360, false, gradientCirclePaint);//半径 float radius = (getMeasuredWidth() - circlePadding * 3) / 2;//X轴中点坐标 int centerX = getMeasuredWidth() / 2;//3.绘制100份线段,切分空心圆弧 for (float i = 0; i < 360; i += 3.6) {double rad = i * Math.PI / 180;float startX = (float) (centerX + (radius - circleBorderWidth) * Math.sin(rad));float startY = (float) (centerX + (radius - circleBorderWidth) * Math.cos(rad));float stopX = (float) (centerX + radius * Math.sin(rad) + 1);float stopY = (float) (centerX + radius * Math.cos(rad) + 1);canvas.drawLine(startX, startY, stopX, stopY, linePaint);}//4.绘制文字 float textWidth = textPaint.measureText(percent + "%");int textHeight = (int) (Math.ceil(textPaint.getFontMetrics().descent - textPaint.getFontMetrics().ascent) + 2);canvas.drawText(percent + "%", centerX - textWidth / 2, centerX + textHeight / 4, textPaint);}/** * 设置百分比 * * @param percent */ public void setPercent(int percent) {if (percent < 0) {percent = 0;} else if (percent > 100) {percent = 100;}this.percent = percent;invalidate();}public int getPercent() {return percent;}//view完成绘制之后可以随意拖动图片可拖动 private int lastX = 0; private int lastY = 0;@Override public boolean onTouchEvent(MotionEvent event) {switch (event.getAction()) {case MotionEvent.ACTION_DOWN:lastX = (int) event.getRawX();lastY = (int) event.getRawY();break;case MotionEvent.ACTION_MOVE:int dx = (int) event.getRawX() - lastX;int dy = (int) event.getRawY() - lastY;int left = getLeft() + dx;int top = getTop() + dy;int right = getRight() + dx;int bottom = getBottom() + dy;layout(left, top, right, bottom);lastX = (int) event.getRawX();lastY = (int) event.getRawY();break;case MotionEvent.ACTION_UP:break;default:break;}return true;}}
在xml布局中定义该View
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main3" android:layout_width="match_parent" android:layout_height="match_parent" > <test.bwie.com.liugang20170612.GradientProgressBar android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/gp" android:layout_centerInParent="true" /><Button android:text="循环" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_alignParentStart="true" android:layout_marginStart="51dp" android:layout_marginTop="48dp" android:id="@+id/btn1"/><Button android:text="暂停" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignTop="@+id/btn1" android:layout_alignParentEnd="true" android:layout_marginEnd="52dp" android:id="@+id/btn2"/> </RelativeLayout>
最后在MainActivity中写具体的逻辑代码
package test.bwie.com.liugang20170612;import android.os.Bundle; import android.os.Handler; import android.os.Message; import android.support.v7.app.AppCompatActivity; import android.view.View; import android.widget.Button;public class Main3Activity extends AppCompatActivity implements View.OnClickListener {private GradientProgressBar gp;private Button btn1;private Button btn2;boolean flag=false;Handler handler=new Handler(){private int mPercent;@Override public void handleMessage(Message msg) {super.handleMessage(msg);switch (msg.what){case 0:mPercent = gp.getPercent();gp.setPercent(++mPercent);if (mPercent >=100){gp.setPercent(100);if (flag){handler.removeMessages(0);handler.sendEmptyMessageDelayed(1,100);}}else {handler.sendEmptyMessageDelayed(0,100);}break;case 1: //逆时针旋转 gp.setPercent(mPercent--);if (mPercent<=0){handler.removeMessages(1);gp.setPercent(0); handler.sendEmptyMessageDelayed(0,100);}else {handler.sendEmptyMessageDelayed(1,100);}break;}}};@Override protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main3);initView();}private void initView() {gp = (GradientProgressBar) findViewById(R.id.gp);btn1 = (Button) findViewById(R.id.btn1);btn2 = (Button) findViewById(R.id.btn2);btn1.setOnClickListener(this);btn2.setOnClickListener(this);handler.sendEmptyMessageDelayed(0,100);}@Override public void onClick(View v) {switch (v.getId()) {case R.id.btn1:flag=true;handler.sendEmptyMessageDelayed(0,100);break;case R.id.btn2:handler.removeMessages(0); //暂停我急handler.removeMessages(1);break;}} }
最后附上我的github地址 点击打开链接
自定义View圆环进度条相关推荐
- Android Paint应用之自定义View实现进度条控件
在上一篇文章<Android神笔之Paint>学习了Paint的基本用法,但是具体的应用我们还没有实践过.从标题中可知,本文是带领读者使用Paint,自定义一个进度条控件. 上图就是本文要 ...
- android自定义view圆环,Android自定义View实现圆环进度条
本文实例为大家分享了android自定义view实现圆环进度条的具体代码,供大家参考,具体内容如下 效果展示 动画效果 view实现 1.底层圆环是灰色背景 2.上层圆环是红色背景 3.使用动画画一条 ...
- uni-app中自定义图表(canvas实现chart图表)开发篇(5)-圆环进度条添加动画效果
这里增加一篇介绍下进度条动画效果如何添加,前几篇的进度值被修改后,切换效果比较生硬.另外也在第四篇基础上,对图形略作修改.在查看uniapp文档时,没有发现重绘执行函数,小程序中有Canvas.req ...
- 【微信小程序】圆环进度条
目录 一.需求分析 二.实现效果 三.实现过程 四.完整代码 一.需求分析 ① 生成用于倒计时的圆环,通过代码来控制圆环的倒计时进度.要做到重新进页面,圆环不会重新归零. ② 圆环中间会有倒计时 ③ ...
- 自定义圆环形进度条实现
最近项目里边要用进度条,进度条中间展示进度,底部展示label,因为这个组件用的地方多,所以我就直接封装了一个通用组件. 先看一下效果图: 功能有: 圆环的颜色和进度可以自定义: 中间文字可以自定义: ...
- 基于canvas 2D实现微信小程序自定义组件-环形进度条
基于canvas 2D实现微信小程序自定义组件-环形进度条 最近开发一个小程序项目博闻金榜答题小程序,需要使用到一个可以显示答题倒计时的组件,基于进度条实现,下面就主要介绍基于canvas2D实现一个 ...
- Swift 圆环进度条
Swift 圆环进度条 import UICircularProgressRing import UIKit import UICircularProgressRing class ViewContr ...
- java如何画百分比圆环_canvas绘制百分比圆环进度条
开发项目,PM会跟踪项目进度:完成某个事情,也可以设置一个完成的进度. 这里用canvas绘制一个简单百分比圆环进度条. 看下效果: 1. 动画方式 2. 静默方式 贴上代码,仅供参考 /** * L ...
- 两种CSS3圆环进度条详解
晚上睡觉之前,我抽了1个多小时,研究了一下圆环进度条,结合从网上查阅的资料,我终于掌握了两种圆环的生成方法. 这次的效果就是单纯的CSS3效果,也没有写具体的JS,等以后有时间在好好整理一下吧~. 第 ...
最新文章
- PHP语言 -- 数组
- selenium3 调用IE Unable to get browser
- 【若依(ruoyi)】自定义的数据选择对话框
- 件工程项目开发最全文档模板_一文带你了解微信小程序社区和小程序开发
- 整合营销推广该如何做?
- python装饰器作用和功能_python装饰器大详解
- JS:获取字符串中第一个不是汉字的字符
- HTML(超文本标记语言)的内容和理解
- 四通滑阀非对称液压缸matlab,基于MATLAB-simulink的液压系统动态仿真PPT课件
- 下载腾讯视频(mp4 格式)
- 调用大汉三通短信接口,很详细
- python之常用标准库
- leapftp:425 failed to establish connection解决方法
- 不能将下载行为传输到IDM(亲测有效)
- java实现邮箱推送
- wps表格打印怎么铺满a4纸
- Springboot毕设项目乐器乐曲交易系统tw5iy(java+VUE+Mybatis+Maven+Mysql)
- windows下8080端口被占用解决方法
- 麦当劳中国推出全新平台“麦麦夜市”;美联航订购5000万加仑可持续航空燃料 | 美通企业日报...
- iphone怎么关闭浮屏键_iPhone屏幕上的圆圈怎么设置 打开/关闭方法
热门文章
- Windows下使用python连接sqlServer compect文件数据库(访问sdf文件)
- 微信群机器人微云助手微小云如何积分商城账户管理
- python读取文件路径格式_Python学习笔记读写文件之文件与文件路径
- android命令卡死,用adb解决安卓手机死机变砖解锁等一系列问题
- linux 磁盘无法访问,硬盘上有一个文件,无法删除,提示“无法访问,目录名无效”,如何解决?...
- 苹果读屏技术--VoiceOver
- laravel 的 intervention-image 图像处理笔记
- (矩阵行列式求模)Find The Determinant III
- 毛星云opencv之计算自然对数函数log,矩阵归一化函数normalize
- hive查看表的描述