关键词:
Android 声纹进度播放效果(自定义View)
描述:这是一个 声纹进度播放效果的Demo。
项目代码在最后面!!!!跳转到最后
控件效果如下:
实现功能:
- 声纹可随机显示也可固定
- 可自定义加载前后两种颜色
设计核心:
主要的设计核心是依赖于drawRoundRect方法进行声纹条形的绘制。
核心代码:
VoiceProgressView.java 一个声纹进度播放的自定义View 可直接载入layout
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;
import java.security.SecureRandom;
import java.util.ArrayList;
import java.util.List;
/**
* 声纹显示View
* tangxianfeng
* 2021.12.19
*/
public class VoiceProgressView extends View
private int max = 0; //最大刻度
private int mRectHeight = 0; //高度
private int mRectWeight = 0; //宽度
private Paint mAfterPaint;
private Paint mBeforePaint;
private int mBeforeProgress;//百分比
private List<Integer> intArray = new ArrayList<>();//内置声纹长度
public VoiceProgressView(Context context)
this(context, null);
public VoiceProgressView(Context context, AttributeSet attrs)
this(context, attrs, -1);
public VoiceProgressView(Context context, AttributeSet attrs, int defStyleAttr)
super(context, attrs, defStyleAttr);
if (mAfterPaint==null)
mAfterPaint=new Paint();
mAfterPaint.setColor(Color.parseColor("#356BD8"));
mAfterPaint.setAntiAlias(true);
if (mBeforePaint==null)
mBeforePaint=new Paint();
mBeforePaint.setColor(Color.parseColor("#ABC8F2"));
mBeforePaint.setAntiAlias(true);
@Override
protected void onDraw(Canvas canvas)
if (mRectHeight==0)
mRectHeight=getHeight();
if (mRectWeight==0)
mRectWeight=getWidth();
if (max==0)
max=mRectWeight/16;
onDrawVoice(canvas); //画声纹
super.onDraw(canvas);
/**
* 画刻度
* */
private void onDrawVoice(Canvas canvas)
if (intArray==null||intArray.size()==0)
SecureRandom secureRandom=new SecureRandom();
for (int i=0;i<max+1;i++)
int height=secureRandom.nextInt(40)+15;
intArray.add(height);
//比实际声纹条数多一
if(canvas == null) return;
for(int i=1; i<max; i++)
float height=intArray.get(i%intArray.size());
//刻度间距
int mScaleMargin = 16;
canvas.drawRoundRect(i* mScaleMargin,(mRectHeight+height)/2,i* mScaleMargin +8,(mRectHeight-height)/2,5,5,i<mBeforeProgress?mAfterPaint:mBeforePaint);//播放前后的颜色替换
//设置默认声纹 可传数组20,25,38,19,40,25,30,38
public void setIntArray(List<Integer> intArray)
this.intArray = intArray;
//设置百分百
public void setProgress(float progress)
if (progress>100)
progress=100;
else if (progress<0)
progress=0;
mBeforeProgress= (int) (max*progress/100);
postInvalidate();
//自定义声纹颜色 传入类型#356BD8
public void initPaintColor(String beforecolor,String aftercolor)
if (!beforecolor.contains("#")||!aftercolor.contains("#"))
return;
//颜色格式需要含#号 简单判断处理下 不然会出错
if (mAfterPaint!=null)
mAfterPaint.setColor(Color.parseColor(beforecolor));
if (mBeforePaint!=null)
mBeforePaint.setColor(Color.parseColor(aftercolor));
使用示例:
VioceProgressActivity.java
import android.animation.ValueAnimator;
import android.widget.Button;
import com.alibaba.android.arouter.facade.annotation.Route;
import com.ui.design.R;
import com.ui.design.main.base.BaseActivity;
import com.ui.design.main.constants.Constants;
import com.ui.design.view.voicePorgress.view.VoiceProgressView;
@Route(path = Constants.VioceProgressActivity)
public class VioceProgressActivity extends BaseActivity
private float progress=0;
@Override
protected int initLayout()
return R.layout.activity_vioce_progress;
@Override
protected void initView()
VoiceProgressView voiceProgressView=findViewById(R.id.voice_progress);
Button plus=findViewById(R.id.plus);
Button delete=findViewById(R.id.delete);
Button play=findViewById(R.id.play);
play.setOnClickListener(v ->
progress=0;
ValueAnimator valueAnimator=ValueAnimator.ofFloat(0f, 100f);
valueAnimator.setDuration(3000);
valueAnimator.addUpdateListener(animation ->
progress= (float) animation.getAnimatedValue();
voiceProgressView.setProgress(progress);
);
valueAnimator.start();
);
plus.setOnClickListener(v ->
progress=progress+5;
voiceProgressView.setProgress(progress);
);
delete.setOnClickListener(v ->
progress=progress-5;
voiceProgressView.setProgress(progress);
);
@Override
protected void initData()
layout:voice_progress.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".view.voicePorgress.VioceProgressActivity">
<include
android:id="@+id/include2"
layout="@layout/title_include" />
<com.ui.design.view.voicePorgress.view.VoiceProgressView
android:id="@+id/voice_progress"
android:layout_width="250dp"
android:layout_gravity="center"
android:layout_height="40dp"
android:layout_marginTop="200dp"/>
<androidx.appcompat.widget.AppCompatButton
android:id="@+id/play"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="40dp"
android:text="播放"/>
<androidx.appcompat.widget.AppCompatButton
android:id="@+id/plus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="40dp"
android:text="加"/>
<androidx.appcompat.widget.AppCompatButton
android:id="@+id/delete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="40dp"
android:text="减"/>
</LinearLayout>
项目代码仓库
如果直接复制可能会出现代码缺陷,完整代码请去仓库下载
如果觉得还行,耽误您几秒钟的时间去我的仓库点点star,万一以后用到了呢?
UIDesign 开源项目
自定义view实现钟摆效果进度条pendulumview
...个IOS组件PendulumView,实现了钟摆的动画效果。由于原生的进度条确实是不好看,所以想可以自定义View实现这样的效果,以后也可以用于加载页面的进度条。废话不多说,先上效果图底部黑边是录制时不小心录上的,可以忽略。... 查看详情
自定义view基础之——图片加载进度条
...看具体用法,再看自定义View的实现:<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmln 查看详情
安卓通过自定义view实现水波进度条控件
...s属性为初始的进度<com.yhongm.wave_progress_view.WaveProgressViewandroid:id="@+id/wave_progress_view"android:layout_width="300dp"android:layout_height="300dp"android:layout_centerInParent="true"app:circleColor="#e38854"app... 查看详情
android自定义view-柱状波形图waveview(代码片段)
前言柱状波形图是一种常见的图形。一个个柱子按顺序排列,构成一个波形图。柱子的高度由输入数据决定。如果输入的是音频的音量,则可得到一个声波图。在一些音频软件中,我们也可以左右拖动声波,来改变音频的播放进... 查看详情
android自定义view之圆形进度条
这段时间正在学习自定义View以及属性动画的知识,然后刚好用这个来练练手,无图无真相,直接看图:简单自定义了一个比较通用的圆形进度条,像上图所示的可以定义圆的半径,进度颜色,宽度... 查看详情
android自定义view之展开收起的layout(代码片段)
效果分析效果图来看,点击事件触发view的展开收起,并在收起状态下保留了第一个子view显示,这个展开收起其实就是view的高度变化,所以只要控制好高度,就能很简单的实现这个效果。步骤1.初始化参数设置... 查看详情
android群英传笔记系列三view的自定义:实现一个模拟下载
1.实现效果:动态显示进度(分别显示了整个的动态改变的过程,然后完成后,弹出一个对话框) 2.实现过程:可以分为绘制一个圆,圆弧和文本三部分,然后在MainAcitivity中通过线程模拟下载进度。a.定义... 查看详情
自定义view-滑动进度条(代码片段)
好久没有写文章啦。记录一下此时的心情,哈哈。先上效果图:布局样式:<declare-styleablename="SlidingScaleBarView"><!--刻度文字的大小--><attrname="scaleTextSize"format="dimensi 查看详情
自定义view-滑动进度条(代码片段)
好久没有写文章啦。记录一下此时的心情,哈哈。先上效果图:布局样式:<declare-styleablename="SlidingScaleBarView"><!--刻度文字的大小--><attrname="scaleTextSize"format="dimensi 查看详情
android自定义view和属性动画完美结合,创造出酷炫圆环动画,带标尺和进度
...://blog.csdn.net/linglongxin24/article/details/53173288本文出自【DylanAndroid的博客】Android自定义View和属性动画完美结合,创造出酷炫圆环动画,带标尺和进度无意中,在看了【Android自定义View实战】之仿QQ运动步数圆弧及动画,Dylan计步... 查看详情
android自定义view之draw过程(上)
参考技术ADraw过程系列文章Android展示之三部曲:前边我们已经分析了:这俩最主要的任务是:确定View/ViewGroup可绘制的矩形区域。接下来将会分析,如何在这给定的区域内绘制想要的图形。通过本篇文章,你将了解到:Android提供... 查看详情
android自定义控件实现带百分比显示进度条,可自定义颜色
介绍前天做了一个带百分比显示的条形进度条,效果如下:实现这个自定义进度条,看起来简单,做起来。。。其实也很简单:主要通过继承View类,并重写其onDraw方法实现。思路分为3步:1.画进图条背... 查看详情
android自定义view实现文本轮播效果
...效果。自定义View代码如下:packagead.scrolltextview;importandroid. 查看详情
android自定义view-->绘制时钟(表)效果(代码片段)
...主要介绍使用自定义View来实现时钟效果,灵活地使用Android的Canvas,Paint,Path的API以及理清Canvas的save和restore的意义。代码实现1.新建一个类继承ViewpublicclassClockViewextendsView//原点privatePointmCoo=newPoint(500,800);private 查看详情
android自定义圆弧进度条(代码片段)
挺久没写文章了,近段时间被拉过去写JS项目了,在做一个项目的时候,遇到一个新的需求就是空气质量,实现空气污染指数的时候,需要到一个圆弧的进度,在网上没找到合适,干脆就自己写了... 查看详情
android自定义圆弧进度条(代码片段)
挺久没写文章了,近段时间被拉过去写JS项目了,在做一个项目的时候,遇到一个新的需求就是空气质量,实现空气污染指数的时候,需要到一个圆弧的进度,在网上没找到合适,干脆就自己写了一个... 查看详情
android自定义view:仿qq拖拽效果(代码片段)
本系列自定义View全部采用kt系统:macandroidstudio:4.1.3kotlinversion:1.5.0gradle:gradle-6.5-bin.zip废话不多说,先来看今天要完成的效果:效果一效果二效果二是在效果一的基础上改的,可以通过一行代码,让所有控件都能实现拖拽效果!所以先来编... 查看详情
android自定义view之侧滑效果
效果图:看网上的都是两个view拼接,默认右侧的不显示,水平移动的时候把右侧的view显示出来。但是看最新版QQ上的效果不是这样的,但给人的感觉却很好,所以献丑来一发比较高仿的。知识点:1、ViewDra... 查看详情