android 自定义进度波形图

2024-09-05 21:18
文章标签 android 自定义 进度 波形图

本文主要是介绍android 自定义进度波形图，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在网上找了一些相关资料，有些数据内容没有步骤，显得比较难懂，这边就写一个简单的自定义波形图先上图：


效果如图所示

自定义 view 分几个步骤：

  1. 一个类继承自 View 或 ViewGroup；
  2. 重写构造方法
  3. 初始化方法：用于初始化画笔、自定义属性等
  4. 重写 onMeasure()方法：用于测量屏幕尺寸，长宽的模式
  5. 重写 onLayout()方法：布局查看
  6. 重写 onDraw()方法：绘制界面
  7. 写相关的设置参数或者回调接口等

下面就介绍下波浪相关的方法：

首先是贝塞尔曲线

这个网站上可以自己查看是什么样例：http://myst729.github.io/bezier-curve/


想具体了解贝塞尔曲线原理，可自行搜索

下面介绍下简单的代码过程：

    android 提供了 Path 类里面有两个方法：



quadTo 表示的是二次方程的方法 cubicTo 表示的是三次方程的方法


x1,y1表示的事过程点C，x2,y2表示的终点 B 以此类推

所以先要设置一个起始点：x0,y0使用此方法：


现移到一个点，再过过程点，再到终点

上代码：

WaveView继承自 View

package com.riti.testview;import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;/*** Created by YZBbanban on 2018/2/28.*/public class WareView extends View {private Paint mPaint;private Path mPath;public WareView(Context context) {super(context);init();}public WareView(Context context, @Nullable AttributeSet attrs) {super(context, attrs);init();}public WareView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);init();}private void init() {mPaint = new Paint();mPaint.setAntiAlias(true);//防锯齿mPaint.setDither(true);//防抖动mPath = new Path();}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure(widthMeasureSpec, heightMeasureSpec);}@Overrideprotected void onLayout(boolean changed, int left, int top, int right, int bottom) {super.onLayout(changed, left, top, right, bottom);}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);//画笔颜色mPaint.setColor(Color.RED);//设置为描边mPaint.setStyle(Paint.Style.STROKE);//移动到左边屏幕中间mPath.moveTo(0.0f , getHeight()/2);//贝斯阿尔曲线mPath.quadTo(getWidth()/2,getHeight()/2,getWidth()/2,getHeight());//在画布上绘制canvas.drawPath(mPath,mPaint);}}

效果图：

简单的贝塞尔曲线绘制完成下面进入正题：

首先绘制曲线：

    曲线模型


如图所示：起点为（0,getHeight()/2），过程点有四个，则需要写四个二次方程方法，终点有4个：

方法:

    @Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);//画笔颜色mPaint.setColor(Color.RED);//设置为描边mPaint.setStyle(Paint.Style.STROKE);//移动到左边屏幕中间mPath.moveTo(0.0f , getHeight()/2);//贝斯阿尔曲线mPath.quadTo(getWidth()/8,getHeight()/2-100,getWidth()/4,getHeight()/2);mPath.quadTo(3*getWidth()/8,getHeight()/2+100,getWidth()/2,getHeight()/2);mPath.quadTo(5*getWidth()/8,getHeight()/2-100,3*getWidth()/4,getHeight()/2);mPath.quadTo(7*getWidth()/8,getHeight()/2+100,getWidth(),getHeight()/2);//在画布上绘制canvas.drawPath(mPath,mPaint);}

效果：


效果出来了只要让曲线动起来就行了，这里有个简单的方法，加长曲线，超出屏幕的左侧，然后向右移动，使用ValueAnimator 即可

理论图形：


绘制成这样的曲线，然后不断变换 x 轴的偏移量，上代码：

