＜android＞水滴效果的进度条 DripProgressView（二阶贝塞尔曲线自定义view）

最近写了一个水滴效果的进度条，加了点特效，就是个简单的自定义view，用的二阶贝塞尔函数，如果有赶工期或者正好碰到类似效果需求的同伴们可以直接改改来用，提供 setProgress(float porgress)和reset()函数，已做适配，先上效果图：

然后直接上完整代码：


/*** author by LiuGuo* on 2021/4/9* 自定义组件：水滴进度条*/
public class DripProgressView extends View {private int widthsize;private int heightsize;Context context;DecimalFormat decimalFormat = new DecimalFormat("00");public boolean isTart;private Paint drip_paint;private Paint reseve_line_paint;private Paint text_paint;private Path path0;private Path path1;private Path path2;private Path path3;private Path path4;boolean isFinish;float text_speech = 0; //文字掉下速度int drip_speech = 0; //水滴掉下速度float mDegrees = 0; //整体进度float line_revese_radom = 0; //横线回弹随机数Random random = new Random();private int bglColor;private int textColor;public DripProgressView(Context context, @Nullable AttributeSet attrs) {super(context, attrs);this.context = context;TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.waterProgress);bglColor = ta.getColor(R.styleable.waterProgress_bgColor, Color.parseColor("#33FF66"));textColor = ta.getColor(R.styleable.waterProgress_textColor, Color.parseColor("#ffffff"));}public DripProgressView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure(widthMeasureSpec, heightMeasureSpec);init();widthsize = MeasureSpec.getSize(widthMeasureSpec);heightsize = MeasureSpec.getSize(heightMeasureSpec);setMeasuredDimension(widthsize, heightsize);}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);path0 = new Path();path1 = new Path();path2 = new Path();path3 = new Path();path4 = new Path();path0.moveTo(widthsize / 2 - widthsize / 2.0625f, heightsize / 79.65f);path0.quadTo(widthsize / 2, heightsize / 19.9125f + line_revese_radom, widthsize / 2 + widthsize / 2.0625f, heightsize / 79.65f);if (isFinish) { //完成后做的动画path1.reset();// 重置path1.moveTo(widthsize / 2, heightsize / 31.86f + line_revese_radom);path1.quadTo(widthsize / 2 - (widthsize / 8.25f - mDegrees) - widthsize / 13.75f, heightsize / 31.86f + line_revese_radom, widthsize / 2, heightsize / 10.62f + line_revese_radom);path2.reset();// 重置path2.moveTo(widthsize / 2, heightsize / 31.86f + line_revese_radom);path2.quadTo(widthsize / 2 + (widthsize / 8.25f - mDegrees) + widthsize / 13.75f, heightsize / 31.86f + line_revese_radom, widthsize / 2, heightsize / 10.62f + line_revese_radom);path3.reset();// 重置path3.moveTo(widthsize / 2, heightsize / 10.62f + drip_speech);path3.quadTo(widthsize / 2 - widthsize / 1.83334f, heightsize / 1.99125f + mDegrees + drip_speech, widthsize / 2, heightsize / 2 + heightsize / 12.38421f + mDegrees + drip_speech);path4.moveTo(widthsize / 2, heightsize / 10.62f + drip_speech);path4.quadTo(widthsize / 2 + widthsize / 1.83334f, heightsize / 1.99125f + mDegrees + drip_speech, widthsize / 2, heightsize / 2 + heightsize / 12.38421f + mDegrees + drip_speech);} else {  //进行时做的动画path1.reset();// 重置path1.moveTo(widthsize / 2, heightsize / 31.86f);path1.quadTo(widthsize / 2 - (widthsize / 8.25f - mDegrees), heightsize / 15.93f, widthsize / 2 - (widthsize / 3.75f - mDegrees), heightsize / 4.978125f);path1.quadTo(widthsize / 2 - widthsize / 1.833334f, heightsize / 1.99125f + mDegrees, widthsize / 2, heightsize / 2 + heightsize / 12.38421f + mDegrees);path2.moveTo(widthsize / 2, heightsize / 31.86f);path2.quadTo(widthsize / 2 + (widthsize / 8.25f - mDegrees), heightsize / 15.93f, widthsize / 2 + (widthsize / 3.75f - mDegrees), heightsize / 4.978125f);path2.quadTo(widthsize / 2 + widthsize / 1.833334f, heightsize / 1.99125f + mDegrees, widthsize / 2, heightsize / 2 + heightsize / 12.38421f + mDegrees);}path1.close();canvas.drawPath(path1, drip_paint);canvas.drawPath(path2, drip_paint);canvas.drawPath(path3, drip_paint);canvas.drawPath(path4, drip_paint);canvas.drawPath(path0, reseve_line_paint);if (drip_speech >= 1) {canvas.drawText(decimalFormat.format(mDegrees / (heightsize / 11.37857f) * 100) + "%", widthsize / 2 - widthsize / 6.875f, heightsize / 2.450769f + text_speech, text_paint);} else {canvas.drawText(decimalFormat.format(mDegrees / (heightsize / 11.37857f) * 100) + "%", widthsize / 2 - widthsize / 8.25f, heightsize / 2.450769f + text_speech, text_paint);}if (mDegrees < heightsize / 11.37857f) {text_speech = mDegrees;} else {isFinish = true;drip_speech += 25;text_speech += 25;if (heightsize / 10.62f + drip_speech <= heightsize / 2)line_revese_radom = random.nextInt(20) - 3;}if (heightsize / 10.62f + drip_speech <= heightsize + heightsize / 31.86f) {invalidate();}}public void setProgress(float porgress) {mDegrees = porgress;}public void reset() {mDegrees = 0;text_speech = 0;drip_speech = 0;mDegrees = 0;line_revese_radom = 0;isFinish = false;invalidate();}BlurMaskFilter   blu=new BlurMaskFilter(1,BlurMaskFilter.Blur.SOLID);void init() {setLayerType(LAYER_TYPE_SOFTWARE, null);drip_paint = new Paint();drip_paint.setAntiAlias(true);drip_paint.setColor(bglColor);drip_paint.setStyle(Paint.Style.FILL);drip_paint.setFilterBitmap(true);drip_paint.setMaskFilter(blu);drip_paint.setShadowLayer(9,13,13,Color.parseColor("#55000000"));reseve_line_paint = new Paint();reseve_line_paint.setAntiAlias(true);reseve_line_paint.setColor(bglColor);reseve_line_paint.setStrokeWidth(widthsize/165f);reseve_line_paint.setFilterBitmap(true);reseve_line_paint.setMaskFilter(blu);reseve_line_paint.setShadowLayer(9,0,13,Color.parseColor("#55000000"));text_paint = new Paint();text_paint.setColor(textColor);text_paint.setAntiAlias(true);text_paint.setTextSize(widthsize / 7.25f);text_paint.setFakeBoldText(true);text_paint.setFilterBitmap(true);text_paint.setMaskFilter(blu);text_paint.setShadowLayer(9,13,13,Color.parseColor("#55000000"));}}

attrs文件：

