波浪控件自定义

最新推荐文章于 2024-03-30 13:03:13 发布
最新推荐文章于 2024-03-30 13:03:13 发布
阅读量209 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_34500646/article/details/80069667
版权
1.首先我们需要做的就是一个波浪形的组件,并且需要不停的流动

怎么样才能有一个波浪形的效果,我们在android绘图的api里面没有提供绘制一个正弦或者余弦的方法，但是在Path里面提供了绘制贝塞尔曲线的方法quadTo();利用这个方法我们可以绘制出一个波浪形的曲线出来.


public class WaveView extends View {
    private int mWidth ,mHeight ;
    private Paint paint_1  ;
    private Path mPath_1 // 路径
    private int movePath  =0 ,movePath2 = 0;
    public WaveView(Context context) {
        super(context);
    }

    public WaveView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context ,attrs);
    }

    private void init(Context context, AttributeSet attrs) {
        paint_1 = new Paint() ;
        paint_1.setStrokeWidth(10);
        paint_1.setColor(Color.argb(70, 255, 255, 255));
        paint_1.setAntiAlias(true);
        paint_1.setStyle(Style.STROKE);
        mPath_1 = new Path() ;

    }

    @Override
    protected void onDraw(Canvas canvas) {

        mPath_1.moveTo(0, mHeight/2);
        mPath_1.quadTo(mWidth/4, mHeight/2-80, mWidth/2, mHeight/2);
        mPath_1.quadTo(mWidth*3/4, mHeight/2+80, mWidth, mHeight/2);
        canvas.drawPath(mPath_1, paint_1);




    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        this.mWidth = w ;
        this.mHeight = h ;
    }

}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45

效果图：这里写图片描述

2.已经基本掌握了贝塞尔曲线的方法以后我们就可以考虑怎么样能够让波浪流动起来，这才是重点。

考虑流动以及后面曲线怎样才能比较好画的，我们将曲线延长一倍，可以这样来考虑，图丑莫怪! 
这里写图片描述，将移动的位置设置成movePath，当movePath不断的增大的时候，波浪也就随之产生了。当movePath移动到大于当前的宽度的时候，我们将movePath清零，回到原点，继续开始，就产生了不断变化的波浪，其实我们只有两段波浪的移动在不停的重复变化。

package com.evan.view;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.Align;
import android.graphics.Paint.Style;
import android.graphics.Path;
import android.text.TextPaint;
import android.util.AttributeSet;
import android.view.View;

public class WaveView extends View {
    private int mWidth ,mHeight ;
    private Paint paint_1  ;
    private Path mPath_1 ;// 路径
    private int movePath  =0 ,movePath2 = 0;
    public WaveView(Context context) {
        super(context);
    }

    public WaveView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context ,attrs);
    }

    private void init(Context context, AttributeSet attrs) {
        paint_1 = new Paint() ;
        paint_1.setStrokeWidth(10);
        paint_1.setColor(Color.argb(70, 255, 255, 255));
        paint_1.setAntiAlias(true);
        paint_1.setStyle(Style.FILL);
        mPath_1 = new Path() ;
    }

    @Override
    protected void onDraw(Canvas canvas) {



        mPath_1.reset();
        //不断增大movePath的距离
        movePath=movePath+5;
        //档movePath大于当前屏幕大小时候回到原点
        if(movePath>=mWidth) {
            movePath=movePath-mWidth;
        }
        //将当前的起点移动到屏幕外的-mWidth距离
        mPath_1.moveTo(-mWidth +movePath, mHeight/2);
        /**
        *在对应的位置使用贝塞尔曲线，生成波浪效果
        */
        mPath_1.quadTo(-mWidth+mWidth/4+movePath, mHeight/2 -40, -mWidth+mWidth/2+movePath, mHeight/2);
        mPath_1.quadTo(-mWidth+mWidth*3/4+movePath, mHeight/2+40, 0 + movePath, mHeight/2);
        mPath_1.quadTo(mWidth/4+movePath,mHeight/2 -40, mWidth/2+movePath, mHeight/2);
        mPath_1.quadTo(mWidth*3/4+movePath, mHeight/2+40, mWidth+movePath, mHeight/2);
        mPath_1.lineTo(mWidth+movePath, mHeight);
        mPath_1.lineTo(-mWidth+movePath, mHeight);
        mPath_1.close() ;
        //绘制路径
        canvas.drawPath(mPath_1, paint_1);
        invalidate();

    }


    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        this.mWidth = w ;
        this.mHeight = h ;
    }

}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76

效果图这里写图片描述

3.添加另外一个向左移动的波浪，原理一样。代码略，在下面可以看到，贴个效果图就行了。