@Override
protected void onDraw(Canvas canvas) {super.onDraw(canvas);//画笔颜色mPaint.setColor(Color.RED);//设置为描边mPaint.setStyle(Paint.Style.STROKE);//初始化，不然会重复绘制mPath.reset();//移动到左边屏幕中间mPath.moveTo(0.0f , getHeight()/2);//贝斯阿尔曲线mPath.quadTo(-7 * getWidth() / 8 + offset, getHeight()/2 - 100, -3*getWidth() / 4 + offset, getHeight()/2);mPath.quadTo(-5 * getWidth() / 8 + offset, getHeight()/2 + 100, -getWidth()/2+offset, getHeight()/2);mPath.quadTo(-3 * getWidth() / 8 + offset, getHeight()/2 - 100, -getWidth() / 4 + offset, getHeight()/2);mPath.quadTo(-1 * getWidth() / 8 + offset, getHeight()/2 + 100, offset, getHeight()/2);mPath.quadTo(1 * getWidth() / 8 + offset, getHeight()/2 - 100, getWidth() / 4 + offset, getHeight()/2);mPath.quadTo(3 * getWidth() / 8 + offset, getHeight()/2 + 100, getWidth()/2 + offset, getHeight()/2);mPath.quadTo(5 * getWidth() / 8 + offset, getHeight()/2 - 100, 3*getWidth() / 4 + offset, getHeight()/2);mPath.quadTo(7 * getWidth() / 8 + offset, getHeight()/2 + 100, getWidth() + offset, getHeight()/2);//在画布上绘制canvas.drawPath(mPath,mPaint);}


当然要给 offset设置一个初始值0，效果没有太大变化，因为有一半的曲线在屏幕的左边，看不到

加上动画效果：

    private void xController() {ValueAnimator mAnimator = ValueAnimator.ofFloat(0, getWidth());mAnimator.setInterpolator(new LinearInterpolator());mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator valueAnimator) {float animatorValue = (float) valueAnimator.getAnimatedValue();offset = animatorValue;//不断的设置偏移量，并重画postInvalidate();}});mAnimator.setDuration(1000);mAnimator.setRepeatCount(ValueAnimator.INFINITE);mAnimator.start();}

在 onLayout() 方法中添加 xcontroller()方法

效果图：


动态的曲线完成

接下来是填充颜色：

改变画笔的样式为填充 FILL

上代码：

 @Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);//画笔颜色mPaint.setColor(Color.RED);//改变模式为填充 fillmPaint.setStyle(Paint.Style.FILL);//初始化，不然会重复绘制mPath.reset();//移动到左边屏幕中间mPath.moveTo(0.0f , getHeight()/2);//贝斯阿尔曲线mPath.quadTo(-7 * getWidth() / 8 + offset, getHeight()/2 - 100, -3*getWidth() / 4 + offset, getHeight()/2);mPath.quadTo(-5 * getWidth() / 8 + offset, getHeight()/2 + 100, -getWidth()/2+offset, getHeight()/2);mPath.quadTo(-3 * getWidth() / 8 + offset, getHeight()/2 - 100, -getWidth() / 4 + offset, getHeight()/2);mPath.quadTo(-1 * getWidth() / 8 + offset, getHeight()/2 + 100, offset, getHeight()/2);mPath.quadTo(1 * getWidth() / 8 + offset, getHeight()/2 - 100, getWidth() / 4 + offset, getHeight()/2);mPath.quadTo(3 * getWidth() / 8 + offset, getHeight()/2 + 100, getWidth()/2 + offset, getHeight()/2);mPath.quadTo(5 * getWidth() / 8 + offset, getHeight()/2 - 100, 3*getWidth() / 4 + offset, getHeight()/2);mPath.quadTo(7 * getWidth() / 8 + offset, getHeight()/2 + 100, getWidth() + offset, getHeight()/2);//贝塞尔曲线中点为屏幕右端竖直方向的中点，所以选取屏幕上方作为一条线的中点mPath.lineTo(getWidth(),0);//在移动到屏幕起始点，形成闭区间mPath.lineTo(0,0);//在画布上绘制canvas.drawPath(mPath,mPaint);}

效果图：

为何是向上，下面会介绍：

在 android 里有个模式叫叠加PorterDuff.Mode这个类型的方法

想要具体了解可搜索 android canvas 叠加，这里就不做说明了，有需求朋友可以留言，会及时回复

叠加意味着两个图形的交集，我用的方式为一个圆像曲面叠加消除CLEAR 模式

先绘制一个圆：

        float radius = 150.0f;
//        Log.i(TAG, "onDraw: "+getWidth());mPaint.setColor(Color.YELLOW);mPaint.setStyle(Paint.Style.FILL);int layerId = canvas.saveLayer(0, 0, getWidth(), getHeight(), null, Canvas.ALL_SAVE_FLAG);//创建透明图层canvas.drawCircle(getWidth() / 2, getHeight() / 2, radius, mPaint);

先讲下透明图层，因为在原画布上创建原没有叠加的效果，所以 canvas 的叠加不能使用，座椅最好创建一个图层（我创建的是一个整屏幕的透明图层）

完全代码：

 @Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);float radius = 150.0f;
