首页 » 软件编程 » Android

Android 声纹进度播放效果(自定义View)

Android 2021-12-21

Android 声纹进度播放效果(自定义View)

描述:这是一个 声纹进度播放效果的Demo。

项目代码在最后面!!!!跳转到最后

控件效果如下:

Android 声纹进度播放效果(自定义View)

实现功能:

  • 声纹可随机显示也可固定
  • 可自定义加载前后两种颜色

设计核心:

主要的设计核心是依赖于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 开源项目


上一篇:Android跟随手指移动的控件demo实例下一篇:RxJava使用与原理分析
程序园_程序员的世界 Copyright © 2020- www.580doc.com. Some Rights Reserved.