这里写图片描述 
（虚拟机上面这刷新速度也是醉了！！）

4.在波浪上面添加文字。

使用的方法。。。drawTextOnPath();据说此方法需要关闭硬件加速，在此之前，我弄死都画不出来，网上一搜，所噶。一种方法是在mainfest文件里卖弄添加一句关闭硬件加速的代码，另一种是在view初始化的时候加一句这个就行了： 
this.setLayerType(View.LAYER_TYPE_SOFTWARE, null); 
先看一下drawTextOnPath(text, path, hOffset, vOffset, paint);的隔各个参数。 
text 显示文字内容 
path 显示文字的路径 文字会沿着改路径显示出来（当然，我们显示的路径就是我们绘制波浪时候的路径） 
hOffset 从起点开始计算到你需要绘制的文字的距离 0的时候为起点 
vOffset 路径的上下距离 +为上 -为下 
paint 绘制文字时候的画笔 
OK，代码如下

package com.evan.view;


public class WaveView extends View {
    private int mWidth ,mHeight ;
    private TextPaint tvPaint;
    private Paint paint_1 ,paint_2 ;
    private Path mPath_1 , mPath_2;// 2条路径
    private int movePath  =0 ,movePath2 = 0;//两条波浪的移动距离
    public WaveView(Context context) {
        super(context);
    }

    public WaveView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context ,attrs);
    }

    private void init(Context context, AttributeSet attrs) {
        this.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        paint_1 = new Paint() ;
        paint_2 = new Paint() ;
        paint_1.setStrokeWidth(10);
        tvPaint = new TextPaint() ;
        tvPaint.setTextSize(60);
        tvPaint.setTextAlign(Align.LEFT);
        tvPaint.setColor(Color.WHITE);
        tvPaint.setAntiAlias(true);
        //两条路径的颜色不一样，能区分出明暗
        paint_1.setColor(Color.argb(70, 255, 255, 255));
        paint_2.setColor(Color.argb(50, 255, 255, 255));
        paint_1.setAntiAlias(true);
        paint_2.setAntiAlias(true);
        paint_1.setStyle(Style.FILL);
        paint_2.setStyle(Style.FILL);
        mPath_1 = new Path() ;
        mPath_2 = new Path() ;
    }

    @Override
    protected void onDraw(Canvas canvas) {

        //每次刷新前需要reset路径
        mPath_1.reset();
        mPath_2.reset();
        //两条波浪的移动速度让他不一样，避免动作过于重复
        movePath=movePath+5;
        movePath2 = movePath2+4;        

        if(movePath>=mWidth) {
            movePath=movePath-mWidth;
        }
        if (movePath2>=mWidth) {
            movePath2 = movePath2-mWidth;
        }
        //第一条波浪
        mPath_1.moveTo(-mWidth +movePath, mHeight/2);
        mPath_1.quadTo(-mWidth+mWidth/4+movePath, mHeight/2 -40, -mWidth+mWidth/2+movePath, mHeight/2);
        mPath_1.quadTo(-mWidth+mWidth*3/4+movePath, mHeight/2+40, 0 + movePath, mHeight/2);
        mPath_1.quadTo(mWidth/4+movePath,mHeight/2 -40, mWidth/2+movePath, mHeight/2);
        mPath_1.quadTo(mWidth*3/4+movePath, mHeight/2+40, mWidth+movePath, mHeight/2);
        mPath_1.lineTo(mWidth+movePath, mHeight);
        mPath_1.lineTo(-mWidth+movePath, mHeight);
        mPath_1.close() ;
        //第二条波浪
        mPath_2.moveTo(mWidth+mWidth - movePath2, mHeight/2);
        mPath_2.quadTo(2*mWidth - movePath2 - mWidth/4, mHeight/2-40, 2*mWidth-movePath2-mWidth/2, mHeight/2);
        mPath_2.quadTo(2*mWidth - mWidth*3/4 - movePath2, mHeight/2+40, mWidth-movePath2, mHeight/2);
        mPath_2.quadTo(mWidth*3/4-movePath2, mHeight/2-40, mWidth/2-movePath2, mHeight/2);
        mPath_2.quadTo(mWidth/4-movePath2, mHeight/2+40, -movePath2, mHeight/2);
        mPath_2.lineTo(0, mHeight);
        mPath_2.lineTo(mWidth, mHeight);
        mPath_2.close();
            /**
         * 此处绘制文字
         * 由于我们多画了一倍的长度，所以我们在计算hOffset的时候需要加上一倍mWidth
         * 然后再根据movePath随时的计算位置
         */
        canvas.drawTextOnPath("26%", mPath_1,mWidth*3/2-movePath-tvPaint.measureText("26%")/2, -5, tvPaint);
        canvas.drawPath(mPath_1, paint_1);
        canvas.drawPath(mPath_2, paint_2);

        invalidate();

    }


    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        this.mWidth = w ;
        this.mHeight = h ;
    }

}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96