//        Log.i(TAG, "onDraw: "+getWidth());mPaint.setColor(Color.YELLOW);mPaint.setStyle(Paint.Style.FILL);int layerId = canvas.saveLayer(0, 0, getWidth(), getHeight(), null, Canvas.ALL_SAVE_FLAG);//创建透明图层canvas.drawCircle(getWidth() / 2, getHeight() / 2, radius, mPaint);//画笔颜色mPaint.setColor(Color.RED);//改变模式为填充 fillmPaint.setStyle(Paint.Style.FILL);//设置图层叠加样式mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));//初始化，不然会重复绘制mPath.reset();//移动到左边屏幕中间mPath.moveTo(0.0f , getHeight()/2);//贝斯阿尔曲线mPath.quadTo(-7 * getWidth() / 8 + offset, getHeight()/2 - 100, -3*getWidth() / 4 + offset, getHeight()/2);mPath.quadTo(-5 * getWidth() / 8 + offset, getHeight()/2 + 100, -getWidth()/2+offset, getHeight()/2);mPath.quadTo(-3 * getWidth() / 8 + offset, getHeight()/2 - 100, -getWidth() / 4 + offset, getHeight()/2);mPath.quadTo(-1 * getWidth() / 8 + offset, getHeight()/2 + 100, offset, getHeight()/2);mPath.quadTo(1 * getWidth() / 8 + offset, getHeight()/2 - 100, getWidth() / 4 + offset, getHeight()/2);mPath.quadTo(3 * getWidth() / 8 + offset, getHeight()/2 + 100, getWidth()/2 + offset, getHeight()/2);mPath.quadTo(5 * getWidth() / 8 + offset, getHeight()/2 - 100, 3*getWidth() / 4 + offset, getHeight()/2);mPath.quadTo(7 * getWidth() / 8 + offset, getHeight()/2 + 100, getWidth() + offset, getHeight()/2);//贝塞尔曲线中点为屏幕右端竖直方向的中点，所以选取屏幕上方作为一条线的中点mPath.lineTo(getWidth(),0);//在移动到屏幕起始点，形成闭区间mPath.lineTo(0,0);//在画布上绘制canvas.drawPath(mPath,mPaint);//取消样式mPaint.setXfermode(null);//在 onDraw 之前保存画笔等的状态，便于下次直接使用画笔等工具canvas.restoreToCount(layerId);//绘制边界mPaint.setColor(Color.BLACK);mPaint.setStyle(Paint.Style.STROKE);canvas.drawCircle(getWidth() / 2, getHeight() / 2, radius, mPaint);}
效果图：


完成了静态的输出

现在就需要添加动态的一些东西：基准线（曲线慢慢上升）、曲线的密集度等，这里做简单的演示，所以就简单的做了下方法

完整代码：