    <declare-styleable name="waterProgress"><attr name="bgColor" format="color"></attr><attr name="textColor" format="color"></attr></declare-styleable>

上用法：

    <com.example.xln_sideslipmenu.DripProgressViewandroid:layout_width="150dp"android:layout_height="320dp"app:bgColor="#FFD700"app:textColor="#ffffff"></com.example.xln_sideslipmenu.DripProgressView>

然后在你的进度监听回调里设置进度 setProgress(float progress) 就ok了。

码云完整代码:https://gitee.com/CeMaBenTeng/three-custom-view-effects

＜android＞水滴效果的进度条 DripProgressView（二阶贝塞尔曲线自定义view）相关推荐

Android 利用二阶贝塞尔曲线自定义弧形动画
我们先看效果实现思路我的思路是给自定义view(蓝色圆圈)设置值动画,值动画的估值器自定义为二阶贝塞尔曲线的估值器,至于什么二阶贝塞尔曲线,网上有很多教程,大家百度一下吧. 代码这个项目就不贴出 ...
Android多种样式的进度条
---- The mark of the immature man is that he wants to die nobly for a causer while the mark of the m ...
android圆形点击效果,Android 三种方式实现自定义圆形页面加载中效果的进度条
[实例简介] Android 三种方式实现自定义圆形页面加载中效果的进度条 [实例截图] [核心代码] ad376a86-a9aa-49bc-8cea-321bcff2c0c3 └── AnimRou ...
Android开发之带进度条的WebView
老套路先看效果: 直接上代码: 区分java和kotlin版本 Java版本: package com.example.progresswebview;import android.os.Bundle ...
android 4.2.2进度条,Android实现个性化的进度条
1.案例效果图 2.准备素材 progress1.png(78*78) progress2.png(78*78) 3.原理采用一张图片作为ProgressBar的背景图片(一般采用颜色比较浅的).另 ...
Android自定义控件NumberCircleProgressBar(圆形进度条)的实现
Android自定义控件NumberCircleProgressBar(圆形进度条)的实现
Android学习笔记(24):进度条组件ProgressBar及其子类
ProgressBar作为进度条组件使用,它还派生了SeekBar(拖动条)和RatingBar(星级评分条). ProgressBar支持的XML属性: Attribute Name Related ...
Android 动态改变SeekBar进度条颜色与滑块颜色
Android 动态改变SeekBar进度条颜色与滑块颜色遇到个动态改变SeekBar进度条颜色与滑块颜色的需求,如图: 有的是根据不同进度改变成不同颜色. 对于这个怎么做呢?大家都知道设置下pro ...
【Android UI】贝塞尔曲线 ③ ( 贝塞尔曲线关键点坐标记录 | 二阶贝塞尔曲线示例 )
文章目录一.贝塞尔曲线关键点坐标记录二.二阶贝塞尔曲线示例三.代码示例贝塞尔曲线参考 : https://github.com/venshine/BezierMaker 一.贝塞尔曲线关键点坐 ...

＜android＞水滴效果的进度条 DripProgressView（二阶贝塞尔曲线自定义view）

＜android＞水滴效果的进度条 DripProgressView（二阶贝塞尔曲线自定义view）相关推荐

最新文章

热门文章