效果图（太渣，真机上面运行效果更好）： 
这里写图片描述

It’s over。需要代码的话后面在放出来。


jame_11
关注
Qt/C++编写自定义控件56-波浪曲线
Qt/C++视频监控/推流/物联网/大屏系统/自定义控件/UI定制/输入法
09-21 2980
一、前言 波浪曲线控件，其实是之前一个水波进度条控件的一个核心，其实就是利用正弦曲线来生成对应的坐标进行绘制，把这个功能单独提取出来，是为了更详细的研究各种正弦余弦等拓展效果，当时写这个效果的时候，参考的是网上android绘制的水波效果的代码，然后自己重新理解以后，整理成Qt的版本，拓展了部分效果比如可以设置浪的高度，浪的密度，密度越大越浪，_，演示控件效果提供了滑块来设置对应的参数。 二、实现...
Android自定义双波浪控件
博由心生，福泽一生
11-29 416
HDWave 一个非常轻量级别的双波浪控件，内部自动管理动画生命周期，无需开发者干涉，可用于流量波动，电量波动等比较炫酷的波动场景。 /> Github地址 https://github.com/yinhaide/HDWave 特性 双正弦曲线设计的波动曲线，内部管理动画声音周期 支持切换形状（圆形、正方形） 支持切换边界宽度与边界颜色 支持切换双波形的颜色 支持切换波形...
Android自定义组件：一个波浪形的组件
qq_25181849的专栏
03-12 920
自定义一个波浪形的组件 Android最近公司需要做几个组件,然后就顺便搞一下这个的博客,其实自定义view的话相对来说掌握了核心的几个方法,还是比较简单.我们先来看看我们要做的 效果图:1.首先我们需要做的就是一个波浪形的组件,并且需要不停的流动怎么样才能有一个波浪形的效果,我们在android绘图的api里面没有提供绘制一个正弦或者余弦的方法，但是在Path里面提供了绘制贝塞尔曲线的方法quad
自定义控件实现波浪效果
jyxlichao的博客
11-22 379
<RelativeLayout android:layout_width="match_parent" android:layout_height="200px" android:background="#FF0000"> <com.yx.waveview.WaveView android:id="@+id/wv" ...
android 波浪 自定义,android 自定义控件实现波浪效果（八）
weixin_42183486的博客
05-26 277
效果图 第一步：新建文件WaveView 继承Viewpackagecom.rong.activity;importjava.util.ArrayList;importjava.util.Iterator;importjava.util.List;importandroid.content.Context;importandroid.graphics.Canvas;importand...
实现一个自定义波浪View
jielundewode的专栏
05-24 444
本文要实现的View如图： 考虑到其还要放入其他控件，直接继承RelativeLayout即可。 同时本文为了简单起见把自定义属性去掉了，直接写死各种属性。 要实现这种效果，主要是计算需要画多少个圆，通过观察我们可以轻易算出： （长度-间隔）/(2*半径 + 间隔) 由于长度不一定刚好整除，所以我们需要考虑，首先获取剩余的长度： （长度-间隔）%(2*半径 + 间隔) 接下来需要考
android自定义veiw——波浪线
07-12
详情：http://blog.youkuaiyun.com/it_xf/article/details/75014160
自定义波浪球形进度控件的设计与实现
总结上述知识点，本案例中的"仿360手机卫士的自定义波浪球形进度View"不仅涉及到了Android UI自定义控件的实现，还涵盖了图片资源的使用、动画技术的应用、以及性能优化的实践。这些都是Android开发人员必须掌握的...
Android自定义控件
06-10
本压缩包文件"Android自定义控件"提供了一系列的手工绘制的视图组件，涵盖了饼状图、雷达图、阴阳鱼、不规则按钮、贝塞尔曲线、圆形进度条、弧形进度条、折线图、涂鸦和波浪等丰富的自定义视图。这些控件不仅展示出...
WPF中如何设置自定义控件
A_nanda的博客
03-01 1426
因此我们采取另一种方式，将Button放到一个带有CornerRadius（角半径）的容器内，Button的Height和Width与容器的Height和Width相同，不显示Button的边框，利用容器的边框显示，间接实现Button圆角的功能。倒角的半径理论上是等于正方形边长的一半，也就是元的半径。圆角按钮可以做的话，那么圆形按钮怎么做呢，其实也挺简单的只要按照圆角按钮的设置方式，只要能将包裹按钮的四个倒角加起来组成正方形就行了，说明：为方便和圆角按钮进行对比，我将两个按钮放置在一起，用分割线分开。
css3动画制作组件动画效果（波浪效果）
qq_42562636的博客
08-27 273
效果图： css： /* Safari and Chrome: */ 组件的css position:relative; -webkit-animation:myfirst 1.2s linear 0s 1;/* ease */ 多个组件的 时间可以错开 1.1 1.2 1.3等 就会有波浪效果 @keyframes myfirst { 0% {top:-15px;} 20% {top:0px;} 40% {top:15px;} 60% {top:30px;} 80%
vue-cli 水滴波浪组件
weixin_43932067的博客
12-03 372
1.波浪构思 波浪形成是由中心不断向外扩散，颜色由深到浅进行。话不多说，直接上干货。 <template> <div class="wave"> <span class="wave_item" v-for="item in waveNum" :style="'--i:'+item+';--j:'+waveSize+';--k:'+waveNum"></span> </div> </template> <scrip
整理了一个 android 上的波形图及柱状图绘制控件
yuanyuan_186的专栏
04-25 3662
 [说明：以前画过波形图，最近又需要画，略不同，但还得重复写。在网上搜了一下，只找到一个复杂的框架，而我们往往只需要画简单的波形或柱状图。所以我整理提取了过去的代码，有了这个简洁的波形及柱状图控件。实现上很简单，关键在于，怎样简单，又可灵活定制来适用于通常的应用场景。比如在画图之外增加了进度条及触碰反馈功能，就可适用于录音及播音的场景] SimpleWaveform 显示一串数
Android-OpenGL-ES-实现动态（水波纹）涟漪效果（保证惊艳到你）
最新发布
2401_84010804的博客
03-30 1068
最后为了帮助大家深刻理解Android相关知识点的原理以及面试相关知识，这里放上相关的我搜集整理的24套腾讯、字节跳动、阿里、百度2019-2021面试真题解析，我把技术点整理成了视频和PDF（实际上比预期多花了不少精力），包知识脉络 + 诸多细节。还有高级架构技术进阶脑图、Android开发面试专题资料帮助大家学习提升进阶，也节省大家在网上搜索资料的时间来学习，也可以分享给身边好友一起学习。
android开发背景波浪,关于学习Android开源项目之背景有波浪效果的TextView教程
weixin_39600328的博客
05-26 248
Android中提供了Shader类专门用来渲染图像以及一些几何图形，Shader下面包括几个直接子类，分别是BitmaPshader、 ComposeShader、LinearGradient、RadialGradient、SweepGradient。 BitmapShader主要用来渲染图像，LinearGradient 用来进行梯度渲染，RadialGradient 用来进行环形渲染，Swe...
Android实现波浪进度效果——ProgressWaveView
sinat_35816092的博客
05-19 3878
效果图 先上效果图   实现 ProgressWaveView的属性         Wate Level(水位) 波浪静止时水面距离底部的高度 Amplitude(振幅) 波浪垂直振动时偏离水面的最大距离 Wave Length(波长) 一个完整的波浪的水平长度 Wave Shift(偏移) 波浪相对于初始位置的水平偏移     真实效果图 1. ...
Path常用方法
编程之美
08-20 3401
Path类中提供了一套xxxTo方法，其作用是从起点到终点移动path画笔并绘制线（moveTo方法只移动path画笔不绘制线），线有直线和曲线。 方法汇总如下表所示： lineTo(float x, float y) 绘制直线 x：终点x坐标值 y：终点y坐标值 moveTo(float x, float y) 移动画笔 x：终点x坐标值 y：终点y坐标值 arcTo(RectF oval,...
Android 自定义View实现波浪动画
博客已搬家，请访问新博客https://kswapd.cn，提供更好的阅读体验。
06-21 2312
效果演示代码调用与实现效果xml中调用 <developer.shivam.waveview.Wave android:layout_width="match_parent" android:layout_height="match_parent" app:amplitude="100" app:quadrant="0.5"
Android自定义View——扩散波浪按钮
程序员的点滴
06-28 1942
前言劳动节快乐！！！O(∩_∩)O(本文写于2017年劳动节假期的最后一天。) 虽然现在不是一个值得庆祝的时间，因为美好的白天已经过去了，再过不久大家就要回到公司或者课堂了。/(ㄒoㄒ)/~~ 想做一个随即匹配按钮，同学建议是做一个像波浪一样向外扩散的按钮，同学在网上找了一个效果图，看上去挺简单的，就自己做了一个，下面是效果图： 我觉得用在只需要一个大按钮的界面里面，是挺合适的。 下面就
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值