package com.riti.testview;import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.os.Build;
import android.support.annotation.Nullable;
import android.support.annotation.RequiresApi;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.view.animation.LinearInterpolator;/*** Created by YZBbanban on 2018/2/28.*/public class WareView extends View {private Paint mPaint;private Path mPath;private float offset;//偏移量private float baseLine;//基线public WareView(Context context) {super(context);init();}public WareView(Context context, @Nullable AttributeSet attrs) {super(context, attrs);init();}public WareView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);init();}private void init() {mPaint = new Paint();mPaint.setAntiAlias(true);mPaint.setDither(true);mPath = new Path();}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure(widthMeasureSpec, heightMeasureSpec);baseLine = MeasureSpec.getSize(heightMeasureSpec) / 2 + 150;Log.i(TAG, "onMeasure---->: " + baseLine);}@Overrideprotected void onLayout(boolean changed, int left, int top, int right, int bottom) {super.onLayout(changed, left, top, right, bottom);xController();}@RequiresApi(api = Build.VERSION_CODES.KITKAT)@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);float radius = 150.0f;
//        Log.i(TAG, "onDraw: "+getWidth());mPaint.setColor(Color.YELLOW);mPaint.setStyle(Paint.Style.FILL);int layerId = canvas.saveLayer(0, 0, getWidth(), getHeight(), null, Canvas.ALL_SAVE_FLAG);//创建透明图层canvas.drawCircle(getWidth() / 2, getHeight() / 2, radius, mPaint);mPaint.setColor(Color.YELLOW);mPaint.setStyle(Paint.Style.FILL);mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));mPath.reset();mPath.moveTo(-getWidth() + offset, baseLine);//曲线密集度，8个周期 可自行添加或用属性设置，这里不做演示，有要求可留言int wareStep = 8;for (int i = 0; i < wareStep; i++) {float base = baseLine;if (i % 2 == 0) {base = base + 30f;} else {base = base - 30f;}mPath.quadTo((2 * i - wareStep + 1) * getWidth() / wareStep + offset,base,2 * (i - 3) * getWidth() / wareStep + offset,baseLine);}//        mPath.quadTo(-7 * getWidth() / 8 + offset, baseLine - 30, -3*getWidth() / 4 + offset, baseLine);
//        mPath.quadTo(-5 * getWidth() / 8 + offset, baseLine + 30, -getWidth()/2+offset, baseLine);
//        mPath.quadTo(-3 * getWidth() / 8 + offset, baseLine - 30, -getWidth() / 4 + offset, baseLine);
//        mPath.quadTo(-1 * getWidth() / 8 + offset, baseLine + 30, offset, baseLine);
//
//        mPath.quadTo(1 * getWidth() / 8 + offset, baseLine - 30, getWidth() / 4 + offset, baseLine);
//        mPath.quadTo(3 * getWidth() / 8 + offset, baseLine + 30, getWidth()/2 + offset, baseLine);
//        mPath.quadTo(5 * getWidth() / 8 + offset, baseLine - 30, 3*getWidth() / 4 + offset, baseLine);
//        mPath.quadTo(7 * getWidth() / 8 + offset, baseLine + 30, getWidth() + offset, baseLine);mPath.lineTo(getWidth(), 0.0f);mPath.lineTo(-getWidth() + offset, 0.0f);mPath.close();canvas.drawPath(mPath, mPaint);mPaint.setXfermode(null);canvas.restoreToCount(layerId);mPaint.setColor(Color.BLACK);mPaint.setStyle(Paint.Style.STROKE);canvas.drawCircle(getWidth() / 2, getHeight() / 2, radius, mPaint);}private void xController() {ValueAnimator mAnimator = ValueAnimator.ofFloat(0, getWidth());mAnimator.setInterpolator(new LinearInterpolator());mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator valueAnimator) {float animatorValue = (float) valueAnimator.getAnimatedValue();offset = animatorValue;//不断的设置偏移量，并重画postInvalidate();}});mAnimator.setDuration(1000);mAnimator.setRepeatCount(ValueAnimator.INFINITE);mAnimator.start();}private static final String TAG = "WareView";public void setProcess(int process) {Log.i(TAG, "setProcess: " + process);//[-150,150]float step = process * 3f;float pro = getHeight() / 2 + (150f - step);Log.i(TAG, "setProcess getWidth: " + getWidth());Log.i(TAG, "pro: " + pro);this.baseLine = pro;}
}

项目地址：https://github.com/yzbbanban/TestView


这篇关于android 自定义进度波形图的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1140084。

相关文章

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
Android实现任意版本设置默认的锁屏壁纸和桌面壁纸（两张壁纸可不一致）

Android实现任意版本设置默认的锁屏壁纸和桌面壁纸（两张壁纸可不一致）

客户有些需求需要设置默认壁纸和锁屏壁纸  在默认情况下 这两个壁纸是相同的  如果需要默认的锁屏壁纸和桌面壁纸不一样 需要额外修改 Android13实现 替换默认桌面壁纸： 将图片文件替换frameworks/base/core/res/res/drawable-nodpi/default_wallpaper.*  （注意不能是bmp格式） 替换默认锁屏壁纸： 将图片资源放入vendo
阅读更多...
Android平台播放RTSP流的几种方案探究（VLC VS ExoPlayer VS SmartPlayer）

Android平台播放RTSP流的几种方案探究（VLC VS ExoPlayer VS SmartPlayer）

技术背景 好多开发者需要遴选Android平台RTSP直播播放器的时候，不知道如何选的好，本文针对常用的方案，做个大概的说明： 1. 使用VLC for Android VLC Media Player（VLC多媒体播放器），最初命名为VideoLAN客户端，是VideoLAN品牌产品，是VideoLAN计划的多媒体播放器。它支持众多音频与视频解码器及文件格式，并支持DVD影音光盘，VCD影
阅读更多...
自定义类型：结构体(续)

自定义类型：结构体(续)

目录 一. 结构体的内存对齐 1.1 为什么存在内存对齐？ 1.2 修改默认对齐数 二. 结构体传参 三. 结构体实现位段 一. 结构体的内存对齐 在前面的文章里我们已经讲过一部分的内存对齐的知识，并举出了两个例子，我们再举出两个例子继续说明： struct S3{double a;int b;char c;};int mian(){printf("%zd\n",s
阅读更多...
android-opencv-jni

android-opencv-jni

//------------------start opencv--------------------@Override public void onResume(){ super.onResume(); //通过OpenCV引擎服务加载并初始化OpenCV类库，所谓OpenCV引擎服务即是 //OpenCV_2.4.3.2_Manager_2.4_*.apk程序包，存
阅读更多...
从状态管理到性能优化：全面解析 Android Compose

从状态管理到性能优化：全面解析 Android Compose

文章目录 引言一、Android Compose基本概念1.1 什么是Android Compose?1.2 Compose的优势1.3 如何在项目中使用Compose 二、Compose中的状态管理2.1 状态管理的重要性2.2 Compose中的状态和数据流2.3 使用State和MutableState处理状态2.4 通过ViewModel进行状态管理 三、Compose中的列表和滚动
阅读更多...
Spring 源码解读：自定义实现Bean定义的注册与解析

Spring 源码解读：自定义实现Bean定义的注册与解析

引言 在Spring框架中，Bean的注册与解析是整个依赖注入流程的核心步骤。通过Bean定义，Spring容器知道如何创建、配置和管理每个Bean实例。本篇文章将通过实现一个简化版的Bean定义注册与解析机制，帮助你理解Spring框架背后的设计逻辑。我们还将对比Spring中的BeanDefinition和BeanDefinitionRegistry，以全面掌握Bean注册和解析的核心原理。
阅读更多...
Android 10.0 mtk平板camera2横屏预览旋转90度横屏拍照图片旋转90度功能实现

Android 10.0 mtk平板camera2横屏预览旋转90度横屏拍照图片旋转90度功能实现

1.前言 在10.0的系统rom定制化开发中，在进行一些平板等默认横屏的设备开发的过程中，需要在进入camera2的 时候，默认预览图像也是需要横屏显示的，在上一篇已经实现了横屏预览功能，然后发现横屏预览后，拍照保存的图片 依然是竖屏的，所以说同样需要将图片也保存为横屏图标了，所以就需要看下mtk的camera2的相关横屏保存图片功能， 如何实现实现横屏保存图片功能 如图所示: 2.mtk
阅读更多...
android应用中res目录说明

android应用中res目录说明

Android应用的res目录是一个特殊的项目，该项目里存放了Android应用所用的全部资源，包括图片、字符串、颜色、尺寸、样式等，类似于web开发中的public目录，js、css、image、style。。。。 Android按照约定，将不同的资源放在不同的文件夹中，这样可以方便的让AAPT(即Android Asset Packaging Tool , 在SDK的build-tools目
阅读更多...
Android fill_parent、match_parent、wrap_content三者的作用及区别

Android fill_parent、match_parent、wrap_content三者的作用及区别

这三个属性都是用来适应视图的水平或者垂直大小，以视图的内容或尺寸为基础的布局，比精确的指定视图的范围更加方便。 1、fill_parent 设置一个视图的布局为fill_parent将强制性的使视图扩展至它父元素的大小 2、match_parent 和fill_parent一样，从字面上的意思match_parent更贴切一些，于是从2.2开始，两个属性都可以使用，但2.3版本以后的建议使